/* Citation Block — Style Frontend (Figma 631:1909) */

.wp-block-bloc-th-citation.citation {
  padding: 60px 24px;
}

.citation__inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* ===== Éléments ===== */
.citation__accent {
  margin: 0;
  font-family: var(--font-accent);
  font-size: var(--text-accent);
  font-weight: 400;
  line-height: var(--lh-accent);
  color: #a59687;            /* accent citation Figma (Fantasm 56) */
  text-align: center;
}

.citation__quote {
  margin: 0;
  font-family: var(--font-serif-light);
  font-size: var(--text-h2);
  font-weight: 400;
  line-height: 1.134;
  color: var(--color-text);
  text-align: center;
}

.citation__author {
  font-family: var(--font-condensed);
  font-size: var(--text-sub-s);
  font-weight: 700;
  letter-spacing: var(--ls-sub);
  text-transform: uppercase;
  font-style: normal;
  color: var(--color-warm-gray);
}

.citation__media {
  margin: 0;
  overflow: hidden;
}
.citation__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.citation__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* ===== panel (v6) : panneau beige centré ===== */
.citation--panel .citation__inner {
  background: var(--color-beige);
  padding: 60px;
  max-width: 940px;
}
.citation--panel .citation__body { max-width: 600px; margin: 0 auto; }
.citation--panel .citation__author { color: var(--color-text); }   /* V6 : auteur en noir */

/* ===== panel-image (v4) : accent + panneau beige + image en chevauchement ===== */
.citation--panel-image .citation__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.citation--panel-image .citation__accent { order: -1; }
.citation--panel-image .citation__body {
  position: relative;
  width: 100%;
  max-width: 923px;
  min-height: 271px;
  justify-content: center;
  background: var(--color-beige);
  padding: 73px 58px 73px 311px;
  align-items: center;
  text-align: center;
}
.citation--panel-image .citation__quote,
.citation--panel-image .citation__author { text-align: center; }
.citation--panel-image .citation__media {
  position: absolute;
  left: calc(50% - 461px + 59px);
  top: 0;
  width: 229px;
  height: 301px;
  border: 6px solid #fff;
  z-index: 2;
}

/* ===== image-left (v5) / image-right (v7) : image + citation côte à côte ===== */
.citation--image-left .citation__inner,
.citation--image-right .citation__inner {
  display: flex;
  align-items: center;
}
.citation--image-left .citation__inner { gap: 78px; }                          /* V5 */
.citation--image-right .citation__inner { flex-direction: row-reverse; gap: 92px; }  /* V7 */
.citation--image-left .citation__media,
.citation--image-right .citation__media {
  flex: 0 0 493px;
  max-width: 493px;
  aspect-ratio: 493 / 464;
}
.citation--image-left .citation__body,
.citation--image-right .citation__body { flex: 1 1 auto; }

/* ===== Responsive ===== */
/* Tablette : image-left / image-right s'empilent (texte AVANT image) ;
   panel-image perd le chevauchement (image au-dessus de la citation, centrée) */
@media (max-width: 1024px) {
  .citation--image-left .citation__inner,
  .citation--image-right .citation__inner {
    flex-direction: column;
    gap: 32px;
  }
  /* image-right repassait en row-reverse en desktop : on neutralise */
  .citation--image-right .citation__inner { flex-direction: column; }
  /* L'image est avant la citation dans le DOM → texte en 1er via order */
  .citation--image-left .citation__body,
  .citation--image-right .citation__body { order: -1; }
  .citation--image-left .citation__media,
  .citation--image-right .citation__media {
    flex-basis: auto;
    width: 100%;
    max-width: none;
  }

  /* panel-image : on annule le chevauchement décoratif de l'image */
  .citation--panel-image .citation__inner { gap: 24px; }
  .citation--panel-image .citation__body {
    padding: 48px 32px;
    align-items: center;
    text-align: center;
  }
  .citation--panel-image .citation__quote,
  .citation--panel-image .citation__author { text-align: center; }
  .citation--panel-image .citation__media {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    width: 229px;
    max-width: 60%;
    height: auto;
    aspect-ratio: 229 / 301;
    margin: 0 auto;
  }
}

/* Mobile : empilement complet, réduction des paddings panneau */
@media (max-width: 768px) {
  .wp-block-bloc-th-citation.citation { padding: 48px 20px; }

  .citation--panel .citation__inner { padding: 36px 24px; }

  .citation--panel-image .citation__body { padding: 36px 24px; }
  .citation--panel-image .citation__media { max-width: 70%; }
}

/* Mobile (Figma 1573-17422) : image calée à GAUCHE chevauchant le haut du bandeau,
   texte de la citation aligné à GAUCHE (au lieu de centré). */
@media (max-width: 768px) {
  /* Image + titre CENTRÉS ; citation/auteur/lien alignés à gauche. */
  .citation--panel-image .citation__inner { align-items: center; gap: 20px; }
  .citation--panel-image .citation__accent { text-align: center; align-self: center; }
  .citation--panel-image .citation__media {
    position: relative;
    z-index: 2;
    align-self: center;
    width: auto;
    max-width: 64%;
    height: auto;
    aspect-ratio: 229 / 301;
    margin: 0 0 -100px 0;
  }
  .citation--panel-image .citation__body {
    padding: 124px 28px 36px;
    align-items: flex-start;
    text-align: left;
  }
  .citation--panel-image .citation__quote,
  .citation--panel-image .citation__author { text-align: left; }
  .citation--panel-image .citation__cta { align-self: flex-start; }
}

/* Citation panel-image entièrement cliquable vers l'article (lien plein-carte sous le bouton) */
.citation--panel-image .citation__inner { position: relative; }
.citation--panel-image .citation__link { position: absolute; inset: 0; z-index: 3; }
.citation--panel-image .citation__cta { position: relative; z-index: 4; }