:root{
  --paper:#F4EFE3;
  --ink:#20211D;
  --muted:#6B6A60;
  --accent:#1F4E79;
  --line:#DCD6C7;

  --papier: var(--paper);
  --papier-elevee: color-mix(in srgb, var(--paper) 100%, white 4%);
  --papier-journal: color-mix(in srgb, var(--paper) 92%, var(--ink) 6%);
  --encre: var(--ink);
  --encre-vive: color-mix(in srgb, var(--ink) 88%, black 12%);
  --encre-douce: var(--muted);
  --ligne: var(--line);
  --marque: var(--accent);
  --sur-marque: color-mix(in srgb, var(--accent) 12%, var(--paper) 88%);
  --ombre-marque: color-mix(in srgb, var(--accent) 75%, black 25%);
  --sur-accent: color-mix(in srgb, var(--accent) 14%, var(--paper) 86%);
  --ombre-accent: color-mix(in srgb, var(--accent) 75%, black 25%);
  --surlignage: color-mix(in srgb, var(--accent) 24%, var(--paper) 76%);
  --rayon:8px;
  --rayon-bouton:6px;
  --grain:none;
  --rouge:#a13d2e;
  --sur-rouge:#fbeee9;
  --vert:#2f6a45;
  --sur-vert:#e9f3ec;
}

.marque-app .puce{background:var(--marque)}

/* Boîte mail */
.liste-mails{display:flex;flex-direction:column;gap:.6rem}
.mail-item{display:flex;gap:.8rem;align-items:flex-start;padding:.9rem 1rem;background:var(--papier-elevee);
  border:1.4px solid var(--ligne);border-radius:var(--rayon);cursor:pointer;text-align:left;width:100%;font-family:inherit;color:inherit}
.mail-item:hover{border-color:var(--marque)}
.mail-item .avatar{width:38px;height:38px;border-radius:8px;background:var(--marque);color:var(--sur-marque);
  display:flex;align-items:center;justify-content:center;font-family:"Newsreader",serif;font-weight:600;flex:none}
.mail-item-corps{flex:1;min-width:0}
.mail-item-tete{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline}
.mail-item-tete .expediteur{font-weight:600;color:var(--encre-vive)}
.mail-item-tete .date{font-size:.72rem;color:var(--encre-douce);flex:none}
.mail-item .objet{font-size:.88rem;margin-top:.15rem;display:block}
.mail-item .apercu{font-size:.8rem;color:var(--encre-douce);margin-top:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.etat-mail{display:inline-flex;align-items:center;gap:.3rem;font-size:.68rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;padding:.18rem .5rem;border-radius:5px;margin-top:.4rem}
.badge-urgent{margin-left:.4rem}
.etat-mail.a-traiter{background:var(--surlignage);color:#4a3600}
.etat-mail.analyse{background:#e4ecf3;color:var(--marque)}
.etat-mail.envoye{background:var(--sur-vert);color:var(--vert)}
.badge-urgent{background:var(--sur-rouge);color:var(--rouge);font-size:.68rem;font-weight:700;text-transform:uppercase;
  padding:.15rem .45rem;border-radius:5px;flex:none}

/* Détail mail */
.retour{display:inline-flex;align-items:center;gap:.4rem;background:none;border:none;color:var(--marque);
  font-family:"Source Sans 3",sans-serif;font-weight:600;font-size:.86rem;cursor:pointer;padding:.5rem 0;min-height:44px}
.fiche-mail-entete{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:flex-start}
.fiche-mail-entete h3{margin:0}
.fiche-mail-meta{font-size:.8rem;color:var(--encre-douce);margin-top:.2rem}
.corps-mail{white-space:pre-line;font-size:.94rem;line-height:1.65}
.corps-mail mark{cursor:default}

/* Devis */
table.devis{width:100%;border-collapse:collapse;font-size:.86rem}
table.devis th{text-align:left;font-family:"Source Sans 3",sans-serif;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.04em;color:var(--encre-douce);padding:.5rem .4rem;border-bottom:1.4px solid var(--ligne)}
table.devis td{padding:.55rem .4rem;border-bottom:1px solid var(--ligne);vertical-align:middle}
table.devis td.num{text-align:right;font-variant-numeric:tabular-nums}
table.devis tr.ligne-alerte td{background:var(--sur-rouge)}
table.devis input{font-family:"Source Sans 3",sans-serif;font-size:.86rem;width:100%;border:1.4px solid var(--ligne);
  border-radius:6px;padding:.4rem .45rem;background:var(--papier-elevee);color:var(--encre);min-height:40px}
table.devis input:focus-visible{border-color:var(--marque)}
.ref-cat{font-family:"Source Sans 3",monospace;font-size:.72rem;color:var(--encre-douce)}
.alerte-ligne{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;color:var(--rouge);margin-top:.2rem}
.totaux{margin-left:auto;width:min(320px,100%);display:flex;flex-direction:column;gap:.35rem;font-size:.9rem}
.totaux .l{display:flex;justify-content:space-between}
.totaux .l.total{font-weight:700;font-size:1.05rem;color:var(--encre-vive);border-top:1.4px solid var(--ligne);padding-top:.5rem}
.validation{display:flex;align-items:flex-start;gap:.6rem;padding:.9rem;border:1.6px dashed var(--marque);border-radius:var(--rayon);
  background:#eef3f8}
.validation input[type=checkbox]{width:20px;height:20px;margin-top:.15rem;accent-color:var(--marque);flex:none}
.actions-devis{display:flex;gap:.7rem;flex-wrap:wrap}
.deja-envoye{display:flex;align-items:center;gap:.6rem;color:var(--vert);font-weight:600;padding:.9rem;background:var(--sur-vert);
  border-radius:var(--rayon)}

@media (max-width:640px){
  .fiche-mail-entete{flex-direction:column}
  .totaux{width:100%}
  table.devis thead{display:none}
  table.devis, table.devis tbody, table.devis tr, table.devis td{display:block;width:100%}
  table.devis tr{border-bottom:1.4px solid var(--ligne);padding:.6rem 0}
  table.devis td{border-bottom:none;padding:.25rem 0;display:flex;justify-content:space-between;align-items:center;gap:.6rem}
  table.devis td.num{text-align:right}
  table.devis td::before{content:attr(data-label);font-size:.68rem;text-transform:uppercase;color:var(--encre-douce);flex:none}
  table.devis td[data-label=""]::before{display:none}
}