/* Exemples avant / après (fictifs) : de vraies captures d'écran, voir _src/exemples/README.md.
   Les deux calques montrent le premier écran, calé en haut, à la même échelle. */
.layer picture,.layer img{display:block;width:100%;height:100%}
.layer img{object-fit:cover;object-position:top center;background:#E8E6DF}
.stage .tag{box-shadow:0 2px 8px rgba(0,0,0,.18)}
/* Vignettes de l'accueil */
.ex-shot{display:block;width:100%;height:100%;object-fit:cover;object-position:top left;background:#E8E6DF;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ex-card:hover .ex-shot{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){.ex-shot{transition:none}.ex-card:hover .ex-shot{transform:none}}
/* Accueil : les pastilles flottantes ne masquent ni le titre de l'ancien site ni celui du nouveau */
@media (min-width:561px){
  .compare-box .chip--1{top:auto;bottom:12%}
  .compare-box .chip--2{top:18%}
}
/* Téléphone : l'ancien site se lit depuis son en-tête, le nouveau est calé sur son titre et son bouton */
@media (max-width:560px){.layer--after img{object-position:center bottom}}
/* Accueil : cinq exemples sur une ligne en grand écran */
@media (min-width:1081px){.ex-grid--5{grid-template-columns:repeat(5,1fr)}.ex-grid--5 .ex-card__thumb{height:150px}}
/* Page Exemples : le nouveau site en entier, dans un cadre qui défile */
.ex-page{margin:28px 0 0}
.ex-page figcaption{margin:0 0 10px}
.ex-page__frame{height:clamp(460px,60vw,640px);overflow-y:auto;overscroll-behavior:contain;border-radius:16px;background:#E8E6DF;box-shadow:inset 0 0 0 1px var(--line);max-width:820px}
.ex-page__frame:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.ex-page__frame img{display:block;width:100%;height:auto}