/* Elvaly : produit phare (photo qui suit le coloris), aplat vivant et rangée des coloris (sections masquées). */
.elv .pp .ph{position:relative}
.elv .pp .ph .ph-img{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--ease)}
.elv .pp .ph .ph-img.on{opacity:1}
.elv .pp .ph .ph-img img{width:100%;height:100%;object-fit:cover}
.elv .pp .ph .ph-img:not(.on) img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){ .elv .pp .ph .ph-img{transition:none} }

.elv.ap{
  --ink-c:var(--lait);
  background:var(--ap,#B5835F);color:var(--ink-c);
  transition:background-color .9s var(--ease),color .6s var(--ease);
  &[data-ink="sombre"]{--ink-c:var(--cacao)}
  & .ap-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:min(88vh,820px)}
  & .ap-txt{display:flex;flex-direction:column;justify-content:space-between;gap:48px;padding-block:72px 64px;padding-right:max(24px,5vw);padding-left:max(var(--m),calc((100vw - var(--page-width,90rem)) / 2 + var(--m)))}
  & .ap-mid{display:flex;flex-direction:column;gap:var(--stack);max-width:460px}
  & h2{font-size:var(--t-display);color:inherit}
  & .sub{font-size:var(--t-lead);font-weight:300;color:inherit;opacity:.85}
  & .price{border-color:color-mix(in srgb,currentColor 28%,transparent);color:inherit}
  & .price small{color:inherit;opacity:.75}
  & form{display:flex;flex-direction:column;gap:var(--stack)}
  & .sw .name{color:inherit}
  & .sw button{border:1px solid color-mix(in srgb,currentColor 35%,transparent)}
  & .sw button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--ap,#B5835F),0 0 0 4px currentColor}
  & .size,& .mini{color:inherit;opacity:.8}
  & .btn{width:100%;background:var(--ink-c);color:var(--ap,#B5835F);transition:background-color .6s var(--ease),color .6s var(--ease),opacity .3s}
  & .btn:hover{background:var(--ink-c);opacity:.9}
  & .lbl{opacity:.85}
  & .ap-media{position:relative;overflow:hidden;display:block;min-height:100%}
  & .ap-img{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease)}
  & .ap-img.on{opacity:1}
  & .ap-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.8s var(--ease)}
  & .ap-img.on img{transform:scale(1)}
  @media (max-width:900px){
    & .ap-grid{grid-template-columns:minmax(0,1fr);min-height:0}
    & .ap-media{order:-1;aspect-ratio:4/5;min-height:0}
    & .ap-txt{padding:48px var(--m) 56px}
  }
  @media (prefers-reduced-motion:reduce){
    &,& .btn,& .ap-img,& .ap-img img{transition:none}
  }
}
.elv.rg7{
  & .r7{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:var(--head)}
  & .r7 a{text-decoration:none;display:flex;flex-direction:column;gap:14px;align-items:center}
  & .r7 .ph{aspect-ratio:1;border-radius:var(--r);overflow:hidden;width:100%}
  & .r7 .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
  & .r7 a:hover .ph img{transform:scale(1.05)}
  & .r7 span{font-size:var(--t-label);letter-spacing:var(--track);text-transform:uppercase}
  @media (max-width:900px){ & .r7{grid-template-columns:repeat(3,minmax(0,1fr))} }
  @media (max-width:560px){
    & .r7{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
    & .r7 a{flex:0 0 42%;scroll-snap-align:start}
  }
}