/* =============================================================================
   COMPOSANTS — boutons, liens, médias, animations d'apparition
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--cream);
  background: var(--bordeaux);
  border: 1.5px solid var(--bordeaux);
  border-radius: 100px;
  cursor: pointer;
  transition: var(--transition);
}

.btn:hover {
  background: var(--bordeaux-dark);
}

.btn--ghost {
  color: var(--bordeaux);
  background: transparent;
}

.btn--ghost:hover {
  color: var(--cream);
  background: var(--bordeaux);
}

/* Variante posée sur fond bordeaux */
.btn--light {
  color: var(--bordeaux);
  background: var(--cream);
  border-color: var(--cream);
}

.btn--light:hover {
  color: var(--cream);
  background: transparent;
  border-color: var(--cream);
}

/* Lien texte souligné d'un filet doré */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 2px;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--bordeaux);
  border-bottom: 1px solid var(--gold);
}

/* Flèche animée, commune aux boutons et aux liens */
.arrow {
  transition: transform var(--transition);
}

.btn:hover .arrow,
.text-link:hover .arrow {
  transform: translateX(3px);
}

/* -----------------------------------------------------------------------------
   Médias
   Remplacer le `background` par : url("../img/ma-photo.jpg") center / cover;
   -------------------------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--cream-deep), #dcc7a6);
}

/* Texture appliquée par-dessus l'image */
.media::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.3;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
}

/* Déclinaisons chromatiques */
.media--terracotta {
  background: linear-gradient(160deg, #caa98a, #8a5a45);
}

.media--sage {
  background: linear-gradient(160deg, #a9b39d, #5f7b78);
}

/* Photo réelle : le dégradé du parent sert de fond pendant le chargement */
.media__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Point de focus du recadrage, à choisir selon la photo */
.media__img--left {
  object-position: 25% 50%;
}

.media__img--right {
  object-position: 75% 50%;
}

.media__img--top {
  object-position: 50% 25%;
}

/* Le grain est atténué sur les photos pour ne pas les ternir */
.media--photo::after {
  opacity: 0.12;
}

/* Pictogramme décoratif centré, visible tant qu'aucune photo n'est posée */
.media__motif {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
}

.media__motif--soft {
  opacity: 0.4;
}

.media__motif svg {
  width: 44%;
  height: auto;
}

/* -----------------------------------------------------------------------------
   Apparition au scroll (classe `is-visible` ajoutée par assets/js/main.js)
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s ease,
    transform 0.8s var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal--delay-1 {
  transition-delay: 0.07s;
}

.reveal--delay-2 {
  transition-delay: 0.14s;
}

.reveal--delay-3 {
  transition-delay: 0.21s;
}