/*
 * steps/methode — transposition de `.methode`, `.etape` (maquette Les Jolies Clés) : titre collé à gauche (4fr),
 * quatre carrés en 2 x 2 à droite (7fr), filet doré en haut de chaque carré, bouton et mention centrés sous la grille.
 * Engagement 5 : aucun hexadécimal, valeurs de repli comprises.
 */
.ivy-steps--methode { padding: clamp( 88px, 10vw, 144px ) max( clamp( 20px, 5vw, 64px ), calc( ( 100% - 1240px ) / 2 ) ); }
.ivy-steps--methode .ivy-steps__inner { display: grid; grid-template-columns: 4fr 7fr; column-gap: clamp( 40px, 6vw, 96px ); align-items: start; }
.ivy-steps--methode .ivy-steps__header { position: sticky; top: calc( var( --ivy-navbar-h, 88px ) + 48px ); }
.ivy-steps--methode .ivy-steps__eyebrow { display: block; margin-bottom: 18px; color: var( --ivy-eyebrow-color, var( --ivy-gold-text, rgb( 138 106 51 ) ) ); font-size: var( --ivy-font-label ); font-weight: 600; line-height: 1.6; letter-spacing: .22em; text-transform: uppercase; }
.ivy-steps--methode .ivy-steps__title { margin: 0; color: var( --ivy-title-color, var( --ivy-ink, rgb( 58 50 38 ) ) ); line-height: 1.15; }
.ivy-steps--methode .ivy-steps__list { display: grid; grid-template-columns: 1fr 1fr; gap: clamp( 14px, 1.6vw, 22px ); margin: 0; padding: 0; list-style: none; }
.ivy-steps--methode .ivy-steps__item { position: relative; display: flex; flex-direction: column; aspect-ratio: 1; padding: clamp( 24px, 2.6vw, 38px ); overflow: hidden; background: var( --ivy-item-background-color, var( --ivy-surface, rgb( 251 248 242 ) ) ); border-radius: var( --ivy-radius-surface, 4px ); }
.ivy-steps--methode .ivy-steps__item::before { content: ''; position: absolute; left: 0; top: 0; inline-size: 100%; block-size: 2px; background: var( --ivy-accent, rgb( 184 151 90 ) ); }
.ivy-steps--methode .ivy-steps__number { font-family: var( --ivy-font-titre, inherit ); line-height: 1; color: var( --ivy-item_number-color, var( --ivy-accent, rgb( 184 151 90 ) ) ); font-variant-numeric: lining-nums; }
.ivy-steps--methode .ivy-steps__item-body { margin-top: auto; }
.ivy-steps--methode .ivy-steps__item-title { margin: 0; color: var( --ivy-item_title-color, var( --ivy-ink, rgb( 58 50 38 ) ) ); font-weight: 600; line-height: 1.25; }
.ivy-steps--methode .ivy-steps__item-text { margin: 10px 0 0; color: var( --ivy-item_text-color, var( --ivy-muted, rgb( 107 98 82 ) ) ); line-height: 1.6; }
.ivy-steps--methode .ivy-steps__actions { grid-column: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 48px; text-align: center; }
.ivy-steps--methode .ivy-steps__note { margin: 0; color: var( --ivy-note-color, var( --ivy-muted, rgb( 107 98 82 ) ) ); line-height: 1.6; }
:where( .ivy-steps--methode ) .ivy-steps__cta { color: var( --ivy-cta-color, var( --ivy-on-accent, rgb( 37 29 23 ) ) ); background: var( --ivy-cta-background-color, var( --ivy-accent, rgb( 184 151 90 ) ) ); 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 ), filter 250ms cubic-bezier( .2, .7, .2, 1 ); }
:where( .ivy-steps--methode ) .ivy-steps__cta:hover { filter: brightness( .92 ); }
:where( .ivy-steps--methode ) .ivy-steps__cta:focus-visible { outline: 2px solid currentcolor; outline-offset: 3px; }
@media ( max-width: 1099px ) { .ivy-steps--methode .ivy-steps__item { aspect-ratio: auto; min-block-size: 300px; } }
@media ( max-width: 899px ) {
	.ivy-steps--methode .ivy-steps__inner { grid-template-columns: minmax( 0, 1fr ); row-gap: clamp( 40px, 6vw, 96px ); }
	.ivy-steps--methode .ivy-steps__header { position: static; }
	.ivy-steps--methode .ivy-steps__actions { grid-column: 1; margin-top: calc( 48px - clamp( 40px, 6vw, 96px ) ); }
}
@media ( max-width: 599px ) {
	.ivy-steps--methode .ivy-steps__list { grid-template-columns: minmax( 0, 1fr ); }
	.ivy-steps--methode .ivy-steps__item { min-block-size: 0; }
	.ivy-steps--methode .ivy-steps__item-body { margin-top: 28px; }
	.ivy-steps--methode .ivy-steps__actions { align-items: stretch; }
	.ivy-steps--methode .ivy-steps__cta { inline-size: 100%; }
}