/* ==========================================================
   06 — CONTACT
   Maquette Figma : 06_CONTACT (partie visible : 1440 × 518 px)
   ========================================================== */

.contact {
  aspect-ratio: 1440 / 518;
  --hauteur: 518;
  background-color: var(--creme);
}

/* ---------- Décor ---------- */

/* Fondu vert olive → crème, d'un bord de l'écran à l'autre.
   Il part exactement du vert du bas de « Mes projets » (même couleur, même opacité,
   posée sur le même crème) et s'efface en douceur avant le titre.
   Il reste entièrement sous « Mes projets » : rien ne passe sur les cartes. */
.contact__fondu {
  left: 0;
  width: 100%;
  background-image: linear-gradient(
    to bottom,
    rgba(56, 71, 31, 0.92) 0%,
    rgba(56, 71, 31, 0.84) 10%,
    rgba(56, 71, 31, 0.66) 25%,
    rgba(56, 71, 31, 0.47) 40%,
    rgba(56, 71, 31, 0.3) 55%,
    rgba(56, 71, 31, 0.16) 70%,
    rgba(56, 71, 31, 0.06) 85%,
    rgba(56, 71, 31, 0) 100%
  );
}

/* La feuille de bananier reste accrochée au bord droit de l'écran */
.contact__feuille {
  left: calc(2 * var(--marge) + var(--x) * var(--u));
}

.contact__feuille {
  max-width: none;
  opacity: 0.79;
  pointer-events: none;
}

/* Brise tropicale : l'image pivote autour de la base des tiges (en bas à gauche).
   Deux mouvements de durées différentes se combinent, le balancement ne se répète jamais à l'identique.
   js/interactions.js met l'animation en pause quand la section n'est pas visible. */
.contact__feuille {
  transform-origin: 18% 100%;
  animation:
    contact-brise-rotation 9s ease-in-out infinite,
    contact-brise-balancement 6.5s ease-in-out -2s infinite;
}

.contact[data-brise="pause"] .contact__feuille {
  animation-play-state: paused;
}

@keyframes contact-brise-rotation {
  0%, 100% { rotate: 0deg; }
  30% { rotate: 1.6deg; }
  55% { rotate: -0.6deg; }
  80% { rotate: 1deg; }
}

@keyframes contact-brise-balancement {
  0%, 100% { translate: 0 0; }
  40% { translate: calc(3 * var(--u)) 0; }
  70% { translate: calc(-2 * var(--u)) 0; }
}

@media (prefers-reduced-motion: reduce) {
  .contact__feuille {
    animation: none;
  }
}

/* ---------- Titre « Me contacter » ---------- */

.contact__titre {
  margin: 0;
  color: var(--marron);
  font-family: var(--police-titre-gras);
  font-size: calc(128 * var(--u));
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
}

/* ---------- Liens de contact ---------- */

.contact__liens {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Les éléments sont placés directement dans la section (positions Figma) */
.contact__lien {
  display: contents;
}

/* Le logo garde son apparence : au survol, il se soulève et grandit légèrement */
.contact__icone {
  display: block;
  border-radius: calc(16 * var(--u));
  transition: transform 0.25s ease;
}

.contact__icone img {
  width: 100%;
  height: 100%;
}

.contact__icone:hover,
.contact__icone:focus-visible {
  transform: translateY(calc(-4 * var(--u))) scale(1.06);
}

.contact__icone:focus-visible {
  outline: 2px solid var(--vert-olive);
  outline-offset: 4px;
}