/* Lot L20 — Commissions et satisfaction (écran gérant/vendeur) et questionnaire public /s/:jeton.
   Palette existante seulement (identite.css). */
.l20 { display: grid; gap:var(--ap-e3); }
.l20-tete h1 { margin: 0; }
.l20-filtres { display: flex; flex-wrap: wrap; align-items: end; gap:var(--ap-e2); }
.l20-champ { display: flex; flex-direction: column; gap: 4px; font-size:var(--ap-t-s); color: hsl(var(--muted-foreground)); min-width: 0; }
.l20-champ input, .l20-champ select { font: inherit; font-size:var(--ap-t-m); color: hsl(var(--foreground)); padding:7px var(--ap-e2); border: 1px solid hsl(var(--bord)); border-radius:var(--ap-r-s); background: hsl(var(--card)); min-width: 0; }
.l20-large { margin-bottom: 10px; }
.l20-csv { margin-left: auto; text-decoration: none; }
.l20-bande { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:var(--ap-e2); }
.l20-kpi { display: grid; gap: 2px; padding:var(--ap-e3) var(--ap-e3); border: 1px solid hsl(var(--bord)); border-radius:var(--ap-r-l); background: hsl(var(--card)); }
.l20-kpi span { font-size:var(--ap-t-s); color: hsl(var(--muted-foreground)); }
.l20-kpi strong { font-size:var(--ap-t-titre); letter-spacing: -.3px; }
.l20-kpi small { font-size:var(--ap-t-s); color: hsl(var(--muted-foreground)); }
.l20-kpi-fort { border-color: hsl(var(--success-trait)); background: hsl(var(--success-doux)); }
.l20-kpi-danger { border-color: hsl(var(--destructive-trait)); background: hsl(var(--destructive-doux)); }
.l20-kpi-ambre { border-color: hsl(var(--warning-trait)); background: hsl(var(--warning-doux)); }
.l20-onglets { margin-top: 4px; }
.l20-toast { margin: 0; padding:var(--ap-e2) var(--ap-e3); border-radius:var(--ap-r-m); background: hsl(var(--success-doux)); color: hsl(var(--success-fort)); font-size:var(--ap-t-m); }
.l20-alerte { padding:var(--ap-e2) var(--ap-e3); border: 1px solid hsl(var(--destructive-trait)); border-radius:var(--ap-r-l); background: hsl(var(--destructive-doux)); color: hsl(var(--destructive-fort)); }
.l20-alerte p { margin: 4px 0 0; font-size:var(--ap-t-m); }
.l20-surtitre { margin: 0 0 8px; font-size:var(--ap-t-s); font-weight:var(--ap-g-titre); text-transform: uppercase; letter-spacing: .4px; color: hsl(var(--muted-foreground)); }
.l20-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap:var(--ap-e2); margin-bottom: 10px; }
.l20-calcule { font-size:var(--ap-t-xl); font-weight:var(--ap-g-chiffre); color: hsl(var(--foreground)); padding: 7px 0; }
.l20-avertir { margin: 0 0 8px; font-size:var(--ap-t-m); color: hsl(var(--warning-fort)); }
.l20-table-cadre { border: 1px solid hsl(var(--bord)); border-radius:var(--ap-r-l); background: hsl(var(--card)); overflow-x: auto; }
.l20-table-tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap:var(--ap-e2); padding:var(--ap-e2) var(--ap-e3); font-size:var(--ap-t-s); color: hsl(var(--muted-foreground)); border-bottom: 1px solid hsl(var(--bord)); }
.l20-legende { display: inline-flex; align-items: center; gap: 6px; }
.l20-puce-cd { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: hsl(var(--primary) / .18); border: 1px solid hsl(var(--primary) / .4); }
.l20-table { width: 100%; border-collapse: collapse; font-size:var(--ap-t-m); }
.l20-table th { text-align: left; font-size:var(--ap-t-xs); font-weight:var(--ap-g-titre); text-transform: uppercase; letter-spacing: .3px; color: hsl(var(--muted-foreground)); padding:var(--ap-e2) var(--ap-e2); border-bottom: 1px solid hsl(var(--bord)); white-space: nowrap; }
.l20-table td { padding:var(--ap-e2) var(--ap-e2); border-bottom: 1px solid hsl(var(--bord) / .6); vertical-align: top; }
.l20-table tr:last-child td { border-bottom: 0; }
.l20-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.l20-vide { text-align: center; padding:var(--ap-e4); }
.l20-cd td { background: hsl(var(--primary) / .06); }
.l20-attente { color: hsl(var(--muted-foreground)); font-style: italic; }
.l20-mini { font: inherit; font-size:var(--ap-t-s); padding: 3px 6px; border: 1px solid hsl(var(--bord)); border-radius:var(--ap-r-s); background: hsl(var(--card)); max-width: 170px; }
.l20-recue { display: inline-flex; align-items: center; gap: 4px; font-size:var(--ap-t-s); white-space: nowrap; }
.l20-actions { text-align: right; white-space: nowrap; }
.l20-confirmer { display: inline-flex; gap: 4px; }
.l20-clos { font-size:var(--ap-t-xs); color: hsl(var(--muted-foreground)); }
.l20-note { font-size:var(--ap-t-s); margin: 0; }
.l20-recap { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap:var(--ap-e2); }
.l20-baremes input.l20-bareme { width: 80px; font: inherit; font-size:var(--ap-t-m); text-align: right; padding: 4px 6px; border: 1px solid hsl(var(--bord)); border-radius:var(--ap-r-s); }
.l20-bloc { display: block; }
.l20-negative td { background: hsl(var(--destructive-doux) / .6); }
.l20-note-forte { font-weight:var(--ap-g-titre); }
.l20-note-basse { color: hsl(var(--destructive-fort)); font-weight:var(--ap-g-titre); }
.l20-statut { font-size:var(--ap-t-s); }
.l20-remarques-cel { max-width: 320px; }
.l20-lien-commerce { margin-left: auto; font-size:var(--ap-t-m); font-weight:var(--ap-g-titre); color: hsl(var(--primary)); text-decoration: none; }

/* Questionnaire public */
.l20-entete h1 { margin-bottom: 4px; }
.l20-detail, .l20-globale, .l20-remarques { display: grid; gap:var(--ap-e2); padding:var(--ap-e3); border: 1px solid hsl(var(--bord)); border-radius:var(--ap-r-l); background: hsl(var(--card)); }
.l20-globale { border: 2px solid hsl(var(--primary) / .5); }
.l20-remarques-bas { border-color: hsl(var(--warning-trait)); background: hsl(var(--warning-doux)); }
.l20-question { display: grid; gap: 4px; padding-bottom:var(--ap-e2); border-bottom: 1px solid hsl(var(--bord) / .6); }
.l20-question:last-child { border-bottom: 0; padding-bottom: 0; }
.l20-question h2, .l20-globale h2 { margin: 0; font-size:var(--ap-t-xl); }
.l20-etoiles { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.l20-etoile { font: inherit; font-size:var(--ap-t-chiffre); line-height: 1; padding: 2px; border: 0; background: none; color: hsl(var(--bord)); cursor: pointer; min-width: 40px; min-height: 40px; }
.l20-etoile.pleine { color: hsl(var(--warning)); }
.l20-etoile:focus-visible { outline: 2px solid hsl(var(--primary)); border-radius:var(--ap-r-s); }
.l20-etoiles-grandes .l20-etoile { font-size: 40px; min-width: 52px; min-height: 52px; }
.l20-cran { margin-left: 6px; font-size:var(--ap-t-m); font-weight:var(--ap-g-titre); color: hsl(var(--muted-foreground)); }
.l20-precision textarea, .l20-remarques textarea { width: 100%; box-sizing: border-box; }
.l20-anonyme { font-size:var(--ap-t-m); }
.l20-envoi { display: grid; gap: 6px; justify-items: start; }
.l20-merci { justify-items: center; text-align: center; }
.l20-coche { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font-size:var(--ap-t-chiffre); color: hsl(var(--success-fort)); background: hsl(var(--success-doux)); }
.l20-avis { display: grid; gap:var(--ap-e2); justify-items: center; padding:var(--ap-e4); border: 1px solid hsl(var(--bord)); border-radius:var(--ap-r-l); background: hsl(var(--card)); width: 100%; box-sizing: border-box; }
.l20-avis p { margin: 0; font-weight:var(--ap-g-titre); }
.l20-avis-etoiles { color: hsl(var(--warning)); font-size:var(--ap-t-titre); letter-spacing: 2px; }
.l20-avis-bouton { display: inline-block; padding:var(--ap-e2) var(--ap-e4); border-radius:var(--ap-r-s); background: hsl(var(--primary)); color: #fff; font-weight:var(--ap-g-titre); text-decoration: none; }
.l20-avis small { color: hsl(var(--muted-foreground)); }

@media (max-width: 760px) {
  .l20-filtres { align-items: stretch; }
  .l20-csv { margin-left: 0; }
  .l20-table thead { display: none; }
  .l20-table tr { display: grid; grid-template-columns: 1fr 1fr; gap:2px var(--ap-e2); padding:var(--ap-e2) var(--ap-e3); border-bottom: 1px solid hsl(var(--bord)); }
  .l20-table td { padding: 2px 0; border: 0; }
  .l20-table td[data-label]::before { content: attr(data-label); display: block; font-size: 10px; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
  .l20-num { text-align: left; }
  .l20-actions { grid-column: 1 / -1; text-align: left; }
}