/* ---------------- Facette · onglet « Trame de vente » ----------------
   Tout est rangé sous #vue-trame, sauf la bulle de sélection et le
   message de confirmation, posés sur la page.
   -------------------------------------------------------------------- */

#vue-trame[hidden]{display:none !important}
#vue-trame{
  --tr-dire:rgba(110,58,247,0.16);   --tr-dire-trait:#8B63FF;
  --tr-demander:rgba(255,154,61,0.12); --tr-demander-trait:var(--orange);
  --tr-attention:rgba(244,70,126,0.12); --tr-attention-trait:var(--rose);
  --tr-note:rgba(255,255,255,0.045);  --tr-note-trait:var(--trait-fort);
  margin:22px auto 0;
}

/* ------------------------------ l'en-tête -------------------------- */
.tr-tete{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap}
.tr-sur{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--texte-faible);font-weight:600}
.tr-titre{font-family:var(--display);font-weight:800;font-size:clamp(26px,3.2vw,36px);line-height:1.05;letter-spacing:-0.015em;margin-top:4px}
.tr-meta{font-size:13.5px;color:var(--texte-doux);margin-top:6px;font-variant-numeric:tabular-nums}
.tr-actions{display:flex;gap:8px;flex-wrap:wrap}
.tr-btn{
  padding:10px 16px;border-radius:11px;font-weight:700;font-size:14px;color:#1A0F33;
  background:linear-gradient(135deg,#FFB36B,var(--orange));
}
.tr-btn:hover{filter:brightness(1.06)}
.tr-btn[disabled]{opacity:.6;cursor:default}
.tr-btn-doux{background:rgba(255,255,255,0.07);color:var(--texte);border:1px solid var(--trait-fort)}
.tr-btn-doux:hover{background:rgba(255,255,255,0.11)}
.tr-lien{color:#FFD9B0;font-weight:600;font-size:13.5px;text-decoration:underline;text-underline-offset:3px;padding:0}
.tr-lien:hover{color:#fff}
.tr-aide{margin-top:14px;font-size:13.5px;color:var(--texte-faible)}
#tr-bandeau .alerte{margin-top:14px}

/* ------------------------------ le corps ---------------------------- */
.tr-corps{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;margin-top:18px;align-items:start}

/* ----------------------- les deux appels (R1 / R2) ------------------ */
.tr-appels{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.tr-appels button{
  display:flex;align-items:baseline;gap:9px;padding:10px 18px;border-radius:12px;
  border:1px solid var(--trait-fort);background:rgba(255,255,255,0.05);color:var(--texte-doux);
  font-family:var(--display);font-weight:700;font-size:15.5px;
}
.tr-appels button em{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--texte-faible)}
.tr-appels button:hover{background:rgba(255,255,255,0.09);color:var(--texte)}
.tr-appels button.actif{background:linear-gradient(135deg,rgba(255,154,61,0.22),rgba(244,70,126,0.18));border-color:rgba(255,154,61,0.5);color:#fff}
.tr-appels button.actif em{color:#FFD9B0}
.tr-doc section.tr-cachee{display:none}

/* ----------------------- le bloc-notes de l'appel ------------------- */
.tr-notes{
  position:sticky;top:14px;display:flex;flex-direction:column;gap:10px;
  background:var(--carte);border:1px solid var(--trait);border-radius:16px;padding:16px 16px 14px;
  max-height:calc(100vh - 28px);
}
.tr-notes h3{font-family:var(--display);font-size:15px;font-weight:800;margin:0}
.tr-notes-tete{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tr-notes-tete .tr-lien{font-size:12.5px}
.tr-notes select{
  width:100%;padding:9px 11px;border-radius:10px;border:1px solid var(--trait-fort);
  background:rgba(255,255,255,0.05);color:var(--texte);font-size:13.5px;font-family:inherit;
}
.tr-notes select option{background:#1A1330;color:#fff}
.tr-notes textarea{
  flex:1;min-height:320px;resize:vertical;width:100%;padding:12px 13px;border-radius:12px;
  border:1px solid var(--trait-fort);background:rgba(255,255,255,0.04);color:var(--texte);
  font-family:inherit;font-size:14.5px;line-height:1.55;
}
.tr-notes textarea:focus{outline:none;border-color:rgba(255,154,61,0.55);background:rgba(255,255,255,0.06)}
.tr-notes-pied{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tr-notes-pied .tr-btn{padding:9px 14px;font-size:13.5px}
.tr-notes-etat{font-size:12.5px;color:var(--texte-faible);flex:1;min-width:110px}
.tr-notes-etat.ok{color:#7CE0B4}
.tr-notes-etat.ko{color:#FF9BB6}
.tr-notes-taille{font-size:11.5px;font-family:var(--mono);color:var(--texte-faible)}
.tr-notes-taille.trop{color:#FFD9B0}

.tr-doc{min-width:0;font-size:16px;line-height:1.6}
.tr-doc section{padding:30px 0 10px;border-top:1px solid var(--trait)}
.tr-doc section:first-of-type{border-top:0;padding-top:4px}
.tr-doc .tr-etape{display:inline-block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#FFD9B0;background:rgba(255,154,61,0.14);padding:3px 9px;border-radius:5px;margin-bottom:10px}
.tr-doc h2{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-0.01em;line-height:1.15;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;text-wrap:balance}
.tr-doc .tr-temps{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--texte-faible);letter-spacing:0;text-transform:none}
.tr-doc .tr-but{color:var(--texte-doux);font-style:italic;margin:8px 0 16px;max-width:70ch}
.tr-doc h3{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--texte-doux);margin:24px 0 10px;display:flex;gap:10px;align-items:baseline}
.tr-doc h4{font-family:var(--display);font-size:16px;font-weight:700;margin:0 0 4px}
.tr-doc p{margin:0 0 10px;max-width:72ch}
.tr-doc strong,.tr-doc b{color:#fff;font-weight:600}
.tr-doc code{font-family:var(--mono);font-size:.9em;background:rgba(255,255,255,0.07);padding:1px 5px;border-radius:4px}

/* les blocs « à dire », « à demander », « attention », « note » */
.tr-b{position:relative;padding:13px 16px 13px 20px;border-radius:12px;margin:10px 0;max-width:76ch}
.tr-b::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:12px 0 0 12px}
.tr-dire{background:var(--tr-dire)}.tr-dire::before{background:var(--tr-dire-trait)}
.tr-demander{background:var(--tr-demander)}.tr-demander::before{background:var(--tr-demander-trait)}
.tr-attention{background:var(--tr-attention)}.tr-attention::before{background:var(--tr-attention-trait)}
.tr-note{background:var(--tr-note)}.tr-note::before{background:var(--tr-note-trait)}
.tr-lbl{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--texte-faible);font-weight:700;margin-bottom:6px}
.tr-b p:last-child{margin-bottom:0}
.tr-b ul,.tr-b ol{padding-left:20px;margin:0}
.tr-b li{margin:5px 0}
.tr-dire p{font-size:16.5px}

.tr-liste{padding-left:22px;margin:6px 0 14px;max-width:74ch}
.tr-liste li{margin:6px 0}

/* les objections */
.tr-obj{display:grid;grid-template-columns:minmax(170px,.8fr) minmax(0,2fr);border:1px solid var(--trait);border-radius:12px;overflow:hidden;margin:10px 0;max-width:86ch;background:var(--carte)}
.tr-obj>div{padding:12px 15px}
.tr-obj-q{background:rgba(255,255,255,0.04);font-family:var(--display);font-weight:700;font-size:15px;border-right:1px solid var(--trait)}
.tr-obj-r p{margin:0 0 7px;font-size:15.5px}
.tr-obj-r p:last-child{margin:0}
.tr-pourquoi{font-size:13.5px !important;color:var(--texte-faible)}

/* les messages à envoyer */
.tr-msg{border:1px dashed var(--trait-fort);border-radius:12px;background:rgba(255,255,255,0.025);padding:12px 16px 14px;margin:10px 0 14px;max-width:76ch}
.tr-msg-tete{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.tr-canal{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:2px 8px;border-radius:5px;background:rgba(47,211,165,0.14);color:#7DF0CD}
.tr-msg[data-canal="E-mail"] .tr-canal{background:rgba(79,125,247,0.16);color:#AFC4FF}
.tr-msg[data-canal="Vidéo"] .tr-canal,.tr-msg[data-canal="Vocal"] .tr-canal{background:rgba(180,41,217,0.18);color:#EBB5FF}
.tr-quand{font-size:12.5px;color:var(--texte-faible);font-family:var(--mono)}
.tr-copier{margin-left:auto;font-size:12.5px;font-weight:700;color:#FFD9B0;padding:3px 10px;border-radius:7px;border:1px solid rgba(255,154,61,0.35)}
.tr-copier:hover{background:rgba(255,154,61,0.14)}
.tr-msg-objet{font-weight:600;font-size:14.5px;margin-bottom:6px}
.tr-msg-texte{white-space:pre-line;font-size:15px;color:var(--texte)}

/* les étapes numérotées */
.tr-etapes{display:grid;gap:10px;margin:12px 0}
.tr-etape-i{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;background:var(--carte);border:1px solid var(--trait);border-radius:12px;padding:12px 14px}
.tr-n{font-family:var(--display);font-weight:800;font-size:22px;line-height:1;background:linear-gradient(135deg,var(--orange),var(--rose));-webkit-background-clip:text;background-clip:text;color:transparent}
.tr-etape-i p{margin:0;font-size:15px}
.tr-etape-i .tr-quand{display:block;margin-top:5px}

/* la chronologie (préchauffage, chauffe) */
.tr-chrono{list-style:none;margin:12px 0 16px;padding:0 0 0 18px;border-left:2px solid var(--trait-fort);max-width:80ch}
.tr-chrono li{position:relative;padding:0 0 14px 14px}
.tr-chrono li::before{content:'';position:absolute;left:-25px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px var(--nuit)}
.tr-chrono-quand{font-family:var(--mono);font-size:12.5px;color:#FFD9B0;font-weight:600}
.tr-chrono-canal{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--texte-faible);margin-left:8px}
.tr-chrono li div{margin-top:2px;font-size:15px}

/* tableaux */
.tr-scroll{overflow-x:auto;margin:10px 0 14px}
.tr-table{width:100%;border-collapse:collapse;font-size:14.5px}
.tr-table th{text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--texte-faible);padding:8px 10px;border-bottom:1px solid var(--trait-fort);font-weight:700}
.tr-table td{padding:9px 10px;border-bottom:1px solid var(--trait);vertical-align:top}
.tr-table td:first-child{font-family:var(--display);font-weight:700}

/* cartes */
.tr-cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px;margin:12px 0}
.tr-carte{background:var(--carte);border:1px solid var(--trait);border-radius:14px;padding:14px 16px}
.tr-carte h4{margin:4px 0 4px}
.tr-carte .tr-meta-c{font-size:12.5px;color:var(--texte-faible);margin-bottom:8px}
.tr-carte p{font-size:14.5px;margin:0 0 6px}
.tr-suite{font-family:var(--display);font-size:13px;font-weight:700;color:#FFD9B0}
.tr-tag{display:inline-block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;padding:2px 8px;border-radius:5px;background:rgba(255,255,255,0.07);color:var(--texte-doux)}
.tr-tag.chaud{background:rgba(47,211,165,0.14);color:#7DF0CD}
.tr-tag.alerte-t{background:rgba(244,70,126,0.16);color:#FF9DB8}

/* prix */
.tr-prix{border:1px solid var(--trait-fort);border-radius:14px;background:var(--carte);padding:6px 18px;max-width:76ch;margin:12px 0}
.tr-prix-l{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--trait)}
.tr-prix-l:last-child{border-bottom:0}
.tr-prix-lib{font-family:var(--display);font-weight:700}
.tr-prix-lib small{display:block;font-family:var(--corps);font-weight:400;color:var(--texte-doux);font-size:13.5px;margin-top:2px}
.tr-prix-v{font-family:var(--mono);font-size:19px;font-weight:600;white-space:nowrap;color:#FFD9B0}

/* glossaire */
.tr-glossaire{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:0;border:1px solid var(--trait);border-radius:12px;overflow:hidden;max-width:90ch;margin:12px 0}
.tr-glossaire dt,.tr-glossaire dd{padding:9px 14px;border-bottom:1px solid var(--trait);margin:0}
.tr-glossaire dt{font-family:var(--display);font-weight:700;background:rgba(255,255,255,0.035)}
.tr-glossaire dd{font-size:15px;color:var(--texte-doux)}

/* ------------------------------ les commentaires -------------------- */
.tr-comms{margin:16px 0 6px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,0.025);border:1px solid var(--trait);max-width:86ch}
.tr-comms[hidden]{display:none}
.tr-comms-tete{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:var(--texte-faible);font-weight:600}
.tr-comms-tete i{font-style:normal;margin-left:6px;padding:0 7px;border-radius:999px;font-size:11.5px;background:rgba(255,154,61,0.2);color:#FFD9B0}
.tr-coms{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.tr-com{background:var(--carte);border:1px solid var(--trait);border-radius:10px;padding:10px 12px}
.tr-com-integre,.tr-com-ecarte{opacity:.62}
.tr-com-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--texte-faible)}
.tr-com-meta b{color:var(--texte);font-weight:700}
.tr-chip{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;padding:1px 7px;border-radius:5px;background:rgba(255,255,255,0.07);color:var(--texte-doux)}
.tr-chip-amelioration{background:rgba(255,154,61,0.16);color:#FFD9B0}
.tr-chip-ajout{background:rgba(79,125,247,0.18);color:#AFC4FF}
.tr-chip-retour_appel{background:rgba(47,211,165,0.14);color:#7DF0CD}
.tr-chip-question{background:rgba(180,41,217,0.18);color:#EBB5FF}
.tr-chip-local{background:rgba(244,70,126,0.16);color:#FF9DB8}
.tr-com blockquote,.tr-form-extrait blockquote{margin:8px 0 4px;padding:4px 0 4px 10px;border-left:3px solid var(--trait-fort);color:var(--texte-doux);font-size:14px;font-style:italic}
.tr-com-texte{margin:6px 0 0;font-size:15px;white-space:normal}
.tr-com-actions{display:flex;gap:12px;margin-top:8px;font-size:12.5px}
.tr-com-actions button{color:var(--texte-faible);text-decoration:underline;text-underline-offset:3px;padding:0}
.tr-com-actions button:hover{color:var(--texte)}
.tr-com-actions .tr-danger:hover{color:#FF8FA6}
.tr-fermes{margin-top:10px;font-size:13px;color:var(--texte-faible)}
.tr-fermes summary{cursor:pointer}

.tr-form{margin-top:10px;display:grid;gap:10px}
.tr-form-extrait{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.tr-types{display:flex;gap:6px;flex-wrap:wrap}
.tr-type{padding:5px 11px;border-radius:999px;font-size:12.5px;border:1px solid var(--trait);color:var(--texte-doux)}
.tr-type:hover{border-color:var(--trait-fort);color:var(--texte)}
.tr-type.actif{background:rgba(255,154,61,0.16);border-color:rgba(255,154,61,0.45);color:#FFD9B0;font-weight:600}
#tr-texte{
  width:100%;font:inherit;font-size:15px;color:var(--texte);resize:vertical;min-height:90px;
  background:rgba(255,255,255,0.05);border:1px solid var(--trait-fort);border-radius:10px;padding:10px 12px;outline:none;
}
#tr-texte:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(110,58,247,.25)}
.tr-form-actions{display:flex;gap:14px;align-items:center}

/* la bulle « Commenter ce passage » et le message de confirmation */
.tr-bulle{
  position:absolute;z-index:60;padding:8px 13px;border-radius:10px;font-size:13px;font-weight:700;color:#1A0F33;
  background:linear-gradient(135deg,#FFB36B,var(--orange));box-shadow:0 10px 30px -8px rgba(0,0,0,.6);
}
.tr-bulle[hidden]{display:none}
.tr-toast{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);z-index:120;opacity:0;pointer-events:none;
  background:var(--carte);border:1px solid var(--trait-fort);color:var(--texte);padding:10px 16px;border-radius:11px;font-size:14px;
  box-shadow:0 18px 50px -18px rgba(0,0,0,.8);transition:opacity .18s,transform .18s;
}
.tr-toast.visible{opacity:1;transform:translate(-50%,0)}

#onglets button i#tr-compte[hidden]{display:none}

:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

@media (max-width:1100px){
  .tr-corps{grid-template-columns:1fr;gap:18px}
  .tr-notes{position:static;max-height:none}
  .tr-notes textarea{min-height:220px}
}
@media (max-width:900px){
  .tr-corps{grid-template-columns:1fr;gap:14px}
  .tr-appels button{flex:1;justify-content:center}
  .tr-obj{grid-template-columns:1fr}.tr-obj-q{border-right:0;border-bottom:1px solid var(--trait)}
  .tr-glossaire{grid-template-columns:1fr}.tr-glossaire dt{border-bottom:0;padding-bottom:2px}
}
@media (prefers-reduced-motion:reduce){.tr-toast{transition:none}}

/* ==================================================================
   L'espace de travail des appels : fond clair et pleine largeur.
   La classe est posée sur <body> par trame.js quand l'onglet est
   ouvert, et retirée dès qu'on le quitte. L'en-tête du tableau de
   bord reste sombre : seule la zone de travail passe en clair.
   ================================================================== */

body.trame-claire{background:#F2F1EE;color:#14121C}
body.trame-claire .page{max-width:none;padding-left:clamp(14px,2.2vw,30px);padding-right:clamp(14px,2.2vw,30px)}

body.trame-claire #vue-trame{
  max-width:none;
  --carte:#FFFFFF;
  --trait:rgba(20,18,28,0.12);
  --trait-fort:rgba(20,18,28,0.22);
  --texte:#14121C;
  --texte-doux:rgba(20,18,28,0.68);
  --texte-faible:rgba(20,18,28,0.48);
  --tr-dire:rgba(110,58,247,0.07);
  --tr-demander:rgba(255,154,61,0.10);
  --tr-attention:rgba(244,70,126,0.08);
  --tr-note:rgba(20,18,28,0.04);  --tr-note-trait:rgba(20,18,28,0.18);
  color:var(--texte);
}

/* deux colonnes plus larges, et une vraie place pour écrire */
body.trame-claire .tr-corps{grid-template-columns:minmax(0,1fr) max(50vw,380px);gap:26px}
body.trame-claire .tr-doc{font-size:16.5px}
body.trame-claire .tr-doc p,body.trame-claire .tr-b{max-width:none}

/* chaque point tient sur une ligne : le titre en gras, la phrase à la suite */
body.trame-claire #vue-trame .tr-etapes{gap:6px}
body.trame-claire #vue-trame .tr-etape-i{grid-template-columns:26px minmax(0,1fr);gap:10px;padding:9px 13px;border-radius:10px}
body.trame-claire #vue-trame .tr-n{font-size:15px;padding-top:2px}
body.trame-claire #vue-trame .tr-etape-i h4{display:inline;font-size:15.5px;margin:0}
body.trame-claire #vue-trame .tr-etape-i h4::after{content:' · ';font-weight:400;color:var(--texte-faible)}
body.trame-claire #vue-trame .tr-etape-i p{display:inline;margin:0;font-size:15.5px;max-width:none}
body.trame-claire #vue-trame .tr-doc section{padding:18px 0 8px}
body.trame-claire #vue-trame .tr-doc .tr-but{margin:6px 0 12px}
body.trame-claire .tr-notes textarea{min-height:min(58vh,560px);font-size:15px}

/* les textes et les fonds pensés pour le sombre */
body.trame-claire #vue-trame .tr-doc strong,
body.trame-claire #vue-trame .tr-doc b{color:#050409}
body.trame-claire #vue-trame .tr-lien{color:#9A4E00}
body.trame-claire #vue-trame .tr-lien:hover{color:#5E2F00}
body.trame-claire #vue-trame .tr-btn-doux{background:#fff;color:var(--texte);border-color:var(--trait-fort)}
body.trame-claire #vue-trame .tr-btn-doux:hover{background:#F6F5F2}
body.trame-claire #vue-trame .tr-appels button{background:#fff;color:var(--texte-doux);border-color:var(--trait-fort)}
body.trame-claire #vue-trame .tr-appels button:hover{background:#FBFAF8;color:var(--texte)}
body.trame-claire #vue-trame .tr-appels button.actif{
  background:linear-gradient(135deg,rgba(255,154,61,0.20),rgba(244,70,126,0.14));
  border-color:rgba(214,44,99,0.45);color:#14121C;
}
body.trame-claire #vue-trame .tr-appels button.actif em{color:#9A4E00}
body.trame-claire #vue-trame .tr-n{background:linear-gradient(135deg,#E07A1F,#D62C63);-webkit-background-clip:text;background-clip:text;color:transparent}
body.trame-claire #vue-trame .tr-etape-i,
body.trame-claire #vue-trame .tr-carte,
body.trame-claire #vue-trame .tr-msg,
body.trame-claire #vue-trame .tr-prix,
body.trame-claire #vue-trame .tr-obj{background:#fff}
body.trame-claire #vue-trame .tr-obj-q{background:#F6F5F2}
body.trame-claire #vue-trame .tr-comms{background:#FBFAF8}
body.trame-claire #vue-trame .tr-doc code{background:rgba(20,18,28,0.07)}
body.trame-claire #vue-trame .tr-doc .tr-etape,
body.trame-claire #vue-trame .tr-copier,
body.trame-claire #vue-trame .tr-chrono-quand,
body.trame-claire #vue-trame .tr-suite,
body.trame-claire #vue-trame .tr-prix-v,
body.trame-claire #vue-trame .tr-comms-tete i,
body.trame-claire #vue-trame .tr-chip-amelioration,
body.trame-claire #vue-trame .tr-notes-taille.trop{color:#9A4E00}
body.trame-claire #vue-trame .tr-chip,
body.trame-claire #vue-trame .tr-tag{background:rgba(20,18,28,0.07);color:var(--texte-doux)}
body.trame-claire #vue-trame .tr-chip-ajout{background:rgba(79,125,247,0.14);color:#27459E}
body.trame-claire #vue-trame .tr-chip-retour_appel,
body.trame-claire #vue-trame .tr-tag.chaud{background:rgba(47,211,165,0.16);color:#0F6B50}
body.trame-claire #vue-trame .tr-chip-question{background:rgba(180,41,217,0.14);color:#7A1A94}
body.trame-claire #vue-trame .tr-chip-local,
body.trame-claire #vue-trame .tr-tag.alerte-t{background:rgba(244,70,126,0.14);color:#A81447}
body.trame-claire #vue-trame .tr-canal{background:rgba(47,211,165,0.16);color:#0F6B50}
body.trame-claire #vue-trame .tr-msg[data-canal="E-mail"] .tr-canal{background:rgba(79,125,247,0.14);color:#27459E}
body.trame-claire #vue-trame .tr-msg[data-canal="Vidéo"] .tr-canal,
body.trame-claire #vue-trame .tr-msg[data-canal="Vocal"] .tr-canal{background:rgba(180,41,217,0.14);color:#7A1A94}
body.trame-claire #vue-trame .tr-glossaire dt{background:rgba(20,18,28,0.04)}
body.trame-claire #vue-trame .tr-notes select,
body.trame-claire #vue-trame .tr-notes textarea,
body.trame-claire #vue-trame #tr-texte{background:#fff;color:var(--texte);border-color:var(--trait-fort)}
body.trame-claire #vue-trame .tr-notes select option{background:#fff;color:#14121C}
body.trame-claire #vue-trame .tr-notes textarea:focus{background:#fff;border-color:rgba(214,44,99,0.5)}
body.trame-claire #vue-trame .tr-notes-etat.ok{color:#0F6B50}
body.trame-claire #vue-trame .tr-notes-etat.ko{color:#A81447}
body.trame-claire #vue-trame .tr-type{background:#fff}
body.trame-claire #vue-trame .tr-type.actif{background:rgba(255,154,61,0.16);color:#9A4E00}
body.trame-claire #vue-trame .tr-com{background:#fff}
body.trame-claire #vue-trame .tr-danger{color:#A81447}

@media (max-width:1100px){
  body.trame-claire .tr-corps{grid-template-columns:1fr}
}