/* ================================================================
   STYLE.CSS — Zones Interactives de survol sur l'Image 10 Bureau
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&display=swap');

:root {
  --bg: #ffffff;
  --font-sketch: 'Caveat', cursive, sans-serif;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* ÉCHELLE TYPOGRAPHIQUE — 19 paliers voulus, du plus petit badge au plus
     grand titre. Avant : 27 valeurs quasi random (0.72/0.75/0.78rem côte à
     côte, etc.), aucune traçable à une intention. Maintenant : chaque taille
     du site pointe vers UNE de ces variables — plus jamais de valeur brute
     dans une règle. Pour ajouter une carte/un composant, réutilisez un palier
     existant plutôt que d'inventer une nouvelle valeur en rem. */
  --fs-60: 0.6rem;   /* micro-labels (badges CECRL mobile, tags) */
  --fs-65: 0.65rem;  /* labels très discrets */
  --fs-75: 0.75rem;  /* petit texte utilitaire (liens, boutons secondaires) */
  --fs-80: 0.8rem;   /* texte utilitaire standard */
  --fs-85: 0.85rem;  /* corps de texte des cartes */
  --fs-90: 0.9rem;   /* corps de texte légèrement accentué */
  --fs-95: 0.95rem;  /* sous-titres discrets */
  --fs-100: 1rem;    /* texte de référence (1em) */
  --fs-105: 1.05rem; /* titres de liste (état par défaut) */
  --fs-110: 1.1rem;  /* titres de liste / labels moyens */
  --fs-115: 1.15rem; /* titres de liste (état actif/survolé) */
  --fs-125: 1.25rem; /* sous-titres */
  --fs-130: 1.3rem;  /* sous-titres accentués */
  --fs-140: 1.4rem;  /* titres de section */
  --fs-160: 1.6rem;  /* titres de section larges / étiquettes bureau */
  --fs-180: 1.8rem;  /* grands titres */
  --fs-220: 2.2rem;  /* titres héros */
  --fs-240: 2.4rem;  /* très grands titres héros */
  --fs-300: 3rem;    /* icônes/chiffres géants */
}

/* TRADUCTIONS */
.lang-fr,
.lang-nl {
  display: none;
}

body[data-lang="fr"] .lang-en {
  display: none;
}

body[data-lang="fr"] .lang-fr {
  display: inline;
}

body[data-lang="nl"] .lang-en {
  display: none;
}

body[data-lang="nl"] .lang-nl {
  display: inline;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background: var(--bg);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

html.panel-open,
body.panel-open,
html.journey-open,
body.journey-open,
html.skills-open,
body.skills-open,
html.projects-open,
body.projects-open,
html.lock-scroll,
body.lock-scroll {
  overflow: hidden !important;
  height: 100% !important;
}

/* ÉCRAN FIXE PERMANENT */
.fixed-viewport {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* recalculée fiablement quand la fenêtre change de
                     hauteur (redimensionnement desktop, barres mobiles) —
                     vh reste en repli pour les navigateurs sans dvh */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: 10;
  overflow: hidden;
}

.media-stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage-slide.active {
  opacity: 1;
  pointer-events: auto;
}

/* Médias N&B */
.media-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center; /* toujours centrée, quelle que soit
                                      la largeur/hauteur de la fenêtre */
  filter: grayscale(100%);
}

video.media-item {
  clip-path: polygon(0 0, calc(100% - 3px) 0, calc(100% - 3px) 100%, 0 100%);
}

.media-item.colored {
  filter: none !important;
}

.media-item.hidden {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────────
   LAYER INTERACTIF PAR-DESSUS L'IMAGE 10 (SURVOL DES OBJETS DU BUREAU)
   ────────────────────────────────────────────────────────────── */
.bureau-interactive-layer {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: auto;
}

.bureau-interactive-layer.hidden {
  display: none !important;
}

.hover-zone {
  position: absolute;
  cursor: pointer;
}

/* ZONE 11A : Carte du Monde (haut centre) */
.zone-11A-map {
  top: 22%;
  left: 35%;
  width: 30%;
  height: 24%;
}

/* ZONE 11A : Globe Terrestre (droite) */
.zone-11A-globe {
  top: 55%;
  left: 70%;
  width: 18%;
  height: 32%;
}

/* ZONE 11B : Écran Ordinateur (centre) */
.zone-11B-screen {
  top: 47%;
  left: 32%;
  width: 36%;
  height: 34%;
}

/* ZONE 11B : Clavier + Souris (bas centre) */
.zone-11B-controls {
  top: 83%;
  left: 34%;
  width: 33%;
  height: 12%;
}

/* ZONE 11C : Étagère (Appareil photo + Drone en haut) */
.zone-11C-shelf {
  top: 4%;
  left: 23%;
  width: 54%;
  height: 17%;
}

/* ZONE 11C : Station Totale de Géomètre (gauche) */
.zone-11C-station {
  top: 54%;
  left: 12%;
  width: 15%;
  height: 35%;
}

/* ──────────────────────────────────────────────────────────────
   BANDEAUX DE FONDU DROITS — Standard pour 5, 7, 9 & 10
   ────────────────────────────────────────────────────────────── */
.white-vignette {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  background: linear-gradient(90deg,
      #ffffff 0%,
      #ffffff 4%,
      rgba(255, 255, 255, 0.85) 10%,
      rgba(255, 255, 255, 0) 20%,
      rgba(255, 255, 255, 0) 80%,
      rgba(255, 255, 255, 0.85) 90%,
      #ffffff 96%,
      #ffffff 100%);
  transition: opacity 0.3s ease;
}

.white-vignette--strong {
  position: absolute;
  inset: 0;
  z-index: 16;
  pointer-events: none;
  background: linear-gradient(90deg,
      #ffffff 0%,
      #ffffff 12%,
      rgba(255, 255, 255, 0.95) 24%,
      rgba(255, 255, 255, 0) 36%,
      rgba(255, 255, 255, 0) 64%,
      rgba(255, 255, 255, 0.95) 76%,
      #ffffff 88%,
      #ffffff 100%);
  transition: opacity 0.3s ease;
}

.white-vignette--strong.hidden {
  display: none !important;
}

.white-vignette--mobile {
  display: none;
}

/* ──────────────────────────────────────────────────────────────
   CARTES D'INFOS CENTRÉES
   ────────────────────────────────────────────────────────────── */
.info-overlay {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.info-overlay.hidden {
  display: none !important;
}

.info-card {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border: 2px solid #111111;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  padding: 32px 40px;
  box-shadow: 6px 6px 0px #111111;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;

  max-height: 85vh;
  overflow-y: auto;
}

.info-card::-webkit-scrollbar {
  width: 4px;
}

.info-card::-webkit-scrollbar-thumb {
  background: #111111;
  border-radius: 4px;
}

.info-card--intro {
  width: min(620px, 90vw);
}

.info-card--job {
  width: min(520px, 90vw);
}

.info-card--domain {
  width: min(560px, 90vw);
}

.info-card--end {
  width: min(480px, 90vw);
}

.info-badge {
  font-family: var(--font-sketch);
  font-size: var(--fs-115);
  font-weight: 700;
  color: #111111;
  border: 1.5px solid #111111;
  padding: 2px 14px;
  border-radius: 100px;
  letter-spacing: 0.05em;
}

.info-name {
  font-family: var(--font-heading);
  font-size: var(--fs-220);
  font-weight: 700;
  color: #111111;
  line-height: 1.1;
}

.info-title {
  font-family: var(--font-heading);
  font-size: var(--fs-140);
  font-weight: 700;
  color: #111111;
  line-height: 1.2;
}

.info-subtitle {
  font-family: var(--font-sketch);
  font-size: var(--fs-125);
  font-weight: 700;
  color: #333333;
  line-height: 1.3;
}

.info-location {
  font-size: var(--fs-80);
  font-weight: 600;
  color: #444444;
}

.info-location-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(68, 68, 68, 0.5);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.info-location-link:hover {
  color: #111111;
  border-color: #111111;
}

.tab-body p,
.info-desc {
  font-family: var(--font-body);
  font-size: var(--fs-85);
  line-height: 1.65;
  color: #222222;
  max-width: 520px;
}

.info-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--fs-85);
  color: #111111;
  text-align: center;
}

.info-list li {
  line-height: 1.4;
}

.info-list-sub {
  display: inline-block;
  margin-top: 2px;
  font-size: var(--fs-70);
  font-weight: 400;
  color: #555555;
  line-height: 1.35;
}

.info-contacts {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  padding-top: 12px;
  width: 100%;
}

.info-contacts a {
  font-size: var(--fs-80);
  font-weight: 600;
  color: #111111;
  text-decoration: none;
}

.info-btn {
  display: inline-block;
  background: #111111;
  color: #ffffff;
  text-decoration: none;
  font-size: var(--fs-80);
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 100px;
  margin-top: 6px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 3px 3px 0px #444444;
}

.info-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0px #000000;
}

/* ZONE DE CLIC PERSONNAGE */
.character-click-zone {
  position: absolute;
  top: 15%;
  left: 35%;
  width: 30%;
  height: 70%;
  z-index: 30;
  cursor: pointer;
  /* Le hint (main) est positionné en absolu ci-dessous plutôt que centré en
     flex, pour pouvoir le placer plus haut que le milieu de la zone sans
     toucher à la zone cliquable elle-même (qui couvre tout le personnage). */
}

.click-hint {
  position: absolute;
  /* Centré horizontalement, mais placé aux ~3/5 de la hauteur en partant du
     bas (≈ torse/poitrine) plutôt qu'au milieu exact de la zone (≈ 50%,
     qui tombait au niveau de l'entrejambe). */
  top: 36%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, opacity 0.4s ease;
  pointer-events: none;
  opacity: 0;
  /* JS affichera cette icône après 3s d'inactivité */
}

.character-click-zone:hover .click-hint {
  transform: translate(-50%, -50%) scale(1.08);
}

/* Icône main qui "tape" l'écran — remplace l'ancienne icône souris */
.click-hint--hand {
  width: 52px;
  height: 52px;
  filter: drop-shadow(2px 3px 0px rgba(0, 0, 0, 0.2));
}

.click-hint-svg {
  width: 100%;
  height: 100%;
  color: #111111;
}

/* Effet "tap" : léger zoom avant/arrière en boucle pour suggérer le clic/toucher */
.click-hint-svg--hand {
  transform-origin: 62% 60%; /* pivote autour du bout du doigt, pas du centre du cadre */
  animation: clickHintTapZoom 1.5s ease-in-out infinite;
}

@keyframes clickHintTapZoom {
  0%, 15%, 100% { transform: scale(1); }
  35% { transform: scale(1.18); }
  55% { transform: scale(1); }
}

.character-click-zone.hidden {
  display: none !important;
}

/* ZONE DE CLIC SUR LE TÉLÉPHONE (image 14 -> image 15)
   Couvre toute l'image (au lieu d'un petit rectangle positionné en % sur
   l'écran du téléphone) : la bulle "want to get in touch" est ainsi
   toujours parfaitement centrée à l'écran, et le clic fonctionne partout
   sur l'image plutôt que sur une zone étroite fragile en % (voir aussi le
   recadrage "cover" en mobile, cf. media query 768px). */
.tel-click-zone {
  position: absolute;
  inset: 0;
  z-index: 30;
  cursor: pointer;
}

.tel-click-zone.hidden {
  display: none !important;
}

.tel-click-hint {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #111111;
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 30px;
  font-size: var(--fs-75);
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-align: center;
  font-weight: 600;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  white-space: nowrap;
  animation: bounceNoticeCenter 2s infinite;
}

.tel-click-zone:hover .tel-click-hint {
  transform: translate(-50%, -50%) scale(1.05);
}

/* Variante de bounceNotice qui conserve le centrage translate(-50%, -50%)
   (au lieu de translate(-50%, 0) utilisé par les bulles ancrées en bas) */
@keyframes bounceNoticeCenter {

  0%,
  100% {
    transform: translate(-50%, -50%);
  }

  50% {
    transform: translate(-50%, calc(-50% - 6px));
  }
}

/* BANNIÈRE INDICATION SCROLL
   Intégrée directement dans la barre site-nav (avec les langues et le
   bouton "Skip to info"), au lieu d'une bulle séparée qui se
   superposait à cette barre. */
.scroll-mode-notice {
  background: #111111;
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: var(--fs-75);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
  animation: bounceNotice 2s infinite;
  transition: opacity 0.4s ease;
}

.scroll-mode-notice.hidden {
  opacity: 0;
  pointer-events: none;
  width: 0;
  padding: 6px 0;
  overflow: hidden;
}

@keyframes bounceNotice {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

.bureau-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-sketch);
  font-size: var(--fs-160);
  font-weight: 700;
  color: #111111;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 4px 18px;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  border: 2px solid #111111;
  box-shadow: 3px 3px 0px rgba(17, 17, 17, 0.8);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.label-11A {
  top: 32%;
  left: 50%;
}

/* Map */
.label-11B {
  top: 62%;
  left: 50%;
}

/* Screen */
.label-11C {
  top: 11%;
  left: 50%;
}

/* Shelf */

/* Garde uniquement l'étiquette pertinente affichée lors du survol */
body.show-11A .label-11B,
body.show-11A .label-11C {
  opacity: 0 !important;
}

body.show-11B .label-11A,
body.show-11B .label-11C {
  opacity: 0 !important;
}

body.show-11C .label-11A,
body.show-11C .label-11B {
  opacity: 0 !important;
}

/* ──────────────────────────────────────────────────────────────
   PETITE MAIN DE DÉMO SUR LE BUREAU (image 10)
   Glisse automatiquement, comme une souris, entre les 3 objets
   (Parcours / Compétences / Projets) pour montrer qu'il faut passer
   la souris dessus (puis cliquer) — elle ne clique jamais elle-même.
   Réutilise l'icône "main" déjà utilisée pour .click-hint-svg--hand.
   Le déplacement se fait via top/left animés en CSS (transition),
   pilotés en JS (video.js) ; l'icône elle-même ne fait que suivre.
   ────────────────────────────────────────────────────────────── */
.bureau-demo-hand {
  position: absolute;
  top: 5%;
  left: 50%;
  width: 55px;
  height: 55px;
  z-index: 35;
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  filter: drop-shadow(2px 3px 0px rgba(0, 0, 0, 0.15));
  transition: top 0.9s cubic-bezier(0.65, 0, 0.35, 1),
    left 0.9s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.4s ease;
}

.bureau-demo-hand.hidden {
  display: none !important;
}

.bureau-demo-hand.visible {
  opacity: 1;
}

.bureau-demo-hand-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Petit effet "tap" une fois arrivée sur un objet, comme click-hint-svg--hand */
.bureau-demo-hand.tapping .bureau-demo-hand-img {
  transform-origin: 36% 28%; /* Centre approximatif de la zone de tap (les cercles) */
  animation: clickHintTapZoom 1.1s ease-in-out infinite;
}

/* Language Switcher Styles */
.lang-switcher {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 5px;
}

.lang-btn {
  background: transparent;
  border: none;
  color: rgba(17, 17, 17, 0.45);
  font-family: var(--font-heading);
  font-size: var(--fs-75);
  font-weight: 500;
  padding: 3px 7px;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.lang-btn.active,
.lang-btn:hover {
  color: #111111;
  background: rgba(17, 17, 17, 0.08);
}

/* Sélecteur de langue façon menu déroulant (remplace les 3 boutons EN/FR/NL) */
.lang-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: rgba(17, 17, 17, 0.06);
  color: #111111;
  border: 1.5px solid rgba(17, 17, 17, 0.35);
  border-radius: 8px;
  font-family: var(--font-heading);
  font-size: var(--fs-75);
  font-weight: 600;
  padding: 4px 22px 4px 10px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23111111' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 9px 6px;
}

.lang-select:hover,
.lang-select:focus-visible {
  background-color: rgba(17, 17, 17, 0.12);
  border-color: #111111;
  outline: none;
}

/* BARRE DE NAVIGATION PERSISTANTE (langue + accès direct au bureau)
   Visible dès l'image 4 et jusqu'à la fin du scroll — reprend le style
   "carnet de croquis" (coins asymétriques + ombre dure) des cartes info. */
.site-nav {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 2px solid #111111;
  border-radius: 18px 6px 16px 8px/8px 16px 6px 18px;
  box-shadow: 4px 4px 0px #111111;
  padding: 8px 10px;
}

.site-nav.hidden {
  display: none !important;
}

.site-nav__jump.hidden {
  display: none !important;
}

.site-nav__langs {
  margin-bottom: 0;
}

.site-nav__jump {
  background: #111111;
  color: #ffffff;
  border: none;
  font-family: var(--font-body);
  font-size: var(--fs-75);
  font-weight: 600;
  white-space: nowrap;
  padding: 6px 14px;
  border-radius: 100px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.site-nav__jump:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px rgba(17, 17, 17, 0.5);
}

.site-nav__jump:focus-visible,
.site-nav .lang-btn:focus-visible,
.site-nav__sound:focus-visible {
  outline: 2px solid #111111;
  outline-offset: 2px;
}

/* Bouton mute/unmute du son d'ambiance (vidéos scrollées 5/7/9) */
.site-nav__sound {
  background: transparent;
  border: 2px solid #111111;
  color: #111111;
  font-size: var(--fs-90);
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.2s ease, background 0.2s ease;
}

.site-nav__sound:hover {
  transform: translate(-1px, -1px);
  background: rgba(17, 17, 17, 0.08);
}

.site-nav__sound[aria-pressed="false"] {
  opacity: 0.45;
}

@media (max-width: 600px) {
  .site-nav {
    bottom: 10px;
    gap: 8px;
    padding: 6px 8px;
  }

  .site-nav__jump {
    padding: 5px 10px;
  }

  .site-nav__sound {
    width: 28px;
    height: 28px;
    font-size: var(--fs-80);
  }
}

.skip-btn {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  background: transparent;
  border: none;
  color: #777777;
  font-family: var(--font-body);
  font-size: var(--fs-75);
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s;
}

.skip-btn:hover {
  color: #111111;
}

.skip-btn.hidden {
  display: none !important;
}

.restart-intro-btn {
  background: transparent;
  border: 1.5px solid #111111;
  color: #111111;
  font-family: var(--font-body);
  font-size: var(--fs-75);
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  margin-top: 10px;
}

.restart-intro-btn:hover {
  background: #111111;
  color: #ffffff;
}

.scroll-track {
  /* 2500vh (segments 1 à 3, inchangés) + 300vh pour le segment 4
     (vidéo 13 en lecture auto -> image 14 -> image 15 contact) */
  height: 2800vh;
  width: 100%;
}

/* ================================================================
   BARRE CONTACT FINE — apparaît en bas sous l'image 10 bureau
   ================================================================ */

.contact-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 0 24px;
  height: 52px;

  /* Dégradé noir remontant depuis le bas */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.38) 55%,
    rgba(0, 0, 0, 0) 100%
  );

  /* Masquée par défaut — glisse depuis le bas */
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.45s ease;
  pointer-events: none;
}

.contact-bar.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.cbar-link {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--fs-75);
  font-weight: 500;
  letter-spacing: 0.07em;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.cbar-link:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cbar-sep {
  color: rgba(255, 255, 255, 0.25);
  font-size: var(--fs-60);
  user-select: none;
}

@media (max-width: 600px) {
  .contact-bar {
    flex-wrap: wrap;
    height: auto;
    padding: 10px 16px 12px;
    gap: 8px 16px;
  }
  .cbar-sep { display: none; }
  .cbar-link { font-size: var(--fs-65); }
}

/* Caché par défaut sur desktop, affiché uniquement via @media mobile */
.mobile-only { display: none !important; }


@media (max-width: 768px) {

  /* Intro 0 à 4 prend toute la hauteur de l'écran en mode téléphone */
  #slide-intro .media-item {
    height: 100vh !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* ── TEXTES RACCOURCIS SUR TÉLÉPHONE ──────────────────────────
     Tout élément marqué .mobile-hide (phrase, ligne, bloc...) est
     masqué uniquement en dessous de 768px ; il reste normalement
     visible sur ordinateur/tablette. Sert à raccourcir les textes
     des cartes d'infos (intro, job seeking, domaines...) sans
     dupliquer le HTML ni toucher au JS multilingue. */
  .mobile-hide {
    display: none !important;
  }

  /* mobile-only : visible sur mobile UNIQUEMENT dans la bonne langue */
  .lang-en.mobile-only { display: block !important; }
  body[data-lang="fr"] .lang-en.mobile-only { display: none !important; }
  body[data-lang="nl"] .lang-en.mobile-only { display: none !important; }

  body[data-lang="fr"] .lang-fr.mobile-only { display: block !important; }
  body[data-lang="nl"] .lang-nl.mobile-only { display: block !important; }

  /* Sous-descriptions des diplômes (carte "Domaines & Expertise") :
     toujours masquées sur téléphone, la liste des 3 diplômes suffit. */
  .info-list-sub {
    display: none !important;
  }

  /* ── CARTES D'INFOS : DÉMARRENT EN HAUT DE L'ÉCRAN ────────────
     Sur téléphone, les cartes ne sont plus centrées verticalement
     (ça les faisait chevaucher avec le message "↓ Scroll" affiché
     plus bas) : elles démarrent désormais depuis le haut de l'écran. */
  .info-overlay {
    align-items: flex-start !important;
    padding-top: 9vh;
  }

  .info-card {
    max-height: 78vh;
  }

  /* Dézoom des médias 5 à 15 pour montrer plus de largeur */
  #slide-scroll-1 .media-item,
  #slide-scroll-2 .media-item,
  #slide-scroll-3 .media-item,
  #slide-scroll-4 .media-item {
    height: 70vh !important;
    top: 15vh !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Ajuste également le calque interactif du bureau pour qu'il s'aligne
     avec l'image dézoomée (la zone de clic téléphone couvre déjà toute
     l'image via inset:0, aucun ajustement nécessaire pour elle) */
  .bureau-interactive-layer {
    height: 70vh !important;
    top: 15vh !important;
  }

  /* Supprime le fondu blanc latéral sur téléphone (l'écran est déjà étroit) */
  .white-vignette,
  .white-vignette--strong {
    display: none !important;
  }

  /* Affiche le fondu vertical dédié au mobile */
  .white-vignette--mobile {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 15;
    pointer-events: none;
    background: linear-gradient(180deg,
        #ffffff 0%,
        #ffffff 12%,
        rgba(255, 255, 255, 0.9) 18%,
        rgba(255, 255, 255, 0) 25%,
        rgba(255, 255, 255, 0) 75%,
        rgba(255, 255, 255, 0.9) 82%,
        #ffffff 88%,
        #ffffff 100%);
    transition: opacity 0.3s ease;
  }

  .white-vignette--mobile.hidden {
    opacity: 0 !important;
  }
}

/* ================================================================
   JOURNEY OVERLAY PANEL
   ================================================================ */
.journey-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: stretch;
  justify-content: center;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.journey-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.journey-overlay.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.journey-panel {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 48px 32px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.journey-close {
  position: absolute;
  top: 20px;
  right: 28px;
  background: none;
  border: 2px solid #111;
  color: #111;
  font-size: var(--fs-110);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.journey-close:hover {
  background: #111;
  color: #fff;
}

.journey-heading {
  font-family: var(--font-sketch);
  font-size: var(--fs-240);
  font-weight: 700;
  color: #111;
  margin-bottom: 28px;
  letter-spacing: 0.02em;
  text-align: center;
  /* petit trait dessiné en dessous */
  padding-bottom: 14px;
  border-bottom: 2px solid #111;
}

/* Deux colonnes */
.journey-body {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr;
  gap: 40px;
  flex: 1;
  overflow: hidden;
  align-items: center; /* centre verticalement les deux colonnes */
  padding-top: 20px;   /* pousse l'ensemble vers le bas */
}

/* ── Colonne gauche : Timeline ─────── */
.journey-left {
  height: 500px;
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 16px;
  padding-left: 10px;
  position: relative;
  scrollbar-width: thin;
}

.journey-left::-webkit-scrollbar {
  width: 6px;
}
.journey-left::-webkit-scrollbar-thumb {
  background: #111;
  border-radius: 3px;
}

/* En-tête filtre de lieu */
.journey-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f4f4f4;
  border: 1.5px solid #111;
  padding: 8px 16px;
  margin-bottom: 20px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: var(--fs-80);
  font-weight: 600;
}

.journey-filter-reset {
  background: #111;
  color: #fff;
  border: none;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--fs-75);
  font-weight: 700;
  transition: opacity 0.2s;
}
.journey-filter-reset:hover {
  opacity: 0.8;
}

/* ── Onglets de filtre par catégorie (Toutes / Volontariat / Pro / Éducation) ── */
.journey-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
  padding-bottom: 6px;
}

.journey-tab {
  font-family: var(--font-body);
  font-size: var(--fs-75);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: #f4f4f4;
  border: 1.5px solid #111;
  color: #111;
  border-radius: 20px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.journey-tab:hover {
  transform: translateY(-1px);
}

.journey-tab.active {
  background: #111;
  color: #fff;
}

.journey-loading {
  font-family: var(--font-body);
  font-size: var(--fs-85);
  opacity: 0.6;
  padding: 20px 0;
}

.journey-timeline {
  position: relative;
  padding-left: 20px;
}

.journey-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: #111;
}

.journey-entry {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 0 24px 20px;
  cursor: pointer;
  transition: opacity 0.25s ease;
  opacity: 0.9;
}

.journey-entry:hover {
  opacity: 1;
}

.journey-entry.active {
  opacity: 1;
}

.journey-dot {
  position: absolute;
  left: -19px;
  top: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #111;
  transition: background 0.2s, transform 0.2s;
}

.journey-entry.active .journey-dot,
.journey-entry:hover .journey-dot {
  background: #111;
  transform: scale(1.3);
}

.journey-year {
  font-family: var(--font-heading);
  font-size: var(--fs-75);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #555;
}

.journey-title {
  font-family: var(--font-heading);
  font-size: var(--fs-105);
  font-weight: 700;
  color: #111;
  margin: 4px 0;
  line-height: 1.25;
}

.journey-entry.active .journey-title {
  font-size: var(--fs-115);
}

.journey-place {
  font-family: var(--font-sketch);
  font-size: var(--fs-110);
  color: #555;
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
  opacity: 1;
}

.journey-desc {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-75);
  line-height: 1.5;
  color: #333;
  margin-top: 4px;
}


/* ── Colonne droite : Globe ──────────── */
.journey-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.journey-globe-wrap {
  position: relative;
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#journeyGlobe {
  width: 460px !important;
  height: 460px !important;
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}

#journeyGlobe:active {
  cursor: grabbing;
}

.journey-globe-hint {
  text-align: center;
  font-family: var(--font-sketch);
  font-size: var(--fs-90);
  color: #999;
  margin-top: 10px;
}

/* ── TOOLTIP FLOTTANT SUR LE GLOBE (Expériences par lieu) ── */
.globe-tooltip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(340px, 90vw);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid #111;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 4px 4px 0px #111;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: auto;
}

.globe-tooltip.hidden {
  opacity: 0;
  transform: translate(-50%, -45%) scale(0.95);
  pointer-events: none;
}

.gtooltip-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: #555;
  font-size: var(--fs-90);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.gtooltip-close:hover {
  color: #111;
}

.gtooltip-header {
  font-family: var(--font-sketch);
  font-size: var(--fs-125);
  font-weight: 700;
  color: #111;
  border-bottom: 1.5px dashed rgba(0, 0, 0, 0.15);
  padding-bottom: 6px;
  padding-right: 18px;
}

.gtooltip-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
  padding-right: 4px;
}

.gtooltip-body::-webkit-scrollbar {
  width: 4px;
}
.gtooltip-body::-webkit-scrollbar-thumb {
  background: #111;
  border-radius: 4px;
}

.gtooltip-item {
  display: block;
  text-decoration: none;
  font-family: var(--font-body);
  color: #333;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  text-align: left;
}

.gtooltip-item:hover {
  background: #f5f5f5;
  border-color: #111;
  color: #111;
}

.gtooltip-item-year {
  font-size: var(--fs-65);
  font-weight: 700;
  color: #666;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}

.gtooltip-item-title {
  font-size: var(--fs-75);
  font-weight: 600;
  line-height: 1.25;
}


/* ── Responsive mobile ─────────────── */
@media (max-width: 768px) {
  .journey-panel {
    padding: 32px 20px 20px;
  }

  .journey-body {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .journey-right {
    order: -1;
  }

  .journey-globe-wrap {
    max-width: 322px; /* 460px * 0.7 — globe réduit uniquement sur mobile */
  }

  #journeyGlobe {
    width: 322px !important;
    height: 322px !important;
  }

  .journey-heading {
    font-size: var(--fs-180);
  }
}

/* ================================================================
   SKILLS PANEL — Mock Device Responsive
   ================================================================ */

.skills-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 20px 0;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.skills-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.skills-overlay.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.skills-panel {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.skills-close {
  position: absolute;
  top: 16px;
  right: 24px;
  background: none;
  border: 2px solid #111;
  color: #111;
  font-size: var(--fs-110);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.skills-close:hover {
  background: #111;
  color: #fff;
}

.skills-heading {
  font-family: var(--font-sketch);
  font-size: var(--fs-220);
  font-weight: 700;
  color: #111;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 2px solid #111;
  width: 100%;
}

/* ── DEVICE MOCK ───────────────────────────────── */

/* Desktop : écran d'ordinateur */
.skills-device {
  position: relative;
  width: 100%;
  max-width: 820px;
  min-height: 460px;
  max-height: 78vh;
  background: #1a1a1a;
  border-radius: 14px 14px 8px 8px;
  border: 3px solid #111;
  box-shadow:
    0 0 0 6px #222,
    0 20px 60px rgba(0,0,0,0.25),
    inset 0 2px 8px rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Barre de titre d'écran */
.skills-device::before {
  content: '● ● ●';
  display: block;
  background: #2a2a2a;
  color: rgba(255,255,255,0.4);
  font-size: var(--fs-65);
  padding: 8px 14px;
  letter-spacing: 4px;
  border-bottom: 1px solid #333;
  flex-shrink: 0;
}

/* Pied de l'écran (simulé stand) */
.skills-device::after {
  content: '';
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 14px;
  background: #222;
  border-radius: 0 0 4px 4px;
}

/* ── Écran d'accueil : grille d'apps (vue dossier ouvert) ── */
.skills-screen {
  flex: 1;
  background: #f8f8f8;
  padding: 20px 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 16px;
  overflow-y: auto;
  scrollbar-width: thin;
  position: relative;
}

/* ── Écran d'accueil : grille de DOSSIERS façon iOS ── */
.skills-screen.skills-home {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  align-content: start;
}

.skills-folder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.skills-folder-icon {
  width: 76px;
  height: 76px;
  background: rgba(0,0,0,0.045);
  border: 2px solid #111;
  border-radius: 20px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 3px 3px 0 rgba(17,17,17,0.15);
}

.skills-folder:hover .skills-folder-icon {
  transform: translateY(-3px);
  box-shadow: 4px 4px 0 #111;
}

.skills-folder-preview {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
}

.skills-folder-mini {
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sketch);
  font-weight: 700;
  font-size: var(--fs-75);
  color: #fff;
}

.skills-folder-mini img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.skills-folder-mini-fallback {
  background: #111;
}

.skills-folder-mini-empty {
  background: rgba(0,0,0,0.06);
}

.skills-folder-label {
  font-family: var(--font-body);
  font-size: var(--fs-75);
  font-weight: 600;
  color: #222;
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
}

/* ── Vue "dossier ouvert" façon iOS ── */
.skills-folder-view {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.skills-folder-view.hidden {
  display: none;
}

.skills-folder-view.open {
  opacity: 1;
}

.skills-folder-view-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20,20,20,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.skills-folder-panel {
  position: relative;
  width: 88%;
  max-height: 82%;
  background: #f8f8f8;
  border: 2px solid #111;
  border-radius: 20px;
  box-shadow: 6px 6px 0 #111;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.85);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.skills-folder-view.open .skills-folder-panel {
  transform: scale(1);
}

.skills-folder-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #111;
  color: #fff;
  padding: 10px 14px;
  flex-shrink: 0;
}

.skills-folder-panel-icon { font-size: var(--fs-110); }

.skills-folder-panel-title {
  flex: 1;
  font-family: var(--font-body);
  font-size: var(--fs-85);
  font-weight: 700;
}

.skills-folder-panel-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: var(--fs-90);
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}

.skills-folder-panel-close:hover { color: #fff; }

.skills-folder-panel-grid {
  flex: 1;
  padding: 20px 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 16px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.skills-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 10px 6px;
  border-radius: 14px;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.skills-app:hover {
  border-color: #111;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.skills-app-icon {
  width: 54px;
  height: 54px;
  object-fit: contain;
  border-radius: 12px;
}

.skills-app-icon-fallback {
  width: 54px;
  height: 54px;
  background: #111;
  color: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-160);
  font-weight: 700;
  font-family: var(--font-sketch);
}

.skills-app-label {
  font-family: var(--font-body);
  font-size: var(--fs-65);
  font-weight: 600;
  color: #222;
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
}

.skills-app-stars {
  font-size: var(--fs-60);
  color: #111;
  letter-spacing: 1px;
}

/* ── Badge de niveau de langue (CECRL : A1 → C2), remplace les étoiles
     uniquement pour la catégorie 8_LANGUES ── */
.skills-app-level-badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--fs-65);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  background: #111;
  border-radius: 10px;
  padding: 1px 8px;
}

.skills-tooltip-stars.skills-app-level-badge {
  font-size: var(--fs-95);
  padding: 3px 14px;
  border-radius: 14px;
  color: #fff;
}

.skills-loading {
  font-family: var(--font-body);
  font-size: var(--fs-85);
  opacity: 0.6;
  padding: 40px;
  text-align: center;
}

/* ── Dock (desktop caché, mobile visible) ── */
.skills-dock {
  display: none;
}

/* ── TOOLTIP NIVEAU ÉTOILES ── */
.skills-tooltip {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 300;
  background: #fff;
  border: 2px solid #111;
  border-radius: 16px;
  padding: 24px 28px;
  box-shadow: 5px 5px 0 #111;
  min-width: 240px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  transition: opacity 0.25s, transform 0.25s;
}

.skills-tooltip.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -46%) scale(0.94);
}

.skills-tooltip-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: var(--fs-85);
  cursor: pointer;
  color: #888;
  line-height: 1;
}
.skills-tooltip-close:hover { color: #111; }

.skills-tooltip-icon img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  border-radius: 14px;
}

.skills-tooltip-name {
  font-family: var(--font-sketch);
  font-size: var(--fs-140);
  font-weight: 700;
  color: #111;
}

.skills-tooltip-stars {
  font-size: var(--fs-140);
  color: #111;
  letter-spacing: 3px;
}

.skills-tooltip-desc {
  font-family: var(--font-body);
  font-size: var(--fs-75);
  color: #555;
  line-height: 1.5;
  border-top: 1px dashed #ddd;
  padding-top: 8px;
  width: 100%;
}

.skills-tooltip-contact-link {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-90);
  color: #111;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.skills-tooltip-contact-link:hover {
  color: #555;
}

/* ── MOBILE : Transforme le device en smartphone ── */
@media (max-width: 768px) {
  .skills-panel {
    padding: 16px 12px;
    gap: 12px;
  }

  .skills-heading {
    font-size: var(--fs-160);
  }

  /* Smartphone frame */
  .skills-device {
    width: 320px;
    max-width: 90vw;
    min-height: 560px;
    border-radius: 32px;
    border-width: 5px;
    box-shadow:
      0 0 0 10px #1a1a1a,
      0 0 0 12px #333,
      0 30px 60px rgba(0,0,0,0.3);
  }

  /* Notch au lieu de la barre titre */
  .skills-device::before {
    content: '';
    display: block;
    background: #1a1a1a;
    height: 28px;
    border-bottom: none;
    position: relative;
  }
  .skills-device::before::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 16px;
    background: #111;
    border-radius: 10px;
  }

  /* Bouton home */
  .skills-device::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: #222;
    border-radius: 50%;
    border: 2px solid #444;
  }

  .skills-screen {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 12px 8px;
  }

  .skills-screen.skills-home {
    grid-template-columns: repeat(3, 1fr);
  }

  .skills-folder-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    padding: 6px;
  }

  .skills-folder-preview { gap: 3px; }

  .skills-folder-label {
    font-size: var(--fs-65);
  }

  .skills-app {
    padding: 8px 4px;
    border-radius: 16px;
  }

  .skills-app-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .skills-app-label {
    font-size: var(--fs-60);
  }

  .skills-app-stars {
    font-size: var(--fs-60);
  }

  .skills-folder-panel {
    width: 94%;
    max-height: 86%;
  }

  .skills-folder-panel-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 14px 10px;
  }

  .skills-folder-panel-title {
    font-size: var(--fs-75);
  }

  /* Dock mobile */
  .skills-dock {
    display: block;
    background: rgba(255,255,255,0.15);
    border-top: 1px solid rgba(255,255,255,0.1);
    height: 70px;
    padding: 8px 16px;
    border-radius: 0 0 28px 28px;
  }
}

/* =====================================================================
   PROJECTS PANEL — Style Instagram Grid + Lightbox
   ===================================================================== */

/* =====================================================================
   PROJECTS PANEL — Centered Modal (Journey & Skills Style)
   ===================================================================== */

/* --- Overlay wrapper matching 12A/12B --- */
.projects-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: opacity 0.35s ease, visibility 0.35s ease, background 0.35s ease, backdrop-filter 0.35s ease;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.projects-overlay.projects-visible {
  opacity: 1;
  visibility: visible;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: all;
}
.projects-overlay.hidden {
  display: none !important;
}

/* --- Panel aligned on journey-panel --- */
.projects-panel {
  position: relative;
  width: 100%;
  max-width: 1100px;
  height: 85vh;
  margin: 0 auto;
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}

/* --- Close button matching .journey-close --- */
.projects-close {
  position: absolute;
  top: 16px;
  right: 24px;
  background: none;
  border: 2px solid #111;
  color: #111;
  font-size: var(--fs-110);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.projects-close:hover {
  background: #111;
  color: #fff;
}

/* --- Title matching .journey-heading --- */
.projects-heading {
  font-family: var(--font-sketch);
  font-size: var(--fs-240);
  font-weight: 700;
  color: #111;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
  text-align: center;
  padding-bottom: 14px;
  border-bottom: 2px solid #111;
  flex-shrink: 0;
}

/* --- Category tabs (pastel sketch badges) --- */
.projects-cats-wrap {
  position: relative;
  flex-shrink: 0;
}
.projects-cats {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 6px 14px;
  scrollbar-width: none;
  justify-content: flex-start;
  flex-shrink: 0;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.projects-cats::-webkit-scrollbar { display: none; }
.projects-cat-btn { scroll-snap-align: start; }

/* Fade hints on the edges so it's clear the row scrolls when it overflows */
.projects-cats-wrap::before,
.projects-cats-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 14px;
  width: 28px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.projects-cats-wrap::before {
  left: 0;
  background: linear-gradient(to right, #fff, rgba(255,255,255,0));
}
.projects-cats-wrap::after {
  right: 0;
  background: linear-gradient(to left, #fff, rgba(255,255,255,0));
}
.projects-cats-wrap.scroll-start-hidden::before { opacity: 1; }
.projects-cats-wrap.scroll-end-hidden::after { opacity: 1; }

/* On wide screens where everything fits, center the row for a balanced look */
@media (min-width: 1150px) {
  .projects-cats {
    justify-content: center;
  }
  .projects-cats-wrap::before,
  .projects-cats-wrap::after {
    display: none;
  }
}

.projects-cat-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 2px solid #111111;
  border-radius: 12px;
  padding: 8px 18px;
  color: #111111;
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-85);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  box-shadow: 2px 2px 0px rgba(17, 17, 17, 0.8);
}
.projects-cat-btn .projects-cat-icon {
  font-size: var(--fs-110);
}
.projects-cat-btn:hover {
  background: #f4f4f4;
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px rgba(17, 17, 17, 0.9);
}
.projects-cat-btn.active {
  background: color-mix(in srgb, var(--cat-color) 20%, #ffffff);
  color: #111111;
  transform: translate(1px, 1px);
  box-shadow: 0px 0px 0px rgba(17, 17, 17, 0);
  border-color: #111111;
}

/* --- Grid Body --- */
.projects-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 4px 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(17,17,17,0.2) transparent;
}
.projects-body::-webkit-scrollbar { width: 5px; }
.projects-body::-webkit-scrollbar-track { background: transparent; }
.projects-body::-webkit-scrollbar-thumb { background: rgba(17,17,17,0.2); border-radius: 4px; }

/* --- 9:16 Portrait Grid --- */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* --- Project card (9:16 Portrait) --- */
.proj-card {
  position: relative;
  aspect-ratio: 9/16;
  overflow: hidden;
  background: #ffffff;
  border: 2px solid #111111;
  border-radius: 12px;
  box-shadow: 3px 3px 0px rgba(17, 17, 17, 0.8);
  display: flex;
  flex-direction: column;
  cursor: default;
  transition: transform 0.2s, box-shadow 0.2s;
}
.proj-card--has-images {
  cursor: pointer;
}
.proj-card--has-images:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0px rgba(17, 17, 17, 0.9);
}

/* Thumbnail wrapper */
.proj-card-thumb {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #ffffff; /* White background under images to frame them */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Force image to fit perfectly inside the 9:16 frame without crop */
.proj-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* PERFECT WIDTH AND HEIGHT FIT - NO CROP */
  display: block;
  transition: transform 0.3s ease;
}

/* Placeholder for no images */
.proj-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-300);
  background: linear-gradient(135deg, #f7f7f9, #ececed);
  color: rgba(17,17,17,0.2);
}

/* Image count badge */
.proj-card-count {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(17,17,17,0.85);
  color: #fff;
  font-size: var(--fs-65);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  pointer-events: none;
}

/* Hover overlay icon */
.proj-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.proj-card--has-images:hover .proj-card-overlay {
  opacity: 1;
}
.proj-card-overlay-icon {
  font-size: var(--fs-220);
  color: #111;
  background: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border: 2px solid #111;
}

/* Small play-triangle badge on cards whose first visual is a video link */
.proj-card-play-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-shadow: 2px 2px 0px rgba(17,17,17,0.8);
}

/* Card description and text info area */
.proj-card-info {
  padding: 12px 14px;
  background: #ffffff;
  border-top: 2px solid #111111;
  flex-shrink: 0;
}
.proj-card-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-80);
  font-weight: 700;
  color: #111111;
  line-height: 1.3;
  margin-bottom: 4px;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 2.6em; /* locks height for aligned grid layout */
}
.proj-card-tag {
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-65);
  color: #666;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}


/* =====================================================================
   INSTAGRAM-STYLE SPLIT LIGHTBOX
   ===================================================================== */
.proj-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.proj-lightbox.hidden { display: none !important; }

.proj-lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.85);
  backdrop-filter: blur(6px);
}

/* Center Modal Card Frame */
.proj-lb-card {
  position: relative;
  z-index: 2;
  background: #ffffff;
  border: 3px solid #111111;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 8px 8px 0px #111;
  width: 90vw;
  max-width: 960px;
  height: 80vh;
  max-height: 700px;
  overflow: hidden;
  animation: lbPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes lbPop {
  0% { transform: scale(0.95); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Split-screen wrapper */
.proj-lb-split {
  display: flex;
  height: 100%;
  width: 100%;
}

/* LEFT SIDE: Image viewport (white gallery frame) */
.proj-lb-media-section {
  flex: 1.2;
  background: #ffffff;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 100%;
}

.proj-lb-img-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Perfect Contain fit in Lightbox view - no crop in width/height */
.proj-lb-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* PERFECT FIT - NO CUTTING */
  border-radius: 4px;
  transition: opacity 0.2s ease;
}

.proj-lb-counter {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.7);
  background: rgba(17,17,17,0.75);
  font-size: var(--fs-75);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

/* --- Video items in the lightbox: same 9:16 portrait fit as photos --- */
.proj-lb-video-wrap {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.proj-lb-video-wrap .proj-lb-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.proj-lb-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 3px 3px 0px rgba(17,17,17,0.85);
  transition: transform 0.15s ease;
}
.proj-lb-play-btn:hover {
  transform: translate(-50%, -50%) scale(1.06);
}
.proj-lb-video-iframe {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border: none;
  border-radius: 4px;
  background: #000;
}
.proj-lb-yt-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-300);
  background: linear-gradient(135deg, #f7f7f9, #ececed);
}

/* RIGHT SIDE: Instagram Details Sidebar */
.proj-lb-info-section {
  width: 380px;
  flex-shrink: 0;
  background: #ffffff;
  border-left: 2px solid #111111;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Profile header */
.proj-lb-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 2px solid #111111;
  background: #fafafa;
}
.proj-lb-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #c9a96e;
  border: 2px solid #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: var(--fs-90);
  color: #111;
  box-shadow: 2px 2px 0px #111;
}
.proj-lb-user-details {
  display: flex;
  flex-direction: column;
}
.proj-lb-username {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: var(--fs-90);
  color: #111;
}
.proj-lb-user-role {
  font-size: var(--fs-75);
  color: #666;
}

/* Content details (Space for Title + Tag + Description) */
.proj-lb-details-content {
  flex: 1;
  padding: 24px 20px;
  overflow-y: auto;
}
.proj-lb-project-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-125);
  font-weight: 700;
  color: #111111;
  line-height: 1.3;
  margin-bottom: 8px;
}
.proj-lb-tag-badge {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-65);
  font-weight: 700;
  text-transform: uppercase;
  color: #111111;
  background: #f0f0f2;
  border: 1px solid #111;
  padding: 3px 8px;
  border-radius: 6px;
  margin-bottom: 18px;
}
.proj-lb-desc {
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-85);
  line-height: 1.6;
  color: #333333;
  white-space: pre-line;
}

/* Sidebar Footer */
.proj-lb-footer {
  padding: 16px 20px;
  border-top: 1px solid #eee;
  background: #fafafa;
  font-size: var(--fs-75);
  color: #777;
  font-weight: 500;
}

/* Close & Navigation overlay controls */
.proj-lb-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #ffffff;
  border: 2px solid #111111;
  color: #111;
  font-size: var(--fs-100);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  z-index: 10;
  box-shadow: 2px 2px 0px #111;
}
.proj-lb-close:hover {
  background: #111;
  color: #fff;
  transform: scale(1.05);
}

.proj-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #ffffff;
  border: 2px solid #111111;
  color: #111111;
  font-size: var(--fs-180);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  z-index: 5;
  box-shadow: 3px 3px 0px #111;
}
.proj-lb-nav:hover {
  background: #111;
  color: #fff;
  transform: translateY(-50%) scale(1.05);
}
.proj-lb-prev { left: 16px; }
.proj-lb-next { right: 16px; }

/* ─── RESPONSIVE ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .projects-panel {
    padding: 24px 16px;
    height: 90vh;
  }
  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .projects-heading {
    font-size: var(--fs-180);
  }

  /* Categories wrap onto extra rows on mobile instead of scrolling
     horizontally — nothing gets cut off / hidden anymore. */
  .projects-cats {
    flex-wrap: wrap;
    overflow-x: visible;
    justify-content: center;
    padding: 4px 0 10px;
  }
  .projects-cats-wrap::before,
  .projects-cats-wrap::after {
    display: none;
  }
  .projects-cat-btn {
    padding: 6px 12px;
    font-size: var(--fs-75);
    gap: 5px;
  }
  .projects-cat-btn .projects-cat-icon {
    font-size: var(--fs-95);
  }

  /* Lightbox Split-Screen layout switches to column layout on mobile.
     The image gets most of the vertical space (portrait phones have
     plenty of height to work with), info panel takes the rest and
     scrolls internally if the description is long. */
  .proj-lb-card {
    height: 92vh;
    max-height: none;
    width: 94vw;
  }
  .proj-lb-split {
    flex-direction: column;
  }
  .proj-lb-media-section {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }
  .proj-lb-info-section {
    width: 100%;
    height: auto;
    flex: 0 0 auto;
    max-height: 34%;
    border-left: none;
    border-top: 2px solid #111111;
    overflow-y: auto;
  }
  .proj-lb-profile {
    padding: 10px 16px;
  }
  .proj-lb-details-content {
    padding: 12px 16px;
  }
  .proj-lb-nav {
    width: 36px;
    height: 36px;
    font-size: var(--fs-130);
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .proj-lb-card {
    max-width: 820px;
  }
  .proj-lb-info-section {
    width: 320px;
  }
}

/* ──────────────────────────────────────────────────────────────
   INDICATEUR "SCROLL ↓" PENDANT LES VIDÉOS 5 / 7 / 9
   Positionné au 1/5 inférieur de l'écran.
   Apparaît 5s après le lancement d'une vidéo scroll.
   Disparaît automatiquement dès la transition vers l'image suivante.
   ────────────────────────────────────────────────────────────── */
.video-scroll-hint {
  position: absolute;
  bottom: 95px;          /* Positionné idéalement au milieu entre le bas de l'info-card et le haut du ruban site-nav */
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  color: #111111;
  /* Fond blanc arrondi type "pastille" pour rester lisible même sur une
     vidéo/image sombre en arrière-plan */
  background: rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  padding: 10px 22px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

.video-scroll-hint.visible {
  opacity: 1;
}

.video-scroll-hint__text {
  font-family: var(--font-heading);
  font-size: var(--fs-85);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #111111;
}

.video-scroll-hint__arrow {
  width: 28px;
  height: 28px;
  color: #111111;
  /* Animation de rebond vers le bas */
  animation: scroll-hint-bounce 1.4s ease-in-out infinite;
}

@keyframes scroll-hint-bounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%       { transform: translateY(6px); opacity: 0.6; }
}

/* Main/doigt "swipe" — masquée par défaut, seule la version desktop
   (texte + flèche) est visible tant qu'on n'est pas sous 768px */
.video-scroll-hint__hand {
  display: none;
  width: 34px;
  height: 30px;
  color: #111111;
}

/* Glisse de bas en haut (comme un doigt qui fait défiler l'écran vers
   le bas — le vrai geste "swipe up" sur téléphone) */
@keyframes scroll-hint-swipe {
  0%   { transform: translateY(12px); opacity: 0; }
  20%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(-12px); opacity: 0; }
}

@media (max-width: 768px) {
  .video-scroll-hint {
    bottom: 75px;
    padding: 12px 16px;
  }

  /* Sur téléphone : pas de texte, juste la main qui glisse de bas en
     haut pour indiquer qu'il faut faire défiler avec le doigt */
  .video-scroll-hint__text {
    display: none;
  }
  .video-scroll-hint__arrow {
    display: none;
  }
  .video-scroll-hint__hand {
    display: block;
    animation: scroll-hint-swipe 1.4s ease-in-out infinite;
  }
}

/* ──────────────────────────────────────────────────────────────
   BARRE D'ÉTAPES VERTICALE (DROITE)
   Image 0 (Intro), Image 4 (Qui), Image 6 (Portes), Image 8 (Expertise),
   Image 10 (Bureau), Image 14 (Contact)
   ────────────────────────────────────────────────────────────── */
.step-nav {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 80;
  pointer-events: auto;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.step-nav.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(20px);
}

.step-nav__list {
  list-style: none;
  margin: 0;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid #111111;
  border-radius: 30px;
  box-shadow: 3px 3px 0px rgba(17, 17, 17, 0.8);
}

.step-nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.step-nav__btn {
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  outline: none;
}

.step-nav__dot {
  width: 24px;
  height: 24px;
  border-radius: 0;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111111;
  opacity: 0.85;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.step-nav__dot svg {
  color: #111111;
}

.step-nav__item.active .step-nav__dot {
  transform: scale(1.3);
  opacity: 1;
}

.step-nav__btn:hover .step-nav__dot {
  transform: scale(1.18);
  opacity: 1;
}

.step-nav__label {
  position: absolute;
  right: 32px;
  white-space: nowrap;
  background: #111111;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: var(--fs-75);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
}

.step-nav__btn:hover .step-nav__label,
.step-nav__item.active .step-nav__label {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 768px) {
  .step-nav {
    right: 8px;
  }
  .step-nav__list {
    padding: 6px 4px;
    gap: 10px;
    border-width: 1.5px;
  }
  .step-nav__dot {
    width: 19px;
    height: 19px;
    font-size: 13px;
  }
  .step-nav__label {
    display: none;
  }
}