/* ==========================================================
   Personnage citant — V3
   Pas de cadre. Personnage collé au bord du footer (léger
   chevauchement pour fondre l'ombre portée dans le fond sombre
   du footer). Texte aligné en bas également, hauteur libre
   (jamais plus haute que le personnage, sans dépasser dessus).
   ========================================================== */

.personnage-citant {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  gap: 1.3rem;
  max-width: 980px;
  margin: 3rem auto 0;
  padding: 0 1.5rem;
  margin-bottom: -30px;
}

/* --- Personnage : détouré, ombre portée qui suit la silhouette --- */
.personnage-citant__image {
  flex: 0 0 auto;
  height: clamp(252px, 31.5vw, 441px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;

  opacity: 0;
  transform: translateX(18%);
}
.personnage-citant__image img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 15px rgba(36, 28, 23, .4));
}

.personnage-citant.is-visible .personnage-citant__image {
  animation: pc-surgir-droite .8s cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes pc-surgir-droite {
  from { opacity: 0; transform: translateX(18%); }
  to   { opacity: 1; transform: translateX(0); }
}

/* --- Texte : hauteur libre (jamais plus que le personnage), aligné en bas --- */
.personnage-citant__contenu {
  flex: 1 1 auto;
  min-width: 0;
  height: clamp(252px, 31.5vw, 441px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .5rem;
  overflow: hidden;

  opacity: 0;
  transform: translateX(-8%);
}

.personnage-citant.is-visible .personnage-citant__contenu {
  animation: pc-surgir-gauche .8s cubic-bezier(.16, 1, .3, 1) .18s forwards;
}

@keyframes pc-surgir-gauche {
  from { opacity: 0; transform: translateX(-8%); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .personnage-citant__image,
  .personnage-citant__contenu {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

.personnage-citant__citation {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: clamp(1rem, 1.8vw, 1.45rem);
  line-height: 1.35;
  color: #6B5A4E;
  margin: 0;
}
.personnage-citant__guillemet {
  color: #7ECAC5;
}

.personnage-citant__auteur {
  margin: 0;
  font-size: .75rem;
  font-weight: 600;
  color: var(--brun, #241C17);
}

.personnage-citant__source {
  margin: 0;
  font-size: .68rem;
}
.personnage-citant__source a {
  color: #8a7f75;
  text-decoration: none;
  border-bottom: 1px dotted #c9beb2;
}
.personnage-citant__source a:hover {
  color: var(--terracotta, #C1694F);
  border-color: var(--terracotta, #C1694F);
}

@media (max-width: 780px) {
  .personnage-citant {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
    padding: 0 1.2rem;
  }
  .personnage-citant__image,
  .personnage-citant__contenu {
    height: auto;
    max-height: none;
  }
  .personnage-citant__image {
    align-self: center;
    transform: translateY(14%);
  }
  .personnage-citant.is-visible .personnage-citant__image {
    animation-name: pc-surgir-bas;
  }
  .personnage-citant__contenu {
    transform: translateY(10%);
    align-items: center;
  }
  .personnage-citant.is-visible .personnage-citant__contenu {
    animation-name: pc-surgir-bas;
  }
  @keyframes pc-surgir-bas {
    from { opacity: 0; transform: translateY(14%); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .personnage-citant__image img {
    height: 160px;
  }
}