/* =========================================================
   PRODUIT (fiche produit) — extends style.css + home.css + apropos.css
   ========================================================= */
body:has(.pd){background:#fff}
.pd{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:32px 24px 88px;font-family:"Inter Tight",var(--font);color:#111}
.pd-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:start}

/* ---------- gallery ---------- */
.pd-gal{position:sticky;top:96px}
.pd-stage{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:1/1;background:#F4F2EE}
.pd-stage > img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .28s ease}
.pd-stage > img.is-out{opacity:0}
.pd-arrow{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,.85);display:grid;place-items:center;transition:background .2s}
.pd-arrow:hover{background:#fff}
.pd-arrow svg{width:17px;height:17px;fill:none;stroke:#111;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pd-arrow--prev{left:14px}
.pd-arrow--next{right:14px}
.pd-pack{position:absolute;right:0;bottom:42px;display:flex;flex-direction:column;align-items:center;padding:10px 16px 12px;border-radius:14px 0 0 0;background:#111;color:#fff;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.pd-pack b{font-size:30px;line-height:1;letter-spacing:-.03em;font-weight:500}
.pd-band{position:absolute;left:0;right:0;bottom:0;height:42px;display:grid;place-items:center;background:var(--acc);color:#111;font-size:13px;font-weight:600;transition:background .5s ease}
.pd-thumbs{margin-top:10px;display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.pd-thumbs button{aspect-ratio:1;border-radius:8px;overflow:hidden;border:2px solid transparent;padding:0;cursor:pointer;background:#F4F2EE;opacity:.72;transition:opacity .2s,border-color .2s}
.pd-thumbs button:hover{opacity:1}
.pd-thumbs button.is-on{border-color:#111;opacity:1}
.pd-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.pd-why{margin-top:14px;display:flex;gap:16px;align-items:center;padding:12px;border-radius:14px;background:#F6F6F4}
.pd-why img{width:84px;height:84px;border-radius:10px;object-fit:cover;flex:none}
.pd-why__k{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.pd-why p:last-child{margin-top:5px;font-size:13px;line-height:1.5;color:#444}

/* ---------- info ---------- */
.pd-crumbs{display:flex;gap:8px;font-size:11.5px;color:#888}
.pd-crumbs a{color:#666;text-decoration:none}
.pd-crumbs a:hover{color:#111}
.pd-title{margin-top:12px;font-size:28px;line-height:1.15;letter-spacing:-.025em;font-weight:400}
.pd-bullets{margin-top:14px;list-style:none;display:flex;flex-direction:column;gap:7px}
.pd-bullets li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.45;color:#333}
.pd-bullets li::before{content:"";position:absolute;left:2px;top:.52em;width:7px;height:7px;border-radius:50%;background:#111}
.pd-chips{margin-top:16px;list-style:none;display:flex;gap:6px;flex-wrap:wrap}
.pd-chips li{display:flex;flex-direction:column;align-items:center;min-width:74px;padding:7px 10px;border-radius:8px;background:#F2F2F0;font-size:11px;color:#555}
.pd-chips b{font-size:15px;font-weight:500;color:#111;letter-spacing:-.01em}
.pd-chips small{font-size:10px;font-weight:400;margin-left:1px}

.pd-label{margin-top:22px;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#555}
.pd-formula{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.pd-formula button{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:8px;border:1px solid #E2E2E2;background:#fff;font:500 13px "Inter Tight",var(--font);color:#111;cursor:pointer}
.pd-formula button.is-on{border:1.5px solid #111}
.pd-formula button:disabled{cursor:not-allowed;color:#999;background:#FAFAFA}
.pd-formula em{font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 6px;border-radius:4px;background:#E9E9E9;color:#777}
.pd-dots{display:inline-flex}
.pd-dots i{width:11px;height:11px;border-radius:50%;background:var(--c);border:1.5px solid #fff;margin-left:-4px}
.pd-dots i:first-child{margin-left:0}

.pd-flavs{margin-top:8px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pd-flav{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 8px 10px;border-radius:12px;border:1px solid #E6E6E6;background:#fff;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.pd-flav:hover{border-color:#bbb}
.pd-flav.is-on{border:1.5px solid #111;box-shadow:0 8px 20px rgba(17,17,17,.06)}
.pd-flav__img{width:100%;height:96px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 22%,#fff)}
.pd-flav__img img{height:84px;width:auto}
.pd-flav__name{display:flex;align-items:center;gap:6px;font:500 13px "Inter Tight",var(--font);color:#111}
.pd-flav__name i{width:8px;height:8px;border-radius:50%;background:var(--c)}

.pd-plans{margin-top:8px;display:flex;flex-direction:column;gap:8px}
.pd-plan{display:block;border-radius:12px;border:1px solid #E2E2E2;cursor:pointer;overflow:hidden;transition:border-color .2s}
.pd-plan.is-on{border:1.5px solid #111}
.pd-plan__ribbon{display:block;padding:6px;text-align:center;background:#111;color:#fff;font-size:11px;font-weight:600;letter-spacing:.04em}
.pd-plan__row{display:flex;align-items:center;gap:10px;padding:14px 16px}
.pd-plan input{appearance:none;-webkit-appearance:none;width:18px;height:18px;flex:none;margin:0;border-radius:50%;border:1.5px solid #999;cursor:pointer}
.pd-plan input:checked{border:5px solid #111}
.pd-plan__name{flex:1;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.pd-save{font-size:10.5px;font-weight:600;padding:3px 7px;border-radius:5px;background:#111;color:#fff}
.pd-plan__price{font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pd-plan__price s{font-size:12px;color:#999;margin-right:4px}
.pd-plan__perks{display:none;flex-direction:column;gap:6px;padding:0 16px 12px 44px;font-size:12.5px;color:#444}
.pd-plan__perks span{display:flex;align-items:center;gap:8px}
.pd-plan__perks svg{width:14px;height:14px;flex:none;fill:none;stroke:#111;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pd-plan__every{display:none;align-items:center;justify-content:space-between;gap:12px;margin:0 12px 12px;padding:8px 8px 8px 14px;border-radius:9px;border:1px solid #E6E6E6;font-size:12.5px;color:#555}
.pd-plan__every select{height:32px;padding:0 10px;border:0;border-radius:6px;background:#F2F2F0;font:600 12.5px "Inter Tight",var(--font);color:#111;cursor:pointer}
.pd-plan.is-on .pd-plan__perks,.pd-plan.is-on .pd-plan__every{display:flex}

.pd-buy{margin-top:16px;display:flex;gap:10px}
.pd-qty{display:flex;align-items:center;border:1px solid #DADADA;border-radius:10px;overflow:hidden}
.pd-qty button{width:38px;height:50px;border:0;background:none;font-size:18px;cursor:pointer;color:#111}
.pd-qty button:hover{background:#F4F4F4}
.pd-qty output{min-width:26px;text-align:center;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.pd-add{flex:1;height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border:0;border-radius:10px;cursor:pointer;
  background:#111;color:#fff;font:600 14px "Inter Tight",var(--font);transition:background .2s,transform .2s}
.pd-add:hover{background:#000}
.pd-add:active{transform:scale(.99)}
.pd-add b{font-weight:600;font-variant-numeric:tabular-nums}
.pd-add.is-added{background:#2E7D46}
.pd-trust{margin-top:12px;display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#555}
.pd-trust span{display:inline-flex;align-items:center;gap:6px}
.pd-trust svg{width:13px;height:13px;fill:none;stroke:#555;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pd-trust img{height:14px;width:auto}
.pd-trust__dot{color:#bbb}

.pd-accs{margin-top:22px;display:flex;flex-direction:column;gap:8px}
.pd-acc{border-radius:10px;background:#F4F4F4}
.pd-acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:15px 18px;font-size:14px;font-weight:500}
.pd-acc summary::-webkit-details-marker{display:none}
.pd-acc summary i{position:relative;width:12px;height:12px;flex:none}
.pd-acc summary i::before,.pd-acc summary i::after{content:"";position:absolute;left:0;top:50%;width:12px;height:1.5px;background:#111;transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.pd-acc summary i::after{transform:rotate(90deg)}
.pd-acc[open] summary i::after{transform:rotate(0)}
.pd-acc__body{padding:0 18px 16px;font-size:13.5px;line-height:1.6;color:#444}
.pd-acc__body p + p{margin-top:8px}
.pd-acc__body ul{padding-left:18px;display:flex;flex-direction:column;gap:4px}
.pd-fine{font-size:12px;color:#888}
.pd-more{display:inline-block;margin-top:10px;font-size:13px;font-weight:600;color:#111}

@media (max-width:960px){
  .pd-top{grid-template-columns:1fr;gap:28px}
  .pd-gal{position:static}
}
@media (max-width:560px){
  .pd{padding:20px 16px 64px}
  .pd-title{font-size:23px}
  .pd-thumbs{grid-template-columns:repeat(4,1fr)}
  .pd-band{font-size:11.5px}
}