/* ============================================================
   rs1/avatar-text — portrait + texte (citation, vision)
   Fond brume par défaut ; blanc quand le bloc suit rs1/text-counters
   (qui est brume) pour garder l'alternance des fonds.
   ============================================================ */

.mp-at{
  padding-block: var(--mp-section-sm);
  background: var(--mp-bleu-brume);
}
.mp-tc + .mp-at{ background: var(--mp-blanc) }

.mp-at__grille{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}

/* ── Personne ────────────────────────────────────────────── */
.mp-at__personne{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mp-at__portrait{
  width: 8rem;
  aspect-ratio: 1;
  overflow: hidden;
  border: 4px solid var(--mp-blanc);
  border-radius: var(--mp-r-pill);
  background: var(--mp-bleu-voile);
  box-shadow: var(--mp-sh-1);
}
.mp-at__portrait img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

.mp-at__nom{
  margin: 1.1rem 0 0;
  font-family: var(--mp-font-titre);
  font-size: var(--mp-t-lg);
  font-weight: 800;
  line-height: var(--mp-lh-titre);
  letter-spacing: var(--mp-ls-titre);
  color: var(--mp-encre);
}

.mp-at__fonction{
  margin: .3rem 0 0;
  font-size: var(--mp-t-sm);
  color: var(--mp-gris);
}

/* ── Texte ───────────────────────────────────────────────── */
.mp-at__contenu{
  position: relative;
  isolation: isolate;
  max-width: 68ch;
}
.mp-at--personne .mp-at__contenu{ padding-top: 1.75rem }

/* Guillemet décoratif, derrière le titre */
.mp-at__guillemet{
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: clamp(4rem, 7vw, 6rem);
  height: auto;
  color: var(--mp-trait);
}
.mp-tc + .mp-at .mp-at__guillemet{ color: var(--mp-bleu-voile) }

.mp-at__titre{
  margin: 0 0 1.1rem;
  font-size: var(--mp-t-h2);
  font-weight: 800;
  color: var(--mp-encre);
}

.mp-at__texte{
  font-size: var(--mp-t-base);
  color: var(--mp-texte);
}
.mp-at__texte > :last-child{ margin-bottom: 0 }

@media (min-width: 961px){
  .mp-at--personne .mp-at__grille{
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }
  .mp-at__portrait{ width: 11rem }
  .mp-at__guillemet{ top: -.5rem; left: -1.25rem }
}

/* ── Fond imposé (attribut « fond ») ─────────────────────────
   Double classe : l'emporte sur l'alternance .mp-tc + .mp-at.   */
.mp-at.mp-at--fond-blanc{ background: var(--mp-blanc) }
.mp-at.mp-at--fond-brume{ background: var(--mp-bleu-brume) }

/* ── Présentation « portrait » : mot de dirigeant ────────────
   Photo en cadre arrondi, décalée sur un aplat turquoise voile ;
   citation en exergue signée. Mobile : photo au-dessus du texte,
   jamais sous 17rem de large (pas de vignette).                 */
.mp-at--portrait .mp-at__grille{ align-items: center }

.mp-at__visuel{
  display: flex;
  justify-content: center;
}
.mp-at__cadre{
  position: relative;
  width: min(100%, 17rem);
}
.mp-at__cadre::before{
  content: "";
  position: absolute;
  inset: 1rem -1rem -1rem 1rem;
  border-radius: var(--mp-r);
  background: var(--mp-turquoise-voile);
}
.mp-at--photo-droite .mp-at__cadre::before{ inset: 1rem 1rem -1rem -1rem }

.mp-at__photo{
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--mp-r);
  background: var(--mp-bleu-voile);
  box-shadow: var(--mp-sh-2);
}
.mp-at__photo img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

.mp-at--portrait .mp-at__contenu{
  max-width: 62ch;
  padding-top: 0;
}

.mp-at__citation{
  position: relative;
  margin: 0;
  padding-top: clamp(2.5rem, 4vw, 3rem);
}
/* Double classe : l'emporte sur .mp-tc + .mp-at .mp-at__guillemet (bleu voile) */
.mp-at.mp-at--portrait .mp-at__guillemet{
  top: 0;
  left: 0;
  z-index: 0;
  width: clamp(2.5rem, 3.5vw, 3rem);
  color: var(--mp-turquoise);
}
.mp-at__citation blockquote{
  margin: 0;
  padding: 0;
  border: 0;
  font-style: normal;
  quotes: none;
}
.mp-at--portrait .mp-at__texte{
  font-size: var(--mp-t-lg);
  line-height: var(--mp-lh-texte);
  color: var(--mp-encre);
}

.mp-at__signature{
  display: flex;
  flex-direction: column;
  gap: .2rem;
  margin-top: 1.6rem;
  padding-left: 1rem;
  border-left: 3px solid var(--mp-turquoise);
}
.mp-at__signature .mp-at__nom,
.mp-at__signature .mp-at__fonction{ margin: 0 }

@media (max-width: 960px){
  .mp-at--portrait .mp-at__visuel{ margin-bottom: 1rem }
  /* Même axe que la photo centrée au-dessus */
  .mp-at--portrait .mp-at__contenu{ margin-inline: auto }
}

@media (min-width: 961px){
  .mp-at--portrait .mp-at__grille{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
    gap: clamp(3rem, 6vw, 5.5rem);
  }
  .mp-at--photo-droite .mp-at__grille{ grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) }
  .mp-at--photo-droite .mp-at__visuel{ order: 2 }
}

/* ── Portrait « grande photo » : équilibre photo / texte ─────
   Photo HD agrandie, colonne de texte resserrée. Jusqu'à 960px :
   photo au-dessus du texte, 22rem de large (jamais une vignette). */
.mp-at--photo-grande .mp-at__cadre{ width: min(100%, 22rem) }

@media (min-width: 961px){
  .mp-at.mp-at--photo-grande .mp-at__grille{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) }
  .mp-at.mp-at--photo-grande.mp-at--photo-droite .mp-at__grille{ grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) }
  .mp-at--photo-grande .mp-at__cadre{ width: min(100%, 26rem) }
  .mp-at--photo-grande .mp-at__contenu{ max-width: 54ch }
}