/* ═══════════════════════════════════════════════════════════════════════════
   LE PANIER EN PANNEAU LATERAL — vitrine de la boutique.

   Adapte le 2026-10-01 du composant « interactive-checkout » colle par Ange
   (docs/design/inspiration/interactive-checkout/). Rien de sa pile n'existe
   ici : ni Tailwind, ni framer-motion, ni lucide, ni NumberFlow. On garde
   l'EXPERIENCE — panneau, quantites fluides, total qui roule chiffre par
   chiffre, pastille — et on la refait en CSS et Web Animations, sur la charte
   (tokens.css : sombre, emeraude, ocre).

   Les couleurs passent par les jetons, avec un repli : la vitrine charge
   tokens.css, mais un panneau qui perdrait sa feuille de jetons ne doit pas
   tomber en texte noir sur fond noir.
   ═══════════════════════════════════════════════════════════════════════════ */

.apt-racine{
  --apt-fond:var(--ap-ink,#0B0F14);
  --apt-surface:var(--ap-surface,#12181F);
  --apt-surface-2:var(--ap-surface-2,#1A222C);
  --apt-ligne:var(--ap-line,rgba(255,255,255,.09));
  --apt-ligne-2:var(--ap-line-2,rgba(255,255,255,.14));
  --apt-texte:var(--ap-text,#F3F6F4);
  --apt-doux:var(--ap-muted,#9FAAA4);
  --apt-vert:var(--ap-emerald,#10B981);
  --apt-vert-survol:var(--ap-emerald-hover,#28C996);
  --apt-vert-doux:var(--ap-emerald-soft,rgba(16,185,129,.12));
  --apt-ocre:var(--ap-ocre,#E08D3C);
  --apt-ocre-doux:var(--ap-ocre-soft,rgba(224,141,60,.12));
  --apt-alerte:var(--ap-danger,#F87171);
  --apt-avert:var(--ap-warn,#FBBF24);
  --apt-sans:var(--ap-sans,"DM Sans",system-ui,sans-serif);
  --apt-serif:var(--ap-serif,"DM Serif Display",Georgia,serif);
  --apt-courbe:cubic-bezier(.2,.8,.2,1);
  font-family:var(--apt-sans);
}

/* `hidden` doit gagner sur les `display:flex` de ce fichier : sans cette
   ligne, un bloc « cache » par le script reste affiche. */
.apt-racine [hidden]{display:none!important}

/* Texte lu par les lecteurs d'ecran seulement (le total annonce, par ex.). */
.apt-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.apt-racine svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Focus clavier visible partout, WCAG 2.4.7. */
.apt-racine :focus-visible{outline:2px solid var(--apt-vert);outline-offset:3px;border-radius:10px}

/* ── LE BOUTON FLOTTANT ET SA PASTILLE ─────────────────────────────────── */
.apt-fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:900;
  display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 18px 0 16px;
  border-radius:999px;border:1px solid var(--apt-ligne-2);background:var(--apt-surface);color:var(--apt-texte);
  font:700 15px/1 var(--apt-sans);cursor:pointer;box-shadow:0 18px 40px -16px rgba(0,0,0,.8);
  transition:transform .18s var(--apt-courbe),border-color .18s}
.apt-fab:hover{border-color:var(--apt-vert);transform:translateY(-2px)}
.apt-fab[hidden]{display:none}
.apt-pastille{min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--apt-ocre);color:#1c0f02;
  font:800 13px/24px var(--apt-sans);text-align:center;font-variant-numeric:tabular-nums}

/* ── LE VOILE ET LE PANNEAU ────────────────────────────────────────────── */
.apt-voile{position:fixed;inset:0;z-index:1200;background:rgba(3,6,9,.62);opacity:0;transition:opacity .28s ease;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.apt-voile[hidden]{display:none}
.apt-ouvert .apt-voile{opacity:1}

.apt-panneau{position:fixed;top:0;right:0;bottom:0;z-index:1201;width:min(420px,100vw);
  display:flex;flex-direction:column;background:var(--apt-fond);border-left:1px solid var(--apt-ligne-2);
  color:var(--apt-texte);transform:translateX(100%);transition:transform .34s var(--apt-courbe);
  box-shadow:-30px 0 60px -30px rgba(0,0,0,.8)}
.apt-panneau[hidden]{display:none}
.apt-ouvert .apt-panneau{transform:none}

.apt-tete{display:flex;align-items:center;gap:10px;padding:14px 12px 14px 18px;border-bottom:1px solid var(--apt-ligne)}
.apt-tete svg{color:var(--apt-vert)}
.apt-tete h2{flex:1;font:400 22px/1.2 var(--apt-serif);margin:0}
.apt-compte{font:600 14px var(--apt-sans);color:var(--apt-doux);margin-left:4px}

/* Toutes les commandes font 44 px au moins : c'est un doigt, pas un curseur. */
.apt-icone{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
  border-radius:12px;border:1px solid transparent;background:transparent;color:var(--apt-doux);cursor:pointer;
  transition:background .15s,color .15s,border-color .15s,transform .12s}
.apt-icone:hover{background:var(--apt-surface-2);color:var(--apt-texte)}
.apt-icone:active{transform:scale(.94)}
.apt-icone[disabled]{opacity:.35;cursor:not-allowed;transform:none}
.apt-icone svg{width:18px;height:18px}

.apt-lignes{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 14px 6px;margin:0;list-style:none}
.apt-ligne{display:flex;gap:12px;padding:10px;margin-bottom:10px;border-radius:14px;background:var(--apt-surface);
  border:1px solid var(--apt-ligne);transition:border-color .18s}
.apt-ligne:hover{border-color:var(--apt-ligne-2)}
.apt-ligne.apt-indispo{border-color:rgba(248,113,113,.35)}
.apt-vignette{width:64px;height:64px;flex:none;border-radius:10px;background:var(--apt-surface-2);object-fit:cover;
  display:flex;align-items:center;justify-content:center;color:var(--apt-doux)}
.apt-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.apt-haut{display:flex;align-items:flex-start;gap:6px}
.apt-nom{flex:1;min-width:0;font-weight:700;font-size:15px;line-height:1.3;color:var(--apt-texte);text-decoration:none;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding-top:4px}
.apt-nom:hover{text-decoration:underline}
.apt-meta{font-size:13px;color:var(--apt-doux)}
.apt-bas{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
.apt-qte{display:inline-flex;align-items:center;border:1px solid var(--apt-ligne-2);border-radius:12px;background:var(--apt-fond)}
.apt-qte .apt-icone{border-radius:11px}
.apt-qte-n{min-width:30px;text-align:center;font:700 15px var(--apt-sans);font-variant-numeric:tabular-nums;display:inline-block}

/* ── LE PIED : DESTINATION, TOTAL, COMMANDE ────────────────────────────── */
.apt-pied{border-top:1px solid var(--apt-ligne);padding:14px 18px calc(16px + env(safe-area-inset-bottom,0px));background:var(--apt-fond)}
.apt-champ{display:block;font-size:12.5px;color:var(--apt-doux);margin-bottom:12px}
.apt-champ select{display:block;width:100%;min-height:44px;margin-top:5px;padding:0 12px;border-radius:12px;
  border:1px solid var(--apt-ligne-2);background:var(--apt-surface);color:var(--apt-texte);font:500 15px var(--apt-sans)}
.apt-lig{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--apt-doux);margin-bottom:4px}
.apt-lig b{color:var(--apt-texte);font-weight:600;font-variant-numeric:tabular-nums}
.apt-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:10px;padding-top:10px;border-top:1px solid var(--apt-ligne)}
.apt-total-lbl{font-weight:700;font-size:15px}
.apt-total-lbl small{display:block;font-weight:500;font-size:12px;color:var(--apt-doux)}
.apt-message{font-size:13.5px;color:var(--apt-doux);margin:4px 0 0}
.apt-message.apt-avert{color:var(--apt-avert)}
.apt-message.apt-erreur{color:#FCA5A5}

.apt-commander{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;margin-top:14px;
  border-radius:14px;border:0;background:var(--apt-vert);color:#04110C;font:800 16px var(--apt-sans);text-decoration:none;
  box-shadow:0 14px 30px -14px var(--apt-vert);transition:background .18s,transform .18s}
.apt-commander:hover{background:var(--apt-vert-survol);transform:translateY(-1px)}
.apt-commander[hidden]{display:none}
.apt-note{font-size:12.5px;color:var(--apt-doux);margin:10px 0 0;line-height:1.45}

/* ── LE PANIER VIDE ────────────────────────────────────────────────────── */
.apt-vide{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:48px 24px}
.apt-vide-icone{width:72px;height:72px;border-radius:22px;display:flex;align-items:center;justify-content:center;
  background:var(--apt-vert-doux);color:var(--apt-vert);margin-bottom:6px}
.apt-vide-icone svg{width:32px;height:32px}
.apt-vide strong{font:400 22px var(--apt-serif)}
.apt-vide p{color:var(--apt-doux);font-size:14px;max-width:280px}
.apt-lien-ghost{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;margin-top:6px;border-radius:12px;
  border:1px solid var(--apt-ligne-2);background:transparent;color:var(--apt-texte);font:700 14.5px var(--apt-sans);cursor:pointer}
.apt-lien-ghost:hover{border-color:var(--apt-ocre);color:var(--apt-ocre)}

/* ── LE TOTAL QUI ROULE, CHIFFRE PAR CHIFFRE ───────────────────────────────
   A la maniere de NumberFlow : chaque chiffre est une colonne de 0 a 9 qui
   glisse jusqu'a sa valeur. La colonne des unites et celle des centimes
   bougent chacune de leur cote ; un chiffre qui ne change pas ne bouge pas.
   La hauteur d'une case est 1.2em ; la bande en porte dix. */
.apt-roule{display:inline-flex;align-items:baseline;font:800 22px/1.2 var(--apt-sans);color:#fff;
  font-variant-numeric:tabular-nums;white-space:nowrap;transition:opacity .2s}
.apt-roule.apt-attente{opacity:.45}
.apt-col{display:inline-block;height:1.2em;overflow:hidden;position:relative;vertical-align:bottom}
.apt-bande{display:flex;flex-direction:column;transition:transform .55s var(--apt-courbe)}
.apt-bande span{display:block;height:1.2em;line-height:1.2em;text-align:center}
.apt-sym{display:inline-block}
.apt-sym.apt-espace{width:.28em}

/* ── LE CONFORT DE MOUVEMENT ───────────────────────────────────────────────
   Le script lit aussi cette preference pour ne lancer aucune animation Web
   Animations ; ici on coupe les transitions CSS. Le panier reste entierement
   fonctionnel, il cesse seulement de bouger. */
@media (prefers-reduced-motion:reduce){
  .apt-fab,.apt-voile,.apt-panneau,.apt-bande,.apt-icone,.apt-commander,.apt-roule{transition:none!important}
}

@media (max-width:420px){
  .apt-panneau{border-left:0}
  .apt-fab .apt-fab-lbl{display:none}
  .apt-fab{padding:0 14px}
}