/* services/quinconce — engagement 5 : aucun hexadecimal, replis compris. Le
   REPLI est ecrit d'abord, la requete de media l'enrichit ; `:where()` la ou
   le panneau ecrit la meme propriete en dur. Prose : tests/e2e/quinconce. */
.ivy-services--quinconce{padding:clamp(72px,10vw,150px) clamp(20px,5vw,72px)}
.ivy-services--quinconce .ivy-services__header{max-width:44rem;margin:0 auto clamp(44px,6vw,84px);text-align:center}
.ivy-services--quinconce .ivy-services__eyebrow{display:block;margin-bottom:14px;color:var(--ivy-eyebrow-color,var(--ivy-muted,rgb(110 110 110)));font-size:var(--ivy-font-label);font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.ivy-services--quinconce .ivy-services__title{margin:0;color:var(--ivy-title-color,currentColor);line-height:1.05;letter-spacing:-.03em}
.ivy-services--quinconce .ivy-services__text{max-width:54ch;margin:18px auto 0;color:var(--ivy-text-color,var(--ivy-muted,rgb(110 110 110)));line-height:1.6}
.ivy-services--quinconce .ivy-services__grid{--ivy-gap:clamp(32px,5vw,72px);position:relative;display:grid;align-items:start;column-gap:var(--ivy-gap);row-gap:var(--ivy-row-gap,clamp(40px,5vw,96px));max-width:1360px;margin-inline:auto}
.ivy-services--quinconce .ivy-services__rule{display:none}
.ivy-services--quinconce .ivy-services__item{display:flex;flex-direction:column;overflow:hidden;text-align:center}
.ivy-services--quinconce :where(.ivy-services__item){border-radius:var(--ivy-radius-surface,18px);background:var(--ivy-surface,rgb(255 255 255))}
.ivy-services--quinconce .ivy-services__media{margin:0;aspect-ratio:var(--ivy-services-ratio,16/10)}
.ivy-services--quinconce .ivy-services__media img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.ivy-services--quinconce .ivy-services__copy{padding:clamp(24px,3vw,40px)}
.ivy-services--quinconce .ivy-services__item-title{margin:0;color:var(--ivy-item_title-color,currentColor);line-height:1.1;letter-spacing:-.02em}
.ivy-services--quinconce .ivy-services__item-text{max-width:40ch;margin:14px auto 0;color:var(--ivy-item_text-color,var(--ivy-muted,rgb(110 110 110)));line-height:1.55}
.ivy-services--quinconce .ivy-services__item-cta{display:inline-flex;align-items:center;min-height:44px;margin-top:22px;padding:.7em 1.6em;color:var(--ivy-item_cta-color,var(--ivy-surface,rgb(255 255 255)));font-size:var(--ivy-font-label);font-weight:600;text-decoration:none}
.ivy-services--quinconce :where(.ivy-services__item-cta){border-radius:var(--ivy-radius-action,999px);background:var(--ivy-accent,rgb(17 17 17))}
.ivy-services--quinconce .ivy-services__item-cta:hover{opacity:.86}
.ivy-services--quinconce .ivy-services__item-cta:focus-visible{outline:2px solid currentColor;outline-offset:3px}
@media(min-width:768px){
.ivy-services--quinconce .ivy-services__grid{--ivy-quinconce-shift:clamp(90px,18vw,260px);grid-template-columns:minmax(0,calc((100% - var(--ivy-gap)) * var(--ivy-columns,50) / 100)) minmax(0,1fr)}
.ivy-services--quinconce .ivy-services__item:nth-of-type(even){margin-top:var(--ivy-quinconce-shift)}
.ivy-services--quinconce .ivy-services__item:nth-of-type(even):not(:last-of-type){margin-bottom:calc(var(--ivy-quinconce-shift) * -1)}
.ivy-services--quinconce .ivy-services__rule{display:block;position:absolute;top:0;bottom:0;left:calc((100% - var(--ivy-gap)) * var(--ivy-columns,50) / 100 + var(--ivy-gap) / 2);transform:translateX(-50%)}
.ivy-services--quinconce :where(.ivy-services__rule){width:1px;background:color-mix(in srgb,var(--ivy-muted,rgb(110 110 110)) 34%,transparent)}
.ivy-services--quinconce .ivy-services__rule-fill{display:none;position:absolute;inset:0;transform-origin:top}
.ivy-services--quinconce .ivy-fill-ready .ivy-services__rule-fill{display:block;transform:scaleY(var(--ivy-fill,0))}
.ivy-services--quinconce :where(.ivy-services__rule-fill){background:var(--ivy-accent,rgb(17 17 17))}
}

:where( .ivy-services--quinconce ) .ivy-services__cta { display: inline-flex; align-items: center; justify-content: center; line-height: 1; color: var( --ivy-cta-color ); }
.ivy-services--quinconce.ivy-services--ratio-16-9 { --ivy-services-ratio: 16 / 9; }
.ivy-services--quinconce.ivy-services--ratio-4-3 { --ivy-services-ratio: 4 / 3; }
.ivy-services--quinconce.ivy-services--ratio-1-1 { --ivy-services-ratio: 1 / 1; }
.ivy-services--quinconce.ivy-services--ratio-3-4 { --ivy-services-ratio: 3 / 4; }
.ivy-services--quinconce.ivy-services--ratio-4-5 { --ivy-services-ratio: 4 / 5; }
/* Ratio choisi (`media_ratio`) : `min-height: 0` retire le minimum automatique d'un element flex/grille a
   `aspect-ratio` — sans lui, Chromium etire le cadre a la taille naturelle de la photo et le rapport
   choisi n'est pas le rapport obtenu. Garde par la presence d'une classe explicite. */
.ivy-services--quinconce:is( .ivy-services--ratio-16-9, .ivy-services--ratio-4-3, .ivy-services--ratio-1-1, .ivy-services--ratio-3-4, .ivy-services--ratio-4-5 ) .ivy-services__media { min-height:0; }