/*
 * intro/portrait-citation — transposition de `.lp-personne` (maquette Les Jolies Clés, landings) : portrait 4/5 collé (5fr)
 * dans un fin cadre doré décalé, à droite la phrase en grand sous un filet doré, puis nom, rôle, texte, engagement et
 * bouton contour (6fr). Engagement 5 : aucun hexadécimal, valeurs de repli comprises.
 */
.ivy-intro--portrait-citation { padding: clamp( 88px, 10vw, 144px ) max( clamp( 20px, 5vw, 64px ), calc( ( 100% - 1240px ) / 2 ) ); }
.ivy-intro--portrait-citation .ivy-intro__inner { display: grid; grid-template-columns: 5fr 6fr; gap: clamp( 48px, 8vw, 128px ); align-items: start; }
.ivy-intro--portrait-citation .ivy-intro__media { position: sticky; top: calc( var( --ivy-navbar-h, 88px ) + 40px ); isolation: isolate; margin: 0; padding-left: 18px; }
.ivy-intro--portrait-citation .ivy-intro__media::before { content: ''; position: absolute; inset: -18px 18px 18px 0; z-index: -1; border: 1px solid var( --ivy-media-border-color, var( --ivy-accent, rgb( 184 151 90 ) ) ); border-radius: var( --ivy-radius-surface, 4px ); }
.ivy-intro--portrait-citation .ivy-intro__photo { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var( --ivy-radius-surface, 4px ); background: var( --ivy-surface-sunk, rgb( 238 230 216 ) ); }
.ivy-intro--portrait-citation .ivy-intro__photo img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var( --ivy-intro-focus, 50% 50% ); }
.ivy-intro--portrait-citation.ivy-intro--focus-top .ivy-intro__photo img { --ivy-intro-focus: 50% 0%; }
.ivy-intro--portrait-citation.ivy-intro--focus-bottom .ivy-intro__photo img { --ivy-intro-focus: 50% 100%; }
.ivy-intro--portrait-citation .ivy-intro__quote { margin: 0; padding-left: clamp( 20px, 3vw, 40px ); border-left: 2px solid var( --ivy-quote-border-color, var( --ivy-accent, rgb( 184 151 90 ) ) ); }
.ivy-intro--portrait-citation .ivy-intro__quote p { margin: 0; color: var( --ivy-quote-color, var( --ivy-ink, rgb( 58 50 38 ) ) ); font-family: var( --ivy-font-titre, inherit ); font-size: var( --ivy-font-h2 ); line-height: 1.25; }
.ivy-intro--portrait-citation .ivy-intro__quote + .ivy-intro__body { margin-top: clamp( 32px, 4vw, 56px ); }
.ivy-intro--portrait-citation .ivy-intro__title { margin: 0; color: var( --ivy-title-color, var( --ivy-ink, rgb( 58 50 38 ) ) ); font-weight: 600; line-height: 1.25; }
.ivy-intro--portrait-citation .ivy-intro__caption { margin: 6px 0 20px; color: var( --ivy-caption-color, var( --ivy-gold-text, rgb( 138 106 51 ) ) ); font-size: var( --ivy-font-label ); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ivy-intro--portrait-citation .ivy-intro__text { color: var( --ivy-text-color, var( --ivy-muted, rgb( 107 98 82 ) ) ); }
.ivy-intro--portrait-citation .ivy-intro__text p { margin: 0; font-size: inherit; line-height: 1.6; }
.ivy-intro--portrait-citation .ivy-intro__text p + p,
.ivy-intro--portrait-citation .ivy-intro__text + .ivy-intro__note { margin-top: 1em; }
.ivy-intro--portrait-citation .ivy-intro__note { margin: 0; color: var( --ivy-note-color, var( --ivy-gold-text, rgb( 138 106 51 ) ) ); font-family: var( --ivy-font-titre, inherit ); line-height: 1.6; }
.ivy-intro--portrait-citation .ivy-intro__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }
:where( .ivy-intro--portrait-citation ) .ivy-intro__cta { color: var( --ivy-cta-color, var( --ivy-ink, rgb( 58 50 38 ) ) ); background: var( --ivy-cta-background-color, transparent ); border: 1px solid var( --ivy-cta-border-color, var( --ivy-accent, rgb( 184 151 90 ) ) ); display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; transition: background-color 250ms cubic-bezier( .2, .7, .2, 1 ); }
	:where( .ivy-intro--portrait-citation ) .ivy-intro__cta--secondary { color: var( --ivy-cta_secondary-color, var( --ivy-ink, rgb( 58 50 38 ) ) ); background: var( --ivy-cta_secondary-background-color, transparent ); border: 1px solid var( --ivy-cta_secondary-border-color, var( --ivy-accent, rgb( 184 151 90 ) ) ); }
@media ( hover: hover ) and ( pointer: fine ) { :where( .ivy-intro--portrait-citation ) .ivy-intro__cta:hover { background: rgb( 184 151 90 / 16% ); } }
:where( .ivy-intro--portrait-citation ) .ivy-intro__cta:focus-visible { outline: 2px solid currentcolor; outline-offset: 3px; }
@media ( max-width: 899px ) {
	.ivy-intro--portrait-citation .ivy-intro__inner { grid-template-columns: minmax( 0, 1fr ); }
	.ivy-intro--portrait-citation .ivy-intro__media { position: static; max-inline-size: 460px; }
}