/* ===================================================================
   MARY FLEUREAU — Page « Par ici » (liens, bio Instagram)
   À charger APRÈS styles.css. Page autonome (sans navbar/footer).
   Reprend la structure de l'ancienne page : bannière, réseaux,
   sections à flèches, boutons, embed Cabane, logo.
   =================================================================== */

.linktree {
  position: relative; z-index: 1;
  max-width: 540px; margin-inline: auto;
  padding: clamp(1.4rem, 6vw, 2.6rem) var(--pad) clamp(2.5rem, 8vw, 4rem);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem;
}

/* Lueur d'ambiance */
.linktree::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(55% 40% at 50% 14%,
    rgba(246,201,69,.18) 0%, rgba(216,58,44,.05) 42%, transparent 70%);
}

/* Bannière */
.lt-hero { width: 100%; }
.lt-hero img { width: 100%; height: auto; border-radius: var(--radius); display: block; }

/* Réseaux (icônes) */
.lt-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: .2rem; }
.lt-socials a { display: inline-flex; opacity: .9; transition: opacity .2s ease, transform .2s ease; }
.lt-socials a:hover { opacity: 1; transform: translateY(-2px); }
.lt-socials img { width: 34px; height: 34px; display: block; }

/* Titres de section (↓ … ↓) */
.lt-title {
  font-family: var(--title); text-transform: uppercase; color: var(--bone);
  font-size: var(--fs-h3); letter-spacing: .04em; line-height: 1.15; margin-top: 1.3rem;
}
.lt-sub {
  font-family: var(--display); letter-spacing: .1em; text-transform: uppercase;
  color: var(--bone-dim); font-size: var(--fs-small); margin-top: -.3rem;
}

/* Boutons */
.lt-links { width: 100%; display: flex; flex-direction: column; gap: .7rem; margin-top: .2rem; }
.lt-btn {
  display: flex; align-items: center; justify-content: center; gap: .5em;
  width: 100%; padding: .95em 1.2em; border-radius: var(--radius);
  border: 2px solid var(--ember); color: var(--ember); background: transparent;
  font-family: var(--display); letter-spacing: .1em; text-transform: uppercase;
  font-size: clamp(.82rem, .78rem + .3vw, .98rem);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
}
.lt-btn:hover { background: rgba(246,201,69,.08); box-shadow: 0 0 22px rgba(246,201,69,.25); transform: translateY(-2px); }

/* Embed Cabane */
.lt-embed { width: 100%; display: flex; justify-content: center; }
.lt-embed iframe {
  width: 100%; max-width: 480px; height: 480px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--ember);
}

/* Séparateur */
.lt-sep { width: 60%; border: none; border-top: 1px solid var(--line); margin: .8rem auto .2rem; }

/* Logo bas de page */
.lt-logo { width: clamp(120px, 32vw, 168px); height: auto; margin-top: 1.6rem; opacity: .92; }

@media (prefers-reduced-motion: reduce) { .lt-btn:hover, .lt-socials a:hover { transform: none; } }