/*
 * pillars/cartes — porte depuis la maquette Astro de Chez Loeli. Engagement 5 : aucun hexadecimal.
 */
.ivy-pillars--cartes { padding-block: clamp( 72px, 9vw, 120px ); background-color: var( --ivy-surface ); background-image: var( --ivy-grain, none ); color: var( --ivy-ink ); }
.ivy-pillars--cartes .ivy-pillars__inner { width: min( 100% - 2 * clamp( 20px, 5vw, 56px ), 1200px ); margin-inline: auto; }
.ivy-pillars--cartes .ivy-pillars__header { display: grid; gap: 16px; margin-block-end: clamp( 32px, 5vw, 56px ); }
.ivy-pillars--cartes .ivy-pillars__eyebrow { margin: 0; color: var( --ivy-eyebrow-color, var( --ivy-ink ) ); font-size: var( --ivy-font-label ); font-weight: 600; line-height: 1.6; letter-spacing: .2em; text-transform: uppercase; }
.ivy-pillars--cartes .ivy-pillars__eyebrow::before { content: ''; display: inline-block; width: 24px; height: 11px; margin-inline-end: 12px; vertical-align: -1px; background: var( --ivy-support ); -webkit-mask: var( --ivy-roof-mask ) center / contain no-repeat; mask: var( --ivy-roof-mask ) center / contain no-repeat; }
.ivy-pillars--cartes.ivy-pillars--head-stacked .ivy-pillars__header { justify-items: center; text-align: center; }
.ivy-pillars--cartes.ivy-pillars--head-stacked .ivy-pillars__eyebrow::before { display: none; }
.ivy-pillars--cartes .ivy-pillars__title { margin: 0; color: var( --ivy-title-color, var( --ivy-ink ) ); }
.ivy-pillars--cartes .ivy-pillars__list { display: grid; gap: clamp( 20px, 3vw, 40px ); margin: 0; margin-block-end: 1em; padding: 0; padding-inline-start: 40px; list-style: none; } /* le retrait de liste de la maquette : la grille y est 40 px plus etroite */
@media ( min-width: 720px ) { .ivy-pillars--cartes.ivy-pillars--per-3 .ivy-pillars__list { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); } .ivy-pillars--cartes.ivy-pillars--per-2 .ivy-pillars__list, .ivy-pillars--cartes.ivy-pillars--per-4 .ivy-pillars__list { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } }
@media ( min-width: 1020px ) { .ivy-pillars--cartes.ivy-pillars--per-4 .ivy-pillars__list { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); } }
.ivy-pillars--cartes .ivy-pillars__item { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: clamp( 22px, 3vw, 34px ); border: 1px solid var( --ivy-line-soft ); border-radius: var( --ivy-radius-surface, 18px ); background-color: var( --ivy-item-background-color, var( --ivy-print-paper, var( --ivy-surface ) ) ); }
.ivy-pillars--cartes .ivy-pillars__icon { display: block; width: var( --ivy-item_icon-size, 34px ); height: var( --ivy-item_icon-size, 34px ); color: var( --ivy-item_icon-color, var( --ivy-ink ) ); }
.ivy-pillars--cartes .ivy-pillars__icon :is( svg, i ) { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ivy-pillars--cartes .ivy-pillars__item-title { margin: 0; color: var( --ivy-item_title-color, var( --ivy-ink ) ); }
.ivy-pillars--cartes .ivy-pillars__item-text { margin: 0; color: var( --ivy-item_text-color, var( --ivy-muted ) ); font-size: var( --ivy-font-body ); }

/* Un mot en `{{ }}` dans ce titre : la maquette le pose en <span class="script">, qui n'y change ni la police ni la couleur mais coupe l'espacement des lettres. */
.ivy-pillars--cartes .ivy-hl { color: inherit; letter-spacing: 0; }