/* ==========================================================================
   Sidecart — maquette « Sidecart Paradis du Thé » (Claude Design, 13/09/2026).
   ========================================================================== */

.sidecart { position: fixed; inset: 0; z-index: 1100; visibility: hidden; pointer-events: none; transition: visibility 0s linear 0.5s; }
.sidecart.is-ouvert { visibility: visible; pointer-events: auto; transition: visibility 0s; }
.sidecart__voile { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: #2a2a24; opacity: 0; cursor: default; transition: opacity 0.5s cubic-bezier(0.34, 0.02, 0.16, 1); }
.sidecart.is-ouvert .sidecart__voile { opacity: 0.3; }
.sidecart__tiroir {
	position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); background: #fff;
	transform: translateX(104%); transition: transform 0.5s cubic-bezier(0.34, 0.02, 0.16, 1); will-change: transform;
}
.sidecart.is-ouvert .sidecart__tiroir { transform: none; box-shadow: -18px 0 46px -22px rgb(42 42 36 / 0.5); }
.sidecart__contenu { display: flex; flex-direction: column; height: 100%; }
.sidecart[aria-busy="true"] .sidecart__liste { opacity: 0.6; transition: opacity 0.2s; }

.sidecart__tete { flex: none; display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: var(--c-creme); }
.sidecart__intitule { flex: 1; min-width: 0; }
.sidecart__titre { margin: 0; font: 600 1.375rem/1.15 var(--f-titre); color: var(--c-texte); }
.sidecart__compte { margin: 3px 0 0; font-size: 0.78125rem; color: var(--c-prune-texte); }
.sidecart__fermer { flex: none; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--c-texte); font-size: 20px; line-height: 1; cursor: pointer; }
.sidecart__fermer:hover { background: rgb(42 42 36 / 0.08); }

.sidecart__jauge { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid #efebe4; }
.sidecart__jauge .icone { flex: none; color: var(--c-prune); }
.sidecart__jauge-corps { flex: 1; min-width: 0; }
.sidecart__jauge-message { margin: 0 0 7px; font-size: 0.8125rem; line-height: 1.4; color: #4a4a40; }
.sidecart__jauge-message strong { font-weight: 600; color: var(--c-texte); }
.sidecart__piste { display: block; height: 5px; overflow: hidden; background: #efebe4; }
.sidecart__rempli { display: block; height: 100%; background: var(--c-vert); transition: width 0.6s cubic-bezier(0.34, 0.02, 0.16, 1); }

.sidecart__liste { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.sidecart__vide { padding: 40px 20px; text-align: center; }
.sidecart__vide-titre { margin: 0 0 8px; font: 400 1.3125rem/1.2 var(--f-titre); color: var(--c-texte); }
.sidecart__vide-texte { margin: 0 0 18px; font-size: 0.875rem; color: #77776a; }

.sc-ligne { position: relative; overflow: hidden; display: flex; gap: 14px; padding: 16px 20px; border-bottom: 1px solid #efebe4; }
.sc-ligne.is-frais { animation: pdt-rowin 0.5s both; background: #fdfcf9; }
.sc-ligne.is-retrait { opacity: 0.4; transition: opacity 0.2s; }
.sc-ligne__halo {
	position: absolute; left: 57px; top: 53px; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; pointer-events: none;
	background: radial-gradient(circle, rgb(102 150 2 / 0.5) 0%, rgb(228 221 213 / 0.6) 45%, rgb(228 221 213 / 0) 70%);
	animation: pdt-steep 1.15s ease-out 0.9s both;
}
.sc-ligne__visuel { position: relative; flex: none; width: 74px; height: 74px; overflow: hidden; background: #f2efe7; }
.sc-ligne__visuel img { display: block; width: 100%; height: 100% !important; object-fit: cover; }
.sc-ligne__corps { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sc-ligne__tete { display: flex; align-items: flex-start; gap: 10px; }
.sc-ligne__nom { flex: 1; min-width: 0; font: 600 1.03125rem/1.2 var(--f-titre); color: var(--c-texte); }
a.sc-ligne__nom:hover { color: var(--c-vert); }
.sc-ligne__total { flex: none; font: 600 1.03125rem/1.2 var(--f-titre); color: var(--c-texte); }
.sc-ligne__detail { margin: 0; font-size: 0.75rem; color: #77776a; }
.sc-ligne__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 3px; }
.sc-qte { display: flex; align-items: center; border: 1px solid var(--c-champ); background: #fff; }
.sc-qte__pas { width: 34px; height: 36px; padding: 0; border: 0; background: none; color: #4a4a40; font: 400 16px/1 var(--f-texte); cursor: pointer; }
.sc-qte__pas:hover { background: #f5f2ec; color: var(--c-texte); }
.sc-qte__pas:disabled { color: var(--c-champ); background: none; cursor: default; }
.sc-qte__nb { min-width: 26px; text-align: center; font-size: 0.875rem; font-weight: 600; }
.sc-ligne__retirer { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: var(--c-texte-discret); cursor: pointer; }
.sc-ligne__retirer:hover { color: var(--c-prune); }
.sc-ligne__retirer .icone { width: 17px; height: 17px; }

.sidecart__echantillon { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 20px; background: #faf8f4; }
.sidecart__echantillon-titre { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 0.8125rem; line-height: 1.4; color: #4a4a40; }
.sidecart__echantillon-titre strong { font-weight: 600; color: var(--c-texte); }
.sidecart__echantillon-titre .icone { flex: none; width: 20px; height: 20px; color: var(--c-vert); }
.sidecart__echantillon-choix { display: flex; flex-wrap: wrap; gap: 7px; }
.sidecart .pastille-choix { position: relative; cursor: pointer; }
.sidecart .pastille-choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sidecart .pastille-choix span { display: block; padding: 6px 11px; border: 1px solid var(--c-creme); border-radius: 999px; background: #fff; font-size: 0.78125rem; color: #4a4a40; }
.sidecart .pastille-choix:hover span { border-color: var(--c-prune); }
.sidecart .pastille-choix input:checked + span { border-color: var(--c-prune); background: #f3ebef; color: var(--c-prune-texte); }
.sidecart .pastille-choix input:focus-visible + span { outline: 2px solid var(--c-prune); outline-offset: 2px; }

.sidecart__pied { flex: none; padding: 16px 20px 18px; border-top: 1px solid var(--c-creme); background: #fff; }
.sidecart__sous-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; font-size: 0.9375rem; color: #4a4a40; }
.sidecart__sous-total strong, .sidecart__sous-total .amount { font: 600 1.625rem/1 var(--f-titre); color: var(--c-prune-texte); }
.sidecart__mention { margin: 6px 0 14px; font-size: 0.75rem; line-height: 1.5; color: #77776a; }
.sidecart__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.sidecart__cta .button { min-height: 0; padding: 13px 8px; font-size: 0.6875rem; letter-spacing: 0.12em; white-space: nowrap; }
.sidecart a.button.sidecart__voir { flex: 1 1 130px; background: #fff; color: var(--c-prune); box-shadow: inset 0 0 0 1px #d6c2cb; }
.sidecart a.button.sidecart__voir:hover { background: #fff; color: var(--c-prune); box-shadow: inset 0 0 0 1px var(--c-prune); }
.sidecart__valider { flex: 2 1 170px; }
.sidecart__securite { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; font-size: 0.75rem; color: #77776a; }

/* Feuilles : calque au-dessus du tiroir et du voile */
.sc-feuilles { position: fixed; width: 56px; height: 56px; z-index: 1200; pointer-events: none; }
.sc-feuille { position: absolute; inset: 0; color: var(--c-vert); opacity: 0; animation: pdt-leaf 1.9s cubic-bezier(0.28, 0.06, 0.22, 1) both; }
.sc-feuille svg { display: block; filter: drop-shadow(0 3px 6px rgb(42 42 36 / 0.28)); opacity: 0.95; }

@keyframes pdt-leaf {
	0% { transform: translate(0, 0) rotate(-8deg) scale(1); opacity: 0; }
	8% { opacity: 1; }
	55% { transform: translate(calc(var(--dx) * 0.58), calc(var(--dy) * 0.3)) rotate(130deg) scale(1.05); }
	90% { opacity: 0.9; }
	100% { transform: translate(var(--dx), var(--dy)) rotate(300deg) scale(0.14); opacity: 0; }
}
@keyframes pdt-steep { 0% { transform: scale(0.2); opacity: 0.55; } 70% { opacity: 0.3; } 100% { transform: scale(3.4); opacity: 0; } }
@keyframes pdt-rowin { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

@media (max-width: 599px) {
	.sidecart__tiroir { width: 92vw; }
	.sidecart__tete { padding: 13px 16px; }
	.sidecart__titre { font-size: 1.1875rem; }
	.sidecart__compte { font-size: 0.71875rem; }
	.sidecart__jauge { padding: 11px 16px; gap: 10px; }
	.sidecart__jauge-message { font-size: 0.75rem; }
	.sc-ligne { gap: 12px; padding: 14px 16px; }
	.sc-ligne__visuel { width: 66px; height: 66px; }
	.sc-ligne__halo { left: 49px; top: 47px; }
	.sc-ligne__nom, .sc-ligne__total { font-size: 0.9375rem; }
	.sc-ligne__detail { font-size: 0.6875rem; }
	.sc-qte__pas { width: 32px; height: 34px; }
	.sc-ligne__retirer { width: 32px; height: 32px; }
	.sc-ligne__retirer .icone { width: 16px; height: 16px; }
	.sidecart__echantillon { padding: 12px 16px; }
	.sidecart__echantillon-choix { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
	.sidecart .pastille-choix span { white-space: nowrap; font-size: 0.71875rem; }
	.sidecart__pied { padding: 13px 16px 15px; }
	.sidecart__sous-total strong, .sidecart__sous-total .amount { font-size: 1.4375rem; }
	.sidecart__cta { flex-direction: column-reverse; }
	.sidecart .sidecart__cta a.button { flex: none; width: 100%; padding: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	.sc-feuilles, .sc-ligne__halo { display: none; }
	.sc-ligne.is-frais { animation: none; }
}