/* Les effets de survol sont enfermes dans @media (hover:hover) : sur un
   ecran tactile, l'etat survol se colle apres un appui et ne part qu'au
   tap suivant, ailleurs. Un bouton restait fonce, une carte agrandie. */
/* Fiche d'une pièce : reprise de la maquette de la vitrine. */
.hd{background:rgba(251,249,250,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(42,22,34,.08)}
.hd .logo .disc{--c:var(--rose)}
.hd .srch{background:var(--lilas)}
@media (hover:hover){.hd .nav a:hover{background:var(--lilas)}}

.crumb{padding:calc(var(--hh) + 22px) var(--pad) 18px;display:flex;flex-wrap:wrap;gap:8px;font-stretch:75%;font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:12px;color:var(--ink-2)}
@media (hover:hover){.crumb a:hover{color:var(--rose)}}
.crumb i{font-style:normal;opacity:.5}
.crumb span{color:var(--ink)}

.pdp{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(360px,1fr);gap:clamp(20px,3vw,56px);padding:0 var(--pad)}
/* galerie */
.gal{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
/* grid-template-rows:minmax(0,1fr) : sans lui, la rangée se dimensionne sur
   la taille naturelle de la photo (627 px pour un cadre de 385) et la photo
   débordait, rognée. On n'en voyait qu'une tranche. */
.gal button{background:var(--lilas);border-radius:var(--r);aspect-ratio:4/5;display:grid;grid-template-rows:minmax(0,1fr);place-items:center;padding:9%;overflow:hidden;cursor:zoom-in;position:relative}
.gal button:first-child{grid-column:1/-1;aspect-ratio:auto;height:min(88vh,900px);padding:6% 10%}
.gal button.photo{padding:0}
.gal button.photo img{width:100%;height:100%;object-fit:cover;max-height:none}
.gal img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.gal button:hover img{transform:scale(1.03)}}
.gal .tag{position:absolute;left:16px;top:18px;transform-origin:0 50%;animation:swing 4s ease-in-out infinite}
.gal-n{display:none}

/* panneau */
.info{position:sticky;top:calc(var(--hh) + 20px);align-self:start;display:flex;flex-direction:column;gap:22px;padding-bottom:30px}
.meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.meta b{font-stretch:70%;font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:12px;background:var(--ink);color:var(--paper);border-radius:999px;padding:5px 11px}
.meta span{font-stretch:70%;font-weight:600;text-transform:uppercase;letter-spacing:.07em;font-size:12px;color:var(--ink-2)}
.info h1{font-stretch:118%;font-weight:800;letter-spacing:-.035em;font-size:clamp(34px,3.6vw,56px);line-height:.95}
.price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.price b{font-stretch:110%;font-weight:800;font-size:34px;letter-spacing:-.02em}
.price s{color:var(--ink-2);font-size:15px}
.price em{font-style:normal;background:var(--rose-d);color:var(--paper);border-radius:999px;padding:4px 11px;font-size:13px;font-weight:700}
.blk{border-top:1px solid var(--lilas-d);padding-top:18px}
.lab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;font-stretch:72%;font-weight:600;text-transform:uppercase;letter-spacing:.07em;font-size:12.5px}
.lab button{font:inherit;text-transform:none;letter-spacing:0;font-stretch:100%;font-weight:500;font-size:13px;border-bottom:1.5px solid var(--rose)}
.sizes{display:flex;flex-wrap:wrap;gap:10px}
.sizes button,.sizes span{display:flex;flex-direction:column;align-items:center}
.sizes .disc{--d:60px;--c:var(--lilas);--slot:var(--paper)}
@media (hover:hover){.sizes button:hover .disc{transform:rotate(-10deg)}}
.sizes button[aria-pressed="true"] .disc{box-shadow:none;outline:0;transform:translateY(-4px)}
.sizes button[aria-pressed="true"]::after{content:"";width:22px;height:3px;border-radius:2px;background:var(--ink);margin-top:6px}
.lab em{font-style:normal;text-transform:none;letter-spacing:0;font-stretch:100%;font-weight:500;font-size:14px;color:var(--ink);margin-left:6px}
.sw{display:flex;flex-wrap:wrap;gap:12px}
.sw button,.sw span.one{width:44px;height:44px;border-radius:50%;position:relative;display:block}
.sw i{position:absolute;inset:5px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(42,22,34,.14)}
.sw button::after,.sw span.one::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .2s}
@media (hover:hover){.sw button:hover::after{box-shadow:inset 0 0 0 1.5px var(--lilas-d)}}
.sw [aria-pressed="true"]::after,.sw span.one::after{box-shadow:inset 0 0 0 2px var(--ink)}
.sw .txt{width:auto;height:44px;padding:0 16px;border-radius:999px;background:var(--lilas);font-size:14px;font-weight:500}
.sw .txt[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.sw .txt::after{display:none}
.sizes button[disabled]{opacity:.28;cursor:not-allowed}

.sizes button[disabled] .disc{transform:none}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts button{height:40px;padding:0 16px;border-radius:999px;background:var(--lilas);font-size:14px;font-weight:500}
.opts button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.hint{font-size:13px;color:var(--ink-2);margin-top:10px}
.cta{display:grid;gap:8px}
.cta .pill{justify-content:space-between;height:56px;width:100%}
.perks{list-style:none;display:grid;gap:10px;font-size:14px}
.perks li{display:flex;gap:12px;align-items:flex-start}
.perks .disc{--d:24px;--c:var(--rose);--slot:var(--paper);margin-top:-2px}
.perks a{border-bottom:1.5px solid var(--rose)}
details{border-top:1px solid var(--lilas-d)}
details:last-of-type{border-bottom:1px solid var(--lilas-d)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:17px 0;font-stretch:110%;font-weight:700;font-size:17px;letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}
summary::after{content:"";width:12px;height:12px;background:linear-gradient(currentColor,currentColor) center/12px 1.6px no-repeat,linear-gradient(currentColor,currentColor) center/1.6px 12px no-repeat;transition:transform .3s}
details[open] summary::after{transform:rotate(45deg)}
.dtx{padding:0 0 20px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.dtx p+p{margin-top:4px}
.gt{width:100%;border-collapse:collapse;font-size:14px;margin-top:4px}
.gt th,.gt td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--lilas-d)}
.gt th{font-stretch:72%;font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:12px;color:var(--ink-2)}
.gt td:first-child{font-weight:700;color:var(--ink)}
.gt tr.on td{background:var(--rose-l)}

/* suggestions */
.more-h{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:0 var(--pad);margin:clamp(80px,9vw,140px) 0 26px}
.more-h .h2{font-size:clamp(32px,4vw,60px)}
.sugg{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;padding:0 var(--pad) 10px;scroll-snap-type:x mandatory;scrollbar-width:none}
.sugg::-webkit-scrollbar{display:none}
.sugg .card{flex:none;width:clamp(200px,20vw,280px);scroll-snap-align:start}

/* barre mobile */
.mbar{display:none}

/* visionneuse */
.lb{position:fixed;inset:0;z-index:90;background:var(--lilas);display:none;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:88vh;object-fit:contain}
.lb button{position:absolute;width:50px;height:50px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font-size:22px}
.lb .x{top:16px;right:16px}
.lb .p{left:16px;top:50%;transform:translateY(-50%)}
.lb .n{right:16px;top:50%;transform:translateY(-50%)}
.lb .c{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-stretch:75%;font-weight:600;letter-spacing:.06em;font-size:13px}

.livechk{display:inline-flex;align-items:center;gap:6px;font-stretch:72%;font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:11.5px;color:var(--ink-2)}
.stk{font-stretch:80%;font-weight:700;font-size:13px;color:var(--rose-d);text-transform:uppercase;letter-spacing:.04em}
.soldb{background:var(--lilas);border-radius:var(--r);padding:20px 22px;display:grid;gap:6px;font-size:14px;color:var(--ink-2)}
.soldb strong{font-stretch:110%;font-weight:800;font-size:20px;color:var(--ink)}
.soldb a{border-bottom:1.5px solid var(--rose)}
.nf{padding:calc(var(--hh) + 120px) var(--pad) 160px;text-align:center}
.nf h1{font-stretch:125%;font-weight:900;letter-spacing:-.04em;font-size:clamp(40px,6vw,90px);line-height:.9;margin-bottom:20px}

@media (max-width:900px){
  /* minmax(0,1fr) et non 1fr : une colonne « 1fr » a pour largeur minimale
     celle de son contenu. Le carrousel debordait de 16 px de chaque cote par
     sa marge negative, la colonne s'elargissait d'autant, et toute la fiche
     devenait plus large que l'ecran : le bouton d'ajout, le telephone et la
     ligne livraison sortaient a droite. Chrome absorbait, Safari non. */
  .pdp{grid-template-columns:minmax(0,1fr)}
  /* Une photo par écran, pleine largeur, sans gouttière ni débordement.
     L'ancien réglage montrait un bout de la photo suivante : joli sur le papier,
     mais la première et la dernière ne pouvaient alors jamais atteindre leur
     position centrée, et « mandatory » oblige le navigateur à se poser sur une
     cible. Safari renonçait et sautait à la photo d'à côté.
     Ici la photo n° k se centre à k fois la largeur de l'écran, et le défilement
     maximal vaut exactement (n-1) fois cette largeur : toutes sont atteignables.
     La largeur reste en pourcentage, jamais en pixels : une largeur absolue
     entrerait dans le calcul de taille intrinsèque de la grille parente, qui
     gonflerait à la somme des photos et pousserait la page entière de côté. */
  /* Plus de marge negative : le carrousel reste dans la largeur du contenu.
     Le bord a bord etait plus joli, mais c'est lui qui poussait la grille. */
  .gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;
    margin:0;padding:0;min-width:0;max-width:100%;
    overscroll-behavior-x:contain;scrollbar-width:none}
  .gal::-webkit-scrollbar{display:none}
  /* height plutôt qu'aspect-ratio : à plat, le 4/5 d'une pleine largeur
     donnait une photo plus haute que l'écran et le bandeau d'achat passait
     par-dessus. Les 125 % correspondent au 4/5 en portrait. */
  /* Centrage par flex et non par grille : dans une ligne « minmax(0,1fr) »,
     le max-height:100% de la photo se rapporte a une hauteur que Safari tient
     pour indefinie et resout a zero. La photo disparaissait, il ne restait que
     le cadre clair. Ici le cadre a une hauteur ferme et la photo le remplit. */
  .gal button,.gal button:first-child{flex:none;width:100%;
    height:min(125vw, 72svh);aspect-ratio:auto;scroll-snap-align:center;padding:7% 9%;
    display:flex;align-items:center;justify-content:center;grid-template-rows:none}
  .gal button img{width:100%;height:100%;object-fit:contain;max-height:none}
  .gal button.photo{padding:0}
  .gal-n{display:flex;justify-content:center;gap:6px;margin-top:12px}
  .gal-n i{width:6px;height:6px;border-radius:50%;background:var(--lilas-d);transition:background .2s,width .2s}
  .gal-n i.on{background:var(--ink);width:18px;border-radius:3px}
  .info{position:static;padding-top:10px}
  .mbar{display:flex;position:fixed;left:10px;right:10px;bottom:10px;z-index:40;background:var(--ink);color:var(--paper);border-radius:999px;padding:6px 6px 6px 22px;align-items:center;gap:12px;transform:translateY(130%);transition:transform .4s cubic-bezier(.2,.8,.2,1);box-shadow:0 10px 30px rgba(42,22,34,.25)}
  .mbar.on{transform:none}
  .mbar b{font-stretch:110%;font-weight:800;font-size:19px}
  .mbar span{font-size:12.5px;opacity:.7;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .mbar a{height:46px;padding:0 20px;border-radius:999px;background:var(--rose-d);display:inline-flex;align-items:center;font-stretch:80%;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:12.5px}
  .ft{padding-bottom:70px}
}

/* ---------- choix taille et couleur : de vraies cases à cocher ----------
   La maquette utilisait des boutons pilotés en JavaScript ; ici ce sont des
   boutons radio, pour que la fiche marche aussi sans script. */
.sizes label{display:flex;flex-direction:column;align-items:center;cursor:pointer}
@media (hover:hover){.sizes label:hover .disc{transform:rotate(-10deg)}}
.sizes label:has(input:checked) .disc{transform:translateY(-4px)}
.sizes label:has(input:checked)::after{content:"";width:22px;height:3px;border-radius:2px;background:var(--ink);margin-top:6px}
.sizes label:has(input:focus-visible) .disc{outline:2px solid var(--rose);outline-offset:3px}

.sw label{width:44px;height:44px;border-radius:50%;position:relative;display:block;cursor:pointer}
.sw label i{position:absolute;inset:5px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(42,22,34,.14)}
.sw label::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .2s}
@media (hover:hover){.sw label:hover::after{box-shadow:inset 0 0 0 1.5px var(--lilas-d)}}
.sw label:has(input:checked)::after{box-shadow:inset 0 0 0 2px var(--ink)}
.sw label.txt{width:auto;height:44px;padding:0 16px;border-radius:999px;background:var(--lilas);font-size:14px;font-weight:500;display:inline-flex;align-items:center}
.sw label.txt:has(input:checked){background:var(--ink);color:var(--paper)}
.sw label:has(input:focus-visible)::after{box-shadow:inset 0 0 0 2px var(--rose)}

/* le bouton d'ajout porte le prix à droite */
.cta .pill span{font-stretch:110%;font-weight:800;font-size:16px}
.cta .stk{margin-top:4px}
.mbar button{height:46px;padding:0 20px;border-radius:999px;background:var(--rose-d);color:var(--paper);display:inline-flex;align-items:center;font-stretch:80%;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:12.5px;border:0}