/* ================================================================
   PONT PERSO — teaser « Personal work » sur la home pro
   ================================================================
   Remplace l'ancien placeholder « coming soon ». Un bandeau sombre
   cliquable qui préfigure l'autre monde (fond noir chaud + lime,
   vidéo du hero perso en fond) : le yin qui apparaît dans le yang.
   Le clic déclenche la bascule (data-bascule="perso").
   ================================================================ */

.pont-perso {
  position: relative;
}

.pont-perso__lien {
  position: relative;
  display: block;
  width: 100%;
  height: 78vh;
  min-height: 480px;
  overflow: hidden;

  background-color: #0B0A09;      /* le fond de la page perso */
  color: #F4F0EA;
  text-decoration: none;
}

.pont-perso__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.6;                    /* tamisée : c'est un aperçu, pas la destination */
  transform: scale(1.001);
  transition: opacity 0.8s var(--ease-doux), transform 1.2s var(--ease-doux);
}

.pont-perso__lien:hover .pont-perso__video {
  opacity: 0.85;
  transform: scale(1.03);
}

.pont-perso__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      rgba(11, 10, 9, 0.55) 0%,
      rgba(11, 10, 9, 0.15) 40%,
      rgba(11, 10, 9, 0.75) 100%
    );
}

.pont-perso__contenu {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: var(--espace-l) var(--padding-cote);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--espace-m);
}

.pont-perso__label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: var(--taille-xs);
  letter-spacing: 0.01em;
  text-transform: none;
  color: #B7FF1A;                  /* le lime du monde perso, en avant-goût */
  display: flex;
  align-items: center;
  gap: var(--espace-s);
}
.pont-perso__label::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background-color: #B7FF1A;
}

.pont-perso__titre {
  font-family: var(--typo-titre);
  font-weight: 700;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
  font-size: clamp(48px, 7vw, 120px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin: 0;
  color: #F4F0EA;
}
.pont-perso__titre em {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1, 'wght' 700;
  color: #B7FF1A;
}

.pont-perso__texte {
  font-family: var(--typo-corps);
  font-size: var(--taille-m);
  line-height: 1.5;
  max-width: 560px;
  margin: 0;
  color: rgba(244, 240, 234, 0.8);
}

/* Faux bouton (le lien englobe tout le bandeau) */
.pont-perso__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border: 1px solid rgba(183, 255, 26, 0.6);
  border-radius: 999px;

  font-family: var(--typo-corps);
  font-size: var(--taille-xs);
  font-variation-settings: 'wght' 600, 'wdth' 100;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #B7FF1A;

  transition:
    background-color var(--duree-courte) var(--ease-doux),
    color var(--duree-courte) var(--ease-doux);
}

.pont-perso__lien:hover .pont-perso__cta {
  background-color: #B7FF1A;
  color: #0B0A09;
}

.pont-perso__cta-fleche {
  transition: transform var(--duree-courte) var(--ease-doux);
}
.pont-perso__lien:hover .pont-perso__cta-fleche {
  transform: translateX(4px);
}

@media (max-width: 640px) {
  .pont-perso__lien {
    height: 64vh;
    min-height: 420px;
  }
}