/* ==========================================================================
   BOUTIQUE . le tiroir du panier, le bandeau cookies, les placeholders
   Commun a toutes les pages, pilote par assets/js/boutique.js.
   ========================================================================== */

/* LES PLACEHOLDERS . tout ce qui reste a fournir avant la mise en ligne
   finale porte la classe .ph et un data-ph qui renvoie a PLACEHOLDERS.md.
   Ils se voient expres : un surlignage ambre, un trait pointille. */
.ph{background:rgba(255,204,51,.30);box-shadow:inset 0 -1.5px 0 rgba(255,122,26,.75);
  border-radius:3px;padding:0 .2em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ph-bloc{display:grid;place-items:center;text-align:center;padding:18px;
  border:2px dashed rgba(255,122,26,.55);border-radius:var(--r);
  background:repeating-linear-gradient(135deg,rgba(255,204,51,.10) 0 12px,rgba(255,204,51,.20) 12px 24px);
  color:var(--ink-60);font-size:13px;font-weight:600;letter-spacing:.04em}

/* La pastille vide se tait. */
.cart .badge.vide{opacity:.55}

/* ---------------- le tiroir ---------------- */
.tiroir{position:fixed;inset:0;z-index:120;pointer-events:none}
.tiroir[data-open="true"]{pointer-events:auto}
.tiroir-voile{position:absolute;inset:0;background:rgba(14,22,48,.46);
  opacity:0;transition:opacity .35s ease;backdrop-filter:blur(3px)}
.tiroir[data-open="true"] .tiroir-voile{opacity:1}
.tiroir-pan{position:absolute;top:0;right:0;height:100%;width:min(440px,100%);
  background:var(--sand-lt);color:var(--ink);display:flex;flex-direction:column;
  box-shadow:-24px 0 60px rgba(14,22,48,.22);outline:0;
  transform:translateX(104%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.tiroir[data-open="true"] .tiroir-pan{transform:none}
.tiroir-tete{display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 22px) 24px 18px;border-bottom:1px solid var(--ink-12)}
.tiroir-tete h2{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:30px;line-height:1}
.tiroir-x{width:42px;aspect-ratio:1;border:0;border-radius:50%;background:transparent;cursor:pointer;
  color:var(--ink);box-shadow:inset 0 0 0 1.3px var(--ink-12);display:grid;place-items:center}
.tiroir-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.tiroir-x:hover{background:var(--ink);color:var(--sand)}
.tiroir-corps{flex:1;overflow:auto;padding:8px 24px}
.tiroir-lignes{list-style:none;margin:0;padding:0}
.tl{display:grid;grid-template-columns:84px 1fr auto;gap:14px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--ink-12)}
.tl-img{display:grid;place-items:center;aspect-ratio:1;border-radius:14px;
  background:radial-gradient(closest-side,var(--halo),transparent 78%),#fff6e6}
.tl-img img{width:84%;height:auto}
.tl-info{min-width:0;display:grid;gap:2px}
.tl-info b{font-weight:600;font-size:15px}
.tl-info span{font-size:13px;color:var(--ink-60)}
.tl-qte{display:inline-flex;align-items:center;gap:4px;margin-top:8px;justify-self:start;
  border-radius:var(--r-pill);box-shadow:inset 0 0 0 1.3px var(--ink-12);padding:3px}
.tl-qte button{width:30px;height:30px;border:0;border-radius:50%;background:transparent;
  color:var(--ink);font-size:17px;cursor:pointer}
.tl-qte button:hover{background:var(--ink);color:var(--sand)}
.tl-qte span{min-width:20px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.tl-prix{display:grid;justify-items:end;gap:8px}
.tl-prix b{font-variant-numeric:tabular-nums}
.tl-retirer{border:0;background:none;padding:0;font-size:12.5px;color:var(--ink-60);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tiroir-pied{padding:18px 24px calc(env(safe-area-inset-bottom,0px) + 22px);border-top:1px solid var(--ink-12)}
.tiroir-pied:empty{display:none}
.tiroir-totaux{margin:0;display:grid;gap:6px}
.tiroir-totaux div{display:flex;justify-content:space-between;font-size:14px}
.tiroir-totaux dd{margin:0;font-variant-numeric:tabular-nums}
.tiroir-totaux .tt-total{margin-top:6px;padding-top:10px;border-top:1px solid var(--ink-12);
  font-weight:700;font-size:16px}
.tiroir-note{margin:14px 0 16px;font-size:12.5px;line-height:1.5;color:var(--ink-60)}
.tiroir-go{width:100%;justify-content:center}
.tiroir-vide{display:grid;justify-items:start;gap:10px;padding:34px 0}
.tiroir-vide-t{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:26px;line-height:1}
.tiroir-vide p{color:var(--ink-60)}
.tiroir-vide .lozenge{margin-top:8px}

/* ---------------- le bandeau cookies ---------------- */
.consent{position:fixed;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);z-index:110;
  margin-inline:auto;max-width:760px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;
  padding:16px 18px 16px 22px;border-radius:20px;background:var(--ink);color:var(--sand);
  box-shadow:0 18px 50px rgba(14,22,48,.32)}
.consent p{flex:1 1 300px;margin:0;font-size:13.5px;line-height:1.5;color:rgba(242,227,201,.86)}
.consent p b{color:var(--sand)}
.consent a{color:var(--sand);text-decoration:underline;text-underline-offset:3px}
.consent-b{display:flex;gap:8px;flex-wrap:wrap}
.consent button{border:0;border-radius:var(--r-pill);padding:11px 18px;cursor:pointer;
  font:600 13.5px/1 var(--body)}
.consent-non{background:transparent;color:var(--sand);box-shadow:inset 0 0 0 1.3px rgba(242,227,201,.4)}
.consent-non:hover{background:rgba(242,227,201,.12)}
.consent-oui{background:var(--grad);color:#fff}

@media(prefers-reduced-motion:reduce){
  .tiroir-pan,.tiroir-voile{transition:none}
}