séparé : pas de gain fonctionnel connu, juste un élément en moins dans le DOM. */ body.cg-cart-open::before { content: ""; position: fixed; inset: 0; background: rgba(13, 10, 11, 0.66); backdrop-filter: blur(3px); z-index: 70; /* main.css pose "pointer-events: none" sur body::before (halos décoratifs). Sans ré-activation ici, les clics traversent le fond assombri : fermer le tiroir en tapant à côté peut alors aussi presser un bouton "+" du menu resté dessous (l'ancien div .cart-overlay, lui, interceptait le clic). */ pointer-events: auto; } .cart-drawer { position: fixed; inset-block: 0; inset-inline-end: 0; width: min(430px, 100vw); background: var(--surface, #211a19); border-inline-start: 1px solid rgba(201, 151, 63, 0.25); z-index: 71; display: flex; flex-direction: column; padding: clamp(1rem, 3vw, 1.6rem); overflow-y: auto; color: var(--cream, #f2e8d5); } .cart-drawer[hidden] { display: none; } .cart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; } .cart-title { font-family: var(--font-display, serif); font-size: 1.45rem; color: var(--gold-bright, #e3b563); } .cart-close { background: none; border: 1px solid rgba(242, 232, 213, 0.25); color: var(--cream, #f2e8d5); width: 2.2rem; height: 2.2rem; border-radius: 50%; font-size: 1.25rem; cursor: pointer; } .cart-table-row { display: flex; align-items: center; gap: 0.7em; margin-bottom: 1rem; } .cart-table-label { font-weight: 700; color: var(--gold-bright, #e3b563); } .cart-table-row select { flex: 1; background: var(--bg-deep, #0d0a0b); color: var(--cream, #f2e8d5); border: 1px solid rgba(201, 151, 63, 0.35); border-radius: 10px; padding: 0.6em 0.8em; font-size: 1rem; } .cart-items { list-style: none; margin: 0 0 0.6rem; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; } .cart-item { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.6em; background: rgba(13, 10, 11, 0.5); border: 1px solid rgba(242, 232, 213, 0.08); border-radius: 10px; padding: 0.55em 0.75em; } .ci-name { font-size: 0.92rem; } .ci-qty { display: inline-flex; align-items: center; gap: 0.5em; } .ci-qty button { width: 1.7em; height: 1.7em; border-radius: 50%; border: 1px solid rgba(201, 151, 63, 0.4); background: none; color: var(--gold-bright, #e3b563); cursor: pointer; line-height: 1; } .ci-price { font-variant-numeric: tabular-nums; color: var(--gold-bright, #e3b563); font-weight: 600; font-size: 0.92rem; } .cart-empty { color: var(--cream-dim, #c9bda6); font-size: 0.92rem; margin: 0.5rem 0 1rem; } .cart-note { width: 100%; background: var(--bg-deep, #0d0a0b); color: var(--cream, #f2e8d5); border: 1px solid rgba(242, 232, 213, 0.15); border-radius: 10px; padding: 0.65em 0.8em; font-family: inherit; font-size: 0.92rem; resize: vertical; margin-bottom: 1rem; } .cart-foot { margin-top: auto; display: flex; flex-direction: column; gap: 0.7rem; } .cart-total { display: flex; justify-content: space-between; font-size: 1.1rem; } .cart-total b { color: var(--gold-bright, #e3b563); font-variant-numeric: tabular-nums; } .cart-send:disabled { opacity: 0.45; cursor: not-allowed; } .cart-wa { text-align: center; } .cart-msg { color: #e08f6d; font-size: 0.9rem; margin: 0; } /* ---- écran de confirmation ---- */ .cart-done { position: absolute; inset: 0; /* doit passer au-dessus de tout le contenu du tiroir : sans z-index explicite, n'importe quel enfant positionné (z-index:1) s'afficherait par-dessus la confirmation et resterait cliquable. */ z-index: 5; background: var(--surface, #211a19); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.9rem; padding: 2rem; } .cart-done[hidden] { display: none; } .cart-done-icon { width: 3.6rem; height: 3.6rem; border-radius: 50%; background: rgba(96, 170, 110, 0.16); color: #7fc98f; display: grid; place-items: center; font-size: 1.8rem; border: 1px solid rgba(127, 201, 143, 0.5); } .cart-done h3 { font-family: var(--font-display, serif); font-size: 1.4rem; color: var(--gold-bright, #e3b563); } .cart-done p { color: var(--cream-dim, #c9bda6); max-width: 30ch; } /* RTL : le tiroir glisse du même côté logique (inset-inline gère tout) */ [dir="rtl"] .cart-drawer { border-inline-start: none; border-inline-end: 1px solid rgba(201, 151, 63, 0.25); } @media (max-width: 480px) { .cart-drawer { width: 100vw; } .cart-fab-label { display: none; } .cart-fab { padding: 0.9em; } } /* Couche motion (motion-menu.js) : GSAP pilote le bump du bouton et le vol de la vignette — on coupe leurs équivalents CSS pour éviter le doublon. */ html.gsap-on .cart-fab { transition: none; } html.gsap-on .cart-fab.bump { animation: none; }