/* Illustration frames of the pilot sites (inc-pilote-illustrations.php, lot illustrations-1). A frame
   exists only when the slot has a picture: no rule here changes a page without one. Theme tokens. */

.qos-illu{margin:0;overflow:hidden;background:var(--mint);border-radius:calc(16px*var(--rk,1))}
.qos-illu-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

/* Head of the pillar page and of a guide: under the signature, before the figures and the summary. */
.qos-illu-tete{max-width:960px;margin:0 0 22px;box-shadow:var(--shadow-sm)}

/* Card of a pillar step or of a guide option: the picture bleeds to the card's edges (padding 22px). */
.qp-etape>.qos-illu-carte,.qp-option>.qos-illu-carte{margin:-22px -22px 16px;border-radius:calc(18px*var(--rk,1)) calc(18px*var(--rk,1)) 0 0}

/* Head of a collection: a vignette beside the title on a large screen, a short band on a phone. */
.coll-head:has(>.qos-illu-coll){display:flow-root}
.coll-head>.qos-illu-coll{float:right;width:min(34%,300px);margin:0 0 12px 24px;box-shadow:var(--shadow-sm)}
@media(max-width:700px){
  .coll-head>.qos-illu-coll{float:none;width:100%;margin:0 0 14px}
  .coll-head>.qos-illu-coll .qos-illu-img{aspect-ratio:3/1}
}