html{overflow-x:clip}
.pleine{width:100vw;margin-left:calc(50% - 50vw);
  --gut:max(clamp(20px,4.5vw,64px),calc((100vw - var(--page-large,1560px))/2))}





.boxrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  min-height:clamp(320px,46vh,520px)}

.boxes .boxrow:nth-child(even) .bxvis{order:2}
.bxvis{background:var(--c);position:relative;display:flex;align-items:center;
  justify-content:center;overflow:hidden;padding:clamp(20px,3vw,40px)}

a.bxvis{color:inherit;text-decoration:none;cursor:pointer}



.bxph{position:absolute;inset:0;z-index:2;display:block}
.bxph img{display:block;width:100%;height:100%;object-fit:cover}

.bxinfo{padding:clamp(30px,5vh,64px) clamp(24px,4vw,64px);display:flex;flex-direction:column;
  gap:16px;justify-content:center}
.bxinfo .sur{font-family:var(--f-sur);font-size:var(--t-xxs,11px);font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute)}
.bxinfo .sur.or{color:#B8860B}
.bxinfo h2{font-family:var(--f-titres),ui-serif,Georgia,serif;font-weight:var(--w-titres-demi,600);margin:0;
  font-size:clamp(30px,4.2vw,58px);letter-spacing:-.045em;line-height:.92}

.bxinfo p{font-size:var(--t-md,15px);color:var(--mute);line-height:1.5;margin:0}
.bxprice{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.bxprice .n s{font-size:.55em;color:var(--mute);opacity:.8;margin-right:6px}

.bxprice .n{font-family:var(--f-texte);font-variant-numeric:tabular-nums;font-size:clamp(28px,3.4vw,44px);
  letter-spacing:-.04em}
.bxprice .o{text-decoration:line-through;color:var(--mute);opacity:.75;font-size:var(--t-md,15px)}
.savings{background:#2E7D57;color:#fff;padding:7px 15px;font-size:var(--t-xs,12px);font-weight:800;
  letter-spacing:.12em;text-transform:uppercase}
.bxacts{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch}
.bxacts form{margin:0}

.bxacts button,.bxacts a{border-radius:var(--btn-r,30px);display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--t-xs,12px);font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:16px 30px;cursor:pointer;text-decoration:none;
  transition:transform .18s,background .2s,color .2s,border-color .2s}
.bxacts button{background:var(--ink);color:var(--paper,#FBF7EE);border:1.5px solid var(--ink)}
.bxacts button:hover{transform:translate(2px,-2px)}
.bxacts button[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.bxacts a{background:none;color:var(--ink);border:1.5px solid var(--line)}
.bxacts a:hover{border-color:var(--ink)}
@media (prefers-reduced-motion:reduce){.bxacts button:hover{transform:none}}

@media(max-width:900px){
  .boxes .boxrow{display:flex;flex-direction:column;gap:16px}
  .boxes .boxrow:nth-child(even) .bxvis{order:0}
  .bxvis{min-height:clamp(210px,32vh,300px)}
  .boxes .bxinfo{display:contents}
  .boxes .bxinfo>*{margin-inline:clamp(24px,4vw,64px)}
  .boxes .bxinfo .sur{order:-2;margin-top:56px}
  .boxes .bxinfo h2{order:-1;margin-bottom:8px}
  .boxes .bxinfo>*:not(.sur):not(h2){order:1}
  .boxes .bxvis{margin-bottom:8px}
  .boxes .bxacts{margin-bottom:24px}
}