/* SAV BuyLive — interface « logiciel » sur grand écran, application sur téléphone. */
:root {
  --fond: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --survol: #f1f5f9;
  --selection: #e8f0fe;
  --texte: #0f172a;
  --doux: #64748b;
  --tres-doux: #94a3b8;
  --bord: #e2e8f0;
  --accent: #2563eb;
  --accent-doux: #dbeafe;
  --accent-texte: #ffffff;
  --vert: #059669; --vert-doux: #d1fae5;
  --orange: #d97706; --orange-doux: #fef3c7;
  --rouge: #dc2626; --rouge-doux: #fee2e2;
  --violet: #7c3aed; --violet-doux: #ede9fe;
  --laterale: #0f172a; --laterale-texte: #cbd5e1; --laterale-actif: #1e293b;
  --rayon: 10px;
  --ombre: 0 1px 2px rgba(15, 23, 42, .05), 0 2px 8px rgba(15, 23, 42, .04);
  --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0b1120; --surface: #111827; --surface-2: #0f172a; --survol: #1e293b; --selection: #1e3a8a55;
    --texte: #e5e7eb; --doux: #94a3b8; --tres-doux: #64748b; --bord: #1f2937;
    --accent: #3b82f6; --accent-doux: #1e3a8a66;
    --vert-doux: #064e3b88; --orange-doux: #78350f88; --rouge-doux: #7f1d1d88; --violet-doux: #4c1d9588;
    --laterale: #030712; --laterale-actif: #111827; --ombre: none;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--fond); color: var(--texte); font: 14px/1.45 var(--police); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; }
h2 { font-size: 15px; margin: 18px 0 8px; }
h3 { font-size: 13px; margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .04em; color: var(--doux); }

/* ---------- Coquille ---------- */
.coquille { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
.zone { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }
.entete { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; min-height: 56px;
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px; background: var(--surface); border-bottom: 1px solid var(--bord); }
.entete h1 { font-size: 17px; margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actions-entete { display: flex; gap: 8px; align-items: center; }
main { flex: 1; min-width: 0; padding: 16px; }
.laterale { background: var(--laterale); color: var(--laterale-texte); display: flex; flex-direction: column; padding: 14px 10px; position: sticky; top: 0; height: 100vh; }
.marque { display: flex; gap: 10px; align-items: center; padding: 4px 8px 16px; }
.marque img { width: 34px; height: 34px; border-radius: 8px; }
.marque b { display: block; color: #fff; font-size: 15px; }
.marque span { font-size: 12px; color: #94a3b8; }
.menu { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.menu .groupe { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #64748b; padding: 14px 10px 4px; }
.menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--laterale-texte); text-decoration: none; font-weight: 500; }
.menu a:hover { background: var(--laterale-actif); color: #fff; }
.menu a.actif { background: var(--accent); color: #fff; }
.menu a .compte { margin-left: auto; font-size: 11px; font-weight: 700; background: #334155; color: #fff; border-radius: 10px; padding: 1px 7px; }
.menu a.actif .compte { background: rgba(255,255,255,.25); }
.menu a .compte.alerte { background: var(--rouge); }
.pied-laterale { display: flex; gap: 6px; padding-top: 10px; border-top: 1px solid #1e293b; }
.lien-discret { background: transparent; border: 0; color: #94a3b8; padding: 8px; border-radius: 8px; cursor: pointer; }
.lien-discret:hover { background: var(--laterale-actif); color: #fff; }

/* Téléphone : barre d'onglets en bas */
.onglets { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; display: flex; background: var(--surface); border-top: 1px solid var(--bord); padding-bottom: env(safe-area-inset-bottom); }
.onglets a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 6px; color: var(--doux); text-decoration: none; font-size: 11px; position: relative; }
.onglets a svg.i { width: 22px; height: 22px; }
.onglets a.actif { color: var(--accent); font-weight: 700; }
.pastille { position: absolute; top: 3px; left: 56%; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--rouge); color: #fff; font-size: 10px; line-height: 17px; text-align: center; font-weight: 700; }
@media (max-width: 1023px) { body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } .laterale { display: none; } }

@media (min-width: 1024px) {
  .coquille { grid-template-columns: 236px 1fr; }
  .onglets { display: none !important; }
  main { padding: 20px 24px; }
  .entete { padding: 10px 24px; }
}

/* ---------- Éléments communs ---------- */
.carte { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px 16px; margin: 0 0 12px; box-shadow: var(--ombre); }
.carte > h2:first-child, .carte > h3:first-child { margin-top: 0; }
.ligne { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.doux { color: var(--doux); }
.petit { font-size: 12.5px; }
.gras { font-weight: 600; }
.coupe { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pre { white-space: pre-wrap; word-break: break-word; }
.vide { text-align: center; color: var(--doux); padding: 40px 10px; }
.aide { font-size: 12.5px; color: var(--doux); margin: 4px 0 0; }
.etat-ok { color: var(--vert); font-weight: 600; }
.etat-manque { color: var(--orange); font-weight: 600; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: var(--survol); color: var(--doux); white-space: nowrap; }
.badge.a_valider, .badge.moyen { background: var(--orange-doux); color: var(--orange); }
.badge.envoye, .badge.livre, .badge.bon { background: var(--vert-doux); color: var(--vert); }
.badge.erreur, .badge.probleme, .badge.retour_expediteur, .badge.haute, .badge.faible-conf { background: var(--rouge-doux); color: var(--rouge); }
.badge.analyse, .badge.nouveau, .badge.en_transit, .badge.pas_encore_pris_en_charge { background: var(--accent-doux); color: var(--accent); }
.badge.brouillon, .badge.humain { background: var(--violet-doux); color: var(--violet); }
button, .bouton { appearance: none; border: 1px solid var(--bord); background: var(--surface); color: var(--texte); border-radius: 8px;
  padding: 7px 12px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
button:hover, .bouton:hover { background: var(--survol); text-decoration: none; }
button.principal, .bouton.principal { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); }
button.principal:hover { filter: brightness(1.08); }
button.danger { color: var(--rouge); }
button.actif { background: var(--texte); color: var(--surface); border-color: var(--texte); }
button:disabled { opacity: .55; cursor: wait; }
.icone-seule { padding: 7px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
input, textarea, select { width: 100%; font: inherit; color: var(--texte); background: var(--surface); border: 1px solid var(--bord); border-radius: 8px; padding: 8px 10px; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent-doux); border-color: var(--accent); }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
textarea.grand { min-height: 300px; }
.case { display: flex; gap: 8px; align-items: center; font-weight: 400; margin: 6px 0; cursor: pointer; }
.jauge { height: 5px; border-radius: 3px; background: var(--bord); overflow: hidden; margin-top: 4px; }
.jauge > i { display: block; height: 100%; }
.chronologie { list-style: none; margin: 8px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--bord); }
.chronologie li { position: relative; padding: 0 0 10px 8px; }
.chronologie li::before { content: ""; position: absolute; left: -21px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--bord); }
.chronologie li:first-child::before { background: var(--accent); }
details summary { cursor: pointer; font-weight: 600; }
.grille2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .grille2 { grid-template-columns: 1fr; } }
kbd { font: 11px/1 ui-monospace, monospace; padding: 2px 5px; border: 1px solid var(--bord); border-bottom-width: 2px; border-radius: 4px; background: var(--surface-2); }
#message-flash { position: fixed; right: 20px; bottom: 20px; z-index: 100; max-width: 420px; background: #0f172a; color: #fff; padding: 12px 14px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
#message-flash.erreur { background: var(--rouge); }
@media (max-width: 1023px) { #message-flash { left: 16px; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); } }
dialog { border: 1px solid var(--bord); border-radius: 12px; padding: 0; width: min(560px, calc(100vw - 32px)); background: var(--surface); color: var(--texte); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
dialog::backdrop { background: rgba(15, 23, 42, .45); }
#fenetre-contenu { padding: 18px 20px; }
.connexion { max-width: 380px; margin: 60px auto; }

/* ---------- Tableaux (colis, tickets, modèles) ---------- */
.tableau { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden; }
.tableau th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--doux); background: var(--surface-2); padding: 9px 12px; border-bottom: 1px solid var(--bord); white-space: nowrap; }
.tableau td { padding: 10px 12px; border-bottom: 1px solid var(--bord); vertical-align: top; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau tr.cliquable { cursor: pointer; }
.tableau tr.cliquable:hover td { background: var(--survol); }
@media (max-width: 800px) {
  .tableau thead { display: none; }
  .tableau, .tableau tbody, .tableau tr, .tableau td { display: block; width: 100%; }
  .tableau tr { border-bottom: 1px solid var(--bord); padding: 8px 0; }
  .tableau td { border: 0; padding: 3px 12px; }
  .tableau td[data-libelle]::before { content: attr(data-libelle) " : "; color: var(--doux); font-size: 12px; }
}

/* ---------- Tableau de bord ---------- */
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tuile { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px 16px; box-shadow: var(--ombre); color: inherit; display: block; }
a.tuile:hover { border-color: var(--accent); text-decoration: none; }
.tuile .valeur { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.tuile .libelle { color: var(--doux); font-size: 12.5px; }
.tuile.alerte .valeur { color: var(--rouge); }
.tuile.attention .valeur { color: var(--orange); }
.histogramme { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding-top: 10px; }
.histogramme .colonne { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; height: 100%; justify-content: flex-end; }
.histogramme .barres { width: 100%; display: flex; flex-direction: column-reverse; border-radius: 4px 4px 0 0; overflow: hidden; }
.histogramme .b-recus { background: var(--accent-doux); }
.histogramme .b-envoyes { background: var(--accent); }
.histogramme .jour { font-size: 10.5px; color: var(--doux); white-space: nowrap; }
.barre-h { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr 36px; gap: 10px; align-items: center; margin: 6px 0; font-size: 13px; }
.barre-h .piste { height: 8px; background: var(--survol); border-radius: 4px; overflow: hidden; }
.barre-h .piste i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.legende { display: flex; gap: 14px; font-size: 12px; color: var(--doux); }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

/* ---------- Espace « Mails » ---------- */
.espace { display: grid; grid-template-columns: 1fr; gap: 0; }
.panneau-liste { display: flex; flex-direction: column; min-width: 0; }
.barre-outils { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.recherche { position: relative; flex: 1 1 240px; min-width: 200px; }
.recherche svg.i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--tres-doux); }
.recherche input { padding-left: 34px; }
.onglets-statut { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.onglets-statut button { border-radius: 99px; padding: 5px 12px; font-size: 12.5px; }
.onglets-statut button .n { font-weight: 700; opacity: .7; }
.panneau-filtres { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 12px 14px; margin-bottom: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 16px; }
.panneau-filtres label { margin-top: 6px; }
.panneau-filtres .cases { max-height: 150px; overflow-y: auto; }
.filtres-actifs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.filtres-actifs button { font-size: 12px; padding: 3px 8px; border-radius: 99px; background: var(--accent-doux); color: var(--accent); border-color: transparent; }
.barre-lot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--accent); color: #fff; border-radius: var(--rayon); padding: 8px 12px; margin-bottom: 10px; }
.barre-lot button { background: rgba(255,255,255,.15); border-color: transparent; color: #fff; }
.barre-lot button:hover { background: rgba(255,255,255,.28); }
.liste { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden; }
.element { display: grid; grid-template-columns: 22px 34px 1fr; gap: 10px; padding: 11px 12px; border-bottom: 1px solid var(--bord); cursor: pointer; color: inherit; text-decoration: none; position: relative; }
.element:hover { background: var(--survol); text-decoration: none; }
.element.courant { background: var(--selection); box-shadow: inset 3px 0 0 var(--accent); }
.element.non-lu .nom { font-weight: 700; }
.element.non-lu::after { content: ""; position: absolute; left: 4px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--accent); }
.element .avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 13px; }
.element .haut { display: flex; justify-content: space-between; gap: 8px; }
.element .nom { font-weight: 600; }
.element .date { color: var(--tres-doux); font-size: 12px; white-space: nowrap; }
.element .sujet { font-size: 13px; }
.element .resume { color: var(--doux); font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.element .etiquettes { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.sentinelle { padding: 16px; text-align: center; color: var(--doux); font-size: 12.5px; }
.compteur-liste { font-size: 12px; color: var(--doux); margin: 0 0 6px 2px; }

.panneau-detail { min-width: 0; }
.detail-vide { display: grid; place-items: center; height: 60vh; color: var(--tres-doux); text-align: center; }
.detail-entete { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.detail-entete h2 { margin: 0 0 2px; font-size: 18px; }
.detail-colonnes { display: grid; grid-template-columns: 1fr; gap: 12px; }
.message-client { }
.commande { border-top: 1px solid var(--bord); padding: 8px 0; }
.commande:first-of-type { border-top: 0; padding-top: 0; }
.barre-reponse { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.barre-reponse select { width: auto; }
.historique a { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--bord); color: inherit; }
.historique a:first-child { border-top: 0; }

@media (min-width: 1024px) {
  .espace { grid-template-columns: var(--largeur-liste, 560px) 12px minmax(0, 1fr); gap: 0; height: calc(100vh - 56px - 40px); }
  .panneau-liste { height: 100%; min-height: 0; }
  .liste { flex: 1; min-height: 0; overflow-y: auto; }
  .panneau-detail { height: 100%; overflow-y: auto; padding-right: 4px; }
  .espace.mobile-detail .panneau-liste { display: flex; }
}
@media (min-width: 1400px) {
  .detail-colonnes { grid-template-columns: minmax(0, 1fr) 12px var(--largeur-droite, 440px); gap: 0; }
  .detail-colonnes > .poignee { display: block; }
}
@media (max-width: 1023px) {
  .espace.mobile-detail .panneau-liste { display: none; }
  .espace:not(.mobile-detail) .panneau-detail { display: none; }
}
@media (max-width: 700px) { .masquer-mobile { display: none; } .entete .actions-entete button span { display: none; } }
.detail-colonnes > div, .panneau-detail, .espace > section { min-width: 0; }
.detail-entete > div:first-child { flex: 1 1 220px; }

/* Zone de réponse : s'agrandit avec le texte, sans barre de défilement. */
textarea.auto { overflow: hidden; resize: none; min-height: 160px; }

/* Séparations déplaçables entre les colonnes (ordinateur) */
.poignee { display: none; cursor: col-resize; position: relative; user-select: none; touch-action: none; }
.poignee::after { content: ""; position: absolute; top: 0; bottom: 0; left: 5px; width: 2px; border-radius: 1px; background: transparent; transition: background .15s; }
.poignee:hover::after, .poignee.active::after { background: var(--accent); }
@media (min-width: 1024px) { .espace > .poignee { display: block; } }
body.redimension { cursor: col-resize; user-select: none; }
.poignee { z-index: 5; }
@media (min-width: 1024px) { .panneau-liste { overflow: hidden; } .panneau-liste > * { max-width: 100%; } }

/* Vignettes, étiquettes et alertes client */
.vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; margin-top: 10px; }
.vignette { background: var(--surface-2); border: 1px solid var(--bord); border-radius: 8px; padding: 8px 10px; }
.vignette b { display: block; font-size: 18px; }
.vignette span { font-size: 11.5px; color: var(--doux); }
.vignette.attention b { color: var(--orange); }
.vignette.alerte b { color: var(--rouge); }
.badge.etiquette { background: var(--violet-doux); color: var(--violet); }
.badge.etiquette svg.i { width: 12px; height: 12px; }
.badge.amovible { cursor: pointer; }
.badge.amovible:hover { text-decoration: line-through; }
.badge svg.i { width: 13px; height: 13px; }
.alerte-client { display: flex; gap: 10px; border-radius: 8px; padding: 10px 12px; margin-top: 10px; font-size: 13px; }
.alerte-client ul { margin: 4px 0 0; padding-left: 18px; }
.alerte-client.abus_probable { background: var(--rouge-doux); color: var(--rouge); }
.alerte-client.a_surveiller { background: var(--orange-doux); color: var(--orange); }
.texte-tache { min-height: 90px; }

/* Assistant IA de la fiche */
.assistant h3 svg.i { width: 15px; height: 15px; }
.fil-assistant { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; margin: 10px 0 4px; }
.fil-assistant:empty { display: none; }
.bulle { max-width: 88%; padding: 7px 11px; border-radius: 12px; font-size: 13px; white-space: pre-wrap; }
.bulle.operateur { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.bulle.ia { align-self: flex-start; background: var(--survol); border-bottom-left-radius: 4px; }
.bulle.attente { color: var(--doux); font-style: italic; }
.lien-annuler { background: none; border: 0; padding: 0; color: var(--accent); font-size: 12px; text-decoration: underline; }
.suggestions-assistant { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.puce-suggestion { font-size: 12px; padding: 4px 10px; border-radius: 99px; font-weight: 500; }
.saisie-assistant { display: flex; gap: 6px; align-items: flex-end; }
.saisie-assistant textarea { min-height: 42px; resize: none; }
#micro.enregistre { background: var(--rouge); border-color: var(--rouge); color: #fff; animation: pulsation 1.2s infinite; }
@keyframes pulsation { 50% { box-shadow: 0 0 0 6px var(--rouge-doux); } }
.solution { border: 1px solid var(--bord); border-radius: 8px; padding: 10px 12px; margin-top: 8px; }
.solution.recommandee { border-color: var(--vert); }
textarea.surbrillance { outline: 2px solid var(--vert); transition: outline .3s; }

/* Pièces jointes */
.vignettes-pj { display: flex; flex-wrap: wrap; gap: 8px; }
.pj-image { padding: 0; width: 96px; height: 96px; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.pj-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pj-image:hover { outline: 2px solid var(--accent); }
.pj-fichier { display: flex; gap: 8px; align-items: center; max-width: 260px; padding: 8px 10px; border: 1px solid var(--bord); border-radius: 8px; color: inherit; font-size: 12.5px; }
.pj-fichier > span { display: flex; flex-direction: column; min-width: 0; }
.pj-fichier:hover { border-color: var(--accent); text-decoration: none; }
.apercu-pj { display: grid; place-items: center; background: var(--surface-2); border-radius: 8px; }
.apercu-pj img { max-width: 100%; max-height: 72vh; border-radius: 8px; }
dialog:has(.apercu-pj) { width: min(1000px, calc(100vw - 32px)); }
.pj-envoi { display: flex; flex-direction: column; gap: 4px; width: 150px; padding: 6px; border: 1px solid var(--bord); border-radius: 8px; }
.pj-envoi img { width: 100%; height: 90px; object-fit: cover; object-position: top; border-radius: 6px; display: block; }

/* Conversation complète avec le client (messages précédents) */
.conversation { margin-top: 12px; }
.bloc-conversation > summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--accent); display: flex; align-items: center; gap: 6px; }
.fil-conversation { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.bulle-mail { border: 1px solid var(--bord); border-radius: 10px; padding: 8px 12px; max-width: 92%; }
.bulle-mail.client { align-self: flex-start; background: var(--surface); }
.bulle-mail.nous { align-self: flex-end; background: var(--accent-doux); }
.bulle-mail > summary { cursor: pointer; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bulle-mail > summary .i { width: 12px; height: 12px; }