/* Page produit — les images en grand, l'info à droite et qui reste. */

.pdp{padding-top:16px}
.pdp__grid{display:grid;grid-template-columns:1fr;gap:var(--gap);align-items:start}
@media (min-width:960px){.pdp__grid{grid-template-columns:1.35fr .65fr}}

.pdp__media{display:grid;gap:var(--gap)}
.pdp__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.pdp__f{aspect-ratio:3/4;overflow:hidden;background:var(--tile)}
.pdp__f img{width:100%;height:100%;object-fit:cover}

@media (min-width:960px){
  .pdp__info{position:sticky;top:76px;padding-left:clamp(16px,3vw,48px)}
}
.pdp__price{margin-top:8px;font-size:var(--t-l)}

.sizes{border:0;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.sizes legend{width:100%;margin-bottom:10px}
.size{position:relative;cursor:pointer}
.size input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.size span{
  display:grid;place-items:center;min-width:48px;min-height:44px;padding:0 12px;
  border:1px solid var(--line);font-size:var(--t-m);
  transition:border-color .25s,background .25s,color .25s;
}
.size:hover span{border-color:var(--ink-full)}
/* L'état sélectionné ne repose pas sur la seule couleur : le fond bascule. */
.size input:checked + span{background:var(--ink-full);color:var(--paper);border-color:var(--ink-full)}
.size input:focus-visible + span{outline:2px solid var(--ink-full);outline-offset:2px}

.pdp__soon{margin-top:26px;font-size:var(--t-m);color:var(--ink)}

/* Le champ email, version claire du bloc noir */
.f--light{border-color:var(--line);margin-top:12px}
.f--light input{color:var(--ink)}
.f--light input::placeholder{color:var(--ink-35)}
.f--light button{background:var(--ink-full);color:var(--paper)}
.f--light button:hover{opacity:.82}

.pdp__note{margin-top:10px;font-size:var(--t-s);color:var(--ink-35)}
.pdp__note.is-ok{color:var(--ink)}
/* Pas de rouge : sur une page en noir et blanc, une couleur d'alerte serait la
   seule couleur de la page, donc la plus criarde. Le poids et un trait suffisent. */
.pdp__note.is-bad{color:var(--ink-full);border-left:2px solid var(--ink-full);padding-left:10px}

.specs{margin-top:36px;border-top:1px solid var(--line)}
.specs>div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line)}
.specs dt{font-size:var(--t-s);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-35)}
.specs dd{font-size:var(--t-m);text-align:right;color:var(--ink-50)}