:root{
  --paper:#f5f2ec; --ink:#241f19; --muted:#8c8072; --accent:#b45309; --line:#e4dcce;
  --fond:var(--paper); --texte:var(--ink); --faible:var(--muted); --ligne:var(--line);
  --marque:var(--accent); --sur-marque:#fdf9f3; --sur-accent:#fdf9f3;
  --accent-vif:#c96513;
  --accent-faible:rgba(180,83,9,.1); --accent-ligne:rgba(180,83,9,.36);
  --surface:#ffffff; --doux:#524c3f;
  --ok:#4c7a4a; --ok-fond:#eaf3e7; --ok-ligne:#c9ddc2;
  --attente:#a8752e; --attente-fond:#f8eeda; --attente-ligne:#ecd6a6;
  --alerte:#ab4330; --alerte-fond:#fbe9e4; --alerte-ligne:#efc3b6;
  --ease:cubic-bezier(.2,.8,.3,1);
}

/* signature : bordereau de devis tamponné */
.grille-devis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:12px}
.bordereau{position:relative;background:var(--surface);border:1px solid var(--ligne);border-radius:6px;padding:14px 16px;overflow:hidden}
.bordereau.recommande{border-color:var(--accent-ligne);box-shadow:0 0 0 1px var(--accent-ligne)}
.bordereau .num{font-family:"Plex Sans",sans-serif;font-size:10.5px;color:var(--faible);letter-spacing:.04em}
.bordereau .montant{font-family:"Plex Sans",sans-serif;font-size:26px;font-weight:700;margin:4px 0 2px}
.bordereau .artisan{font-size:13px;font-weight:600}
.bordereau .delai{font-size:12px;color:var(--faible);margin-top:2px}
.tampon{position:absolute;top:10px;right:10px;border:1.6px solid var(--accent);color:var(--accent-vif);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 7px;border-radius:3px;transform:rotate(6deg)}

.fil-messages{display:flex;flex-direction:column;gap:10px;max-height:260px;overflow-y:auto;padding:2px}
.msg{max-width:78%;padding:9px 12px;border-radius:8px;font-size:13px;line-height:1.45}
.msg.moi{align-self:flex-end;background:var(--accent-faible);border:1px solid var(--accent-ligne)}
.msg.autre{align-self:flex-start;background:var(--fond);border:1px solid var(--ligne)}
.msg small{display:block;color:var(--faible);font-size:10.5px;margin-top:3px}

.fiche-demande{border:1px solid var(--ligne);border-radius:6px;background:var(--surface);padding:16px;margin-bottom:12px}
.fiche-demande .tete{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:6px}
.fiche-demande h3{font-size:14.5px}
.fiche-demande .meta{font-size:11.5px;color:var(--faible);margin-top:2px}
.fiche-demande p{font-size:13px;color:var(--doux);margin:8px 0}

.etoiles{color:var(--accent-vif);font-size:14px;letter-spacing:1px}

/* aperçu vivant — écran de connexion */
.av-devis{display:flex;flex-direction:column;gap:12px}
.av-bord{position:relative;background:var(--surface);border:1px solid var(--ligne);border-radius:6px;padding:12px 14px;font-family:"Plex Sans",sans-serif;font-size:10.5px;color:var(--faible);display:flex;flex-direction:column;gap:3px}
.av-bord b{font-family:"Plex Sans",sans-serif;font-size:19px;color:var(--texte);font-weight:700}
.av-tampon{position:absolute;top:10px;right:12px;border:1.4px solid var(--accent);color:var(--accent-vif);font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:3px;transform:rotate(5deg);opacity:0}
.av-hero-actif .av-entrant{animation:avEntrerDevis 1.1s .5s var(--ease) both}
.av-hero-actif .av-entrant .av-tampon{animation:avTamponner 1.1s .5s var(--ease) both}
@keyframes avEntrerDevis{
  0%{opacity:0;transform:translateY(14px)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes avTamponner{
  0%,40%{opacity:0;transform:rotate(5deg) scale(1.6)}
  100%{opacity:1;transform:rotate(5deg) scale(1)}
}
.av-legende{margin-top:14px;font-size:12px;color:var(--faible);text-align:center}
@media(prefers-reduced-motion:reduce){.av-hero-actif .av-entrant,.av-hero-actif .av-entrant .av-tampon{animation:none;opacity:1;transform:none}}