/* Scène « La commande livrée en deux fois » — Ventes. À plat : traits, aplats, aucune ombre. Classes préfixées rq-. */
.rq-commande, .rq-vides, .rq-vide, .rq-reliquat, .rq-liv, .rq-fact, .rq-colis, .rq-case { position: absolute; left: 0; top: 0; }

/* La commande */
.rq-commande { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr; align-items: end; row-gap: 3px; padding: 13px 14px 11px; border-radius: var(--r-2); background: var(--surface); border: 1px solid var(--line-fort); white-space: nowrap; opacity: 0; will-change: transform, opacity; }
/* Soldée : le contour de la commande passe à l’accent, en trait franc (le second pixel est un filet intérieur : rien ne se décale) */
.rq-commande.solde { border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: -2px; }
.rq-titre { grid-column: 1 / -1; font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.rq-client { grid-column: 1 / -1; font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.2; }
/* Le compte de ce qui est livré : un chiffre clé, il se lit d’abord */
.rq-statut { font-size: 12.5px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; line-height: 24px; }
.rq-statut b { margin-left: 2px; font-size: 17px; font-weight: 700; color: var(--ink); }
.rq-commande.solde .rq-statut b { color: var(--accent-texte); }
/* Temps fort : « Soldée », en aplat ; la pastille arrive puis bat une fois (scale écrit par le JS) */
.rq-solde { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px 0 7px; border-radius: var(--r-pilule); background: var(--accent-fonce); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; opacity: 0; transform-origin: 100% 50%; will-change: transform, opacity; }
.rq-solde svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 14; }

/* Les emplacements de la grille, visibles une fois les colis partis */
.rq-vides { opacity: 0; }
.rq-vide { border: 1px dashed var(--line-fort); border-radius: 7px; }

/* Un colis : un carton vu de face, son rabat et son ruban adhésif */
.rq-colis { border-radius: 8px; background: var(--surface); border: 2px solid var(--ink); opacity: 0; will-change: transform, opacity; }
.rq-colis::before { content: ""; position: absolute; left: 50%; top: 0; width: 24%; height: 50%; margin-left: -12%; border-radius: 0 0 2px 2px; background: var(--line-fort); }
.rq-colis::after { content: ""; position: absolute; left: 0; right: 0; top: 32%; height: 2px; background: var(--ink); }
/* Ce qui reste dû : en accent */
.rq-colis.reste { border-color: var(--accent); }
.rq-colis.reste::before, .rq-colis.reste::after { background: var(--accent); }

/* Le reliquat : un cadre et une étiquette nette, à cheval sur un bord (en bas sur bureau, en haut sur petit écran) */
.rq-reliquat { border: 2px solid var(--accent); border-radius: 14px; opacity: 0; will-change: transform, opacity; }
.rq-etiq { position: absolute; left: 50%; top: 100%; transform: translate(-50%, -50%); height: 30px; padding: 0 14px; border-radius: var(--r-pilule); background: var(--accent-fonce); color: #fff; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 30px; white-space: nowrap; }
/* Le chiffre du reliquat : c’est lui qu’on lit d’abord */
.rq-etiq b { margin-left: 1px; font-size: 19px; font-weight: 700; }

/* Une livraison : son titre, son compte, et la rangée où les colis se posent */
.rq-liv { border-radius: var(--r-2); background: var(--surface); border: 1px solid var(--line-fort); white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.rq-liv b { position: absolute; left: 13px; top: 12px; font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.rq-liv span { position: absolute; right: 13px; top: 11px; font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.3; }
.rq-case { border: 1px dashed var(--line-fort); border-radius: 5px; }
/* La livraison annoncée : en pointillé tant qu’aucun colis n’y est posé */
.rq-liv.attente { background: transparent; border-style: dashed; }
.rq-liv.attente b, .rq-liv.attente span { color: var(--muted); }
.rq-liv.attente span { font-size: 12.5px; font-weight: 600; top: 13px; }

/* La facture, reliée à sa livraison */
.rq-fact { display: flex; align-items: center; gap: 9px; padding: 0 13px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line-fort); font-size: 12.5px; line-height: 1; white-space: nowrap; opacity: 0; will-change: transform, opacity; }
/* Le lien facture → livraison : un trait d’accent, qui remonte sous la livraison (il reste attaché quand la maquette est inclinée) */
.rq-fact::before { content: ""; position: absolute; left: 18px; top: -17px; width: 2px; height: 16px; background: var(--accent); }
.rq-fact b { font-weight: 700; color: var(--ink); }
.rq-fact span { margin-left: auto; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.rq-doc { position: relative; flex: none; width: 11px; height: 14px; border-radius: 2px; border: 1.5px solid var(--accent-texte); }
.rq-doc::before, .rq-doc::after { content: ""; position: absolute; left: 1.5px; right: 1.5px; top: 2px; height: 1.5px; background: var(--accent-texte); }
.rq-doc::after { top: 5.5px; right: 3px; }

/* Relief : les emplacements sont tracés sur le fond ; les factures sortent de sous les livraisons ; la commande et les
   livraisons sont posées ; les colis se déplacent au-dessus ; le cadre du reliquat et son étiquette restent devant les colis. */
.rq-fact { translate: 0 0 calc(6px * var(--relief)); }
.rq-commande, .rq-liv { translate: 0 0 calc(14px * var(--relief)); }
.rq-colis { translate: 0 0 calc(30px * var(--relief)); }
.rq-reliquat { translate: 0 0 calc(36px * var(--relief)); }

/* Petit écran : la commande sur une ligne, des libellés courts, des factures réduites à leur nom */
.rq-compact .rq-commande { display: flex; align-items: center; justify-content: space-between; padding: 0 9px 0 12px; border-radius: 10px; }
.rq-compact .rq-titre { font-size: 12.5px; }
.rq-compact .rq-client, .rq-compact .rq-statut { display: none; }
.rq-compact .rq-solde { height: 24px; font-size: 11.5px; }
.rq-compact .rq-vide { border-radius: 5px; }
.rq-compact .rq-colis { border-radius: 6px; }
.rq-compact .rq-reliquat { border-radius: 11px; }
.rq-compact .rq-etiq { top: 0; height: 22px; padding: 0 10px; font-size: 11.5px; line-height: 22px; }
.rq-compact .rq-etiq b { font-size: 15px; }
.rq-compact .rq-liv { border-radius: 10px; }
.rq-compact .rq-liv b { left: 9px; top: 7px; font-size: 13px; font-variant-numeric: tabular-nums; }
.rq-compact .rq-liv span { display: none; }
.rq-compact .rq-case { border-radius: 4px; }
.rq-compact .rq-fact { gap: 7px; padding: 0 9px; border-radius: 8px; font-size: 11px; }
.rq-compact .rq-fact::before { left: 13px; top: -12px; height: 11px; }
.rq-compact .rq-fact span { display: none; }
.rq-compact .rq-doc { width: 9px; height: 12px; }
.rq-compact .rq-doc::before, .rq-compact .rq-doc::after { left: 1px; right: 1px; top: 1.5px; }
.rq-compact .rq-doc::after { top: 4.5px; right: 2px; }
/* Relief, petit écran : la commande est juste au-dessus de l’étiquette ; colis et reliquat restent plus bas pour ne pas la toucher */
.rq-compact .rq-colis, .rq-compact .rq-reliquat { translate: 0 0 calc(26px * var(--relief)); }