/* ==========================================================================
copilote-ux.css : harmonisation visuelle du panneau Copilote avec le Desk.
Objet : le copilote et ses nouveaux composants (deux vitesses, questions,
sources, actions preparees, doctrine, regles) adoptent le systeme visuel
des ecrans Desk recents (jetons CSS navy/neutre/semantique), sans changer
aucune fonction ni aucun emplacement : seul le rendu change.
Regle de specificite : le copilote portait un theme PURPLE ecrit en dur
(#f3eefb / #4b2f7a / #6b3fb0 / #7c3aed / degrade #5b6cff->#8a5bff) qui ne
s'adaptait pas au mode sombre et jurait avec le Desk. On neutralise ces
surfaces vers les variables du Desk. Les regles scopees sous #copPanel
gagnent par l'ID sur les anciennes regles .classe ET html.theme-dark .classe
(un id l'emporte sur les classes), donc UNE seule regle a variables sert le
clair ET le sombre. Portee STRICTE : #copPanel, #copFab, et les classes
propres au copilote (.cop2v-*, .copsrc-*, .qa, .copsteps, .copweb) qui
n'apparaissent QUE dans le copilote et ses modales. Aucun autre ecran touche.
Charge apres index.html (ordre source) : les regles a classe nue gagnent
aussi par l'ordre. finition.css reste reserve au drapeau automatismes.
========================================================================== */
/* ---- 1. Chrome du panneau : en-tete, FAB, barre de contexte ---------------
Le degrade violet devient le degrade navy du Desk (topbar / sidenav), pour
que le copilote se lise comme une surface du Desk et non un widget rapporte.
L'icone etincelle garde l'identite "IA". Reversible : ces 3 regles. */
#copPanel.asst-panel .asst-hd{
background:linear-gradient(135deg, var(--navy) 0%, var(--navy3) 100%);
}
/* bouton Copilote : VIOLET IA (owner 19/10/2026, repère des actions IA, voir
section 9) ; l'en-tête du panneau reste navy */
#copFab.asst-fab{
background:linear-gradient(135deg, var(--ia) 0%, var(--ia2) 100%);
box-shadow:0 10px 26px var(--ia-shadow);
}
#copPanel .cop-ctx{
background:var(--card2);
border-bottom:1px solid var(--line);
}
#copPanel .cop-ctx-lbl{ color:var(--mut); }
/* ---- 2. Rangee d'actions : vrais boutons Desk, hierarchie claire ----------
.qa etait une pilule lavande en dur (ne survivait pas au sombre). Devient un
bouton secondaire Desk (surface carte, texte encre, liseré ligne). Les 3
actions principales (.qa-primary : Resumer / Proposer / Points) prennent la
teinte selection du Desk pour ressortir ; les actions avancees (historique,
outils, Recherche approfondie, Doctrine, Regles) restent en secondaire
coherent. Delai en badge discret. */
.qa{
flex:0 1 auto;
background:var(--card); color:var(--ink);
border:1px solid var(--line); border-radius:9px;
padding:7px 11px; font-size:11.5px; font-weight:700;
cursor:pointer; white-space:nowrap; line-height:1.15;
display:inline-flex; align-items:center; gap:6px;
transition:background .12s, border-color .12s;
}
.qa:hover{ background:var(--card2); border-color:var(--navy3); }
.qa:focus-visible{ outline:2px solid var(--navy3); outline-offset:1px; }
.aichips .qa.qa-primary{
background:var(--sel); border-color:var(--sel); color:var(--ink);
}
.aichips .qa.qa-primary:hover{ border-color:var(--navy3); }
/* actions secondaires : un cran plus sobre que les principales */
.aichips .qa.qa-sec{ color:var(--mut); font-weight:700; }
.aichips .qa.qa-sec:hover{ color:var(--ink); }
.qa .qa-ic{ width:13px; height:13px; flex:none; stroke:currentColor; fill:none; stroke-width:2; opacity:.85; }
.qa .copdelai{ font-weight:600; opacity:.7; font-size:10.5px; }
/* ---- 3. Bulles & carte de reponse / action ------------------------------- */
#copPanel .abub.a code{ background:var(--card2); }
#copPanel .acard{
border:1px solid var(--line); border-left:3px solid var(--navy3);
background:var(--card);
}
#copPanel .acard .act{ color:var(--navy3); }
#copPanel .acard .abody{ color:var(--ink); }
#copPanel .acard .reslnk{ color:var(--navy3); }
/* le bouton d'action principal etait violet #6b3fb0 -> primaire navy du Desk */
#copPanel .acard .minibtn.ok{ background:var(--navy); color:#fff; border-color:var(--navy); }
#copPanel .acard .minibtn.ok:hover{ background:var(--navy2); }
#copPanel .acard .minibtn.no{ background:var(--card2); color:var(--ink); border:1px solid var(--line); }
/* (20/10/2026) mode sombre : titre de carte et bouton principal lisibles (le navy
des cartes se fondait dans le fond sombre, tickets comme caisse) */
html.theme-dark #copPanel .acard{ border-left-color:#5f97c6; }
html.theme-dark #copPanel .acard .act{ color:#9cc5ea; }
html.theme-dark #copPanel .acard .reslnk{ color:#9cc5ea; }
html.theme-dark #copPanel .acard .minibtn.ok{ background:#2f6a99; border-color:#2f6a99; color:#fff; }
html.theme-dark #copPanel .acard .minibtn.ok:hover{ background:#3a7cb0; }
/* champ de saisie + trombone : plus de violet, focus navy */
#copPanel .aiclip{ background:var(--card2); border:1px solid var(--line); color:var(--ink); }
#copPanel .aiclip:hover{ background:var(--sel); }
#copPanel .aicomp textarea:focus{ outline:0; border-color:var(--navy3); }
/* ---- 4. Etapes en direct (lecture / redaction) --------------------------- */
#copPanel .copsteps{ background:var(--card2); border:1px solid var(--line); }
#copPanel .copsteps .cs-i{ color:var(--ink); }
#copPanel .copsteps .cs-d{ background:var(--navy3); }
#copPanel .copsteps .cs-i.pend .cs-d{ background:transparent; border-color:var(--navy3); }
/* ---- 5. Bandeau "Ce cas parait complexe" : alerte Desk, pas pave orange ---
Owner : pas d'orange sur les titres. Surface neutre + fin liseré ambre a
gauche (l'ambre = signal d'avertissement legitime, mais discret), titre en
encre avec un petit reperé ambre, raisons en liste compacte, bouton primaire
Desk. Variables -> clair + sombre d'office. */
#copPanel .cop2v-ask{
background:var(--card); color:var(--ink);
border:1px solid var(--line); border-left:3px solid var(--amber);
border-radius:10px;
}
#copPanel .cop2v-ask .c2h{
color:var(--ink); display:flex; align-items:center; gap:6px;
}
#copPanel .cop2v-ask .c2h::before{
content:""; width:8px; height:8px; border-radius:50%;
background:var(--amber); flex:none;
}
#copPanel .cop2v-ask ul{ margin:4px 0 10px 2px; padding:0; list-style:none; }
#copPanel .cop2v-ask ul li{ position:relative; padding-left:16px; margin:3px 0; }
#copPanel .cop2v-ask ul li::before{
content:""; position:absolute; left:3px; top:8px;
width:4px; height:4px; border-radius:50%; background:var(--mut);
}
#copPanel .cop2v-ask .minibtn{
background:var(--navy); color:#fff; border:1px solid var(--navy);
padding:7px 13px; border-radius:8px;
}
#copPanel .cop2v-ask .minibtn:hover{ background:var(--navy2); }
/* repli modele / reessayer : boutons Desk sobres */
#copPanel .cop2v-retry .minibtn{
background:var(--card); color:var(--ink); border:1px solid var(--line);
}
#copPanel .cop2v-retry .minibtn:hover{ border-color:var(--navy3); }
/* ---- 6. Formulaire de questions : cartes selectionnables, pas de controle brut
Native radio/checkbox restyles (accent navy), carte selectionnee tres
visible via :has(), badge "recommande" discret (gris), motif en ligne grise
avec icone source, champ "Autre" style Desk, barre "Continuer" collante. */
#copPanel .cop2v-qform{
border:1px solid var(--line); border-left:3px solid var(--navy3);
background:var(--card);
}
#copPanel .cop2v-qform .qfh{ color:var(--ink); font-size:13px; }
#copPanel .cop2v-qform .qfintro{ color:var(--mut); }
#copPanel .cop2v-qform .qtitle{ color:var(--ink); font-weight:600; margin-bottom:3px; }
/* numero propre : petite pastille navy */
#copPanel .cop2v-qform .qtitle .qn{
display:inline-flex; align-items:center; justify-content:center;
min-width:18px; height:18px; padding:0 5px; margin-right:7px;
border-radius:9px; background:var(--sel); color:var(--navy3);
font-size:11px; font-weight:800; vertical-align:1px;
}
#copPanel .cop2v-qform .qmotif{
color:var(--mut); font-style:normal; display:flex; align-items:flex-start; gap:6px;
background:var(--card2); border-radius:7px; padding:5px 8px; margin-bottom:8px;
}
#copPanel .cop2v-qform .qmotif::before{
content:""; flex:none; width:13px; height:13px; margin-top:1px; opacity:.7;
background-color:var(--mut);
-webkit-mask:no-repeat center/contain url("data:image/svg+xml;utf8,");
mask:no-repeat center/contain url("data:image/svg+xml;utf8,");
}
#copPanel .cop2v-qform label.qopt{
align-items:center; gap:9px; padding:9px 11px; margin:5px 0;
border:1px solid var(--line); border-radius:9px; background:var(--card);
transition:background .12s, border-color .12s, box-shadow .12s;
}
#copPanel .cop2v-qform label.qopt:hover{ border-color:var(--navy3); background:var(--card2); }
#copPanel .cop2v-qform label.qopt input{ accent-color:var(--navy); width:16px; height:16px; margin:0; flex:none; }
/* etat selectionne tres visible */
#copPanel .cop2v-qform label.qopt:has(input:checked){
background:var(--sel); border-color:var(--navy3);
box-shadow:inset 0 0 0 1px var(--navy3);
}
#copPanel .cop2v-qform label.qopt:has(input:checked) > span{ font-weight:600; }
#copPanel .cop2v-qform label.qopt:focus-within{ outline:2px solid var(--navy3); outline-offset:1px; }
/* la bordure "reco" en dur n'est plus utile : le badge suffit */
#copPanel .cop2v-qform label.qopt.reco{ border-color:var(--line); box-shadow:none; }
#copPanel .cop2v-qform label.qopt.reco:has(input:checked){ border-color:var(--navy3); box-shadow:inset 0 0 0 1px var(--navy3); }
#copPanel .cop2v-qform .recotag{
background:var(--card2); color:var(--mut); border:1px solid var(--line);
font-weight:700; font-size:9.5px; text-transform:uppercase; letter-spacing:.03em;
border-radius:6px; padding:1px 6px;
}
#copPanel .cop2v-qform input[type=text].qlibre{
background:var(--card); border:1px solid var(--line); border-radius:8px;
color:var(--ink); padding:8px 10px; margin-top:5px;
}
#copPanel .cop2v-qform input[type=text].qlibre:focus{ outline:0; border-color:var(--navy3); }
#copPanel .cop2v-qform input[type=text].qlibre::placeholder{ color:var(--mut); }
/* "+ Garder comme regle" : bouton texte discret */
#copPanel .cop2v-qform .qf-rule{
font-family:inherit; font-size:11px; font-weight:700; cursor:pointer;
background:transparent; color:var(--navy3);
border:1px dashed var(--line); border-radius:7px; padding:4px 9px;
}
#copPanel .cop2v-qform .qf-rule:hover{ border-color:var(--navy3); background:var(--card2); }
/* barre d'action "Continuer" collante en bas, pleine largeur */
#copPanel .cop2v-qform .qfbtn{
position:sticky; bottom:0; width:100%; box-sizing:border-box;
background:var(--navy); color:#fff; border:0; border-radius:9px;
padding:10px 14px; font-size:12.5px; font-weight:700; margin-top:10px;
box-shadow:0 -8px 12px -8px rgba(13,27,48,.35);
}
#copPanel .cop2v-qform .qfbtn:hover{ background:var(--navy2); }
#copPanel .cop2v-qform .qfbtn:disabled{ opacity:.55; }
/* consigne libre apres brouillon */
#copPanel .cop-consigne input:focus{ outline:0; border-color:var(--navy3); }
#copPanel .cop-consigne .minibtn{ background:var(--navy); color:#fff; border:1px solid var(--navy); }
#copPanel .cop-consigne .minibtn:hover{ background:var(--navy2); }
/* ---- 7. Modale des sources (dans #uiDlg) : cartes a cocher Desk ----------- */
/* ces classes n'existent QUE dans cette modale -> classe nue scopee OK */
.copsrc-count{ font-size:11.5px; font-weight:700; color:var(--mut); margin:2px 0 7px; }
.copsrc-pick{
display:flex; flex-direction:column; gap:7px; border:0; padding:0;
background:transparent; max-height:300px; overflow:auto;
}
.copsrc-opt{
display:flex; align-items:center; gap:10px; padding:10px 12px; margin:0;
border:1px solid var(--line); border-radius:10px; background:var(--card);
cursor:pointer; font-size:12.5px; color:var(--ink);
transition:background .12s, border-color .12s, box-shadow .12s;
}
.copsrc-opt:hover{ border-color:var(--navy3); background:var(--card2); }
.copsrc-opt input{ accent-color:var(--navy); width:17px; height:17px; margin:0; flex:none; order:3; margin-left:auto; }
.copsrc-opt .copsrc-ic{
flex:none; width:30px; height:30px; border-radius:8px;
background:var(--card2); display:flex; align-items:center; justify-content:center;
}
.copsrc-opt .copsrc-ic svg{ width:16px; height:16px; stroke:var(--mut); fill:none; stroke-width:2; }
.copsrc-opt:has(input:checked) .copsrc-ic svg{ stroke:var(--ink); }
.copsrc-opt .copsrc-lbl{ flex:1; min-width:0; }
.copsrc-opt:has(input:checked){
background:var(--sel); border-color:var(--navy3);
box-shadow:inset 0 0 0 1px var(--navy3);
}
.copsrc-opt:has(input:checked) .copsrc-ic{ background:var(--card); }
.copsrc-opt:focus-within{ outline:2px solid var(--navy3); outline-offset:1px; }
/* ---- 8. Carte "recherche internet" : correctif clé sombre + sobre --------
L'ancien override ciblait body.dark (clé inexistante : le Desk est
html.theme-dark) -> les badges restaient en clair en sombre. Corrige. */
html.theme-dark #copPanel .copweb .cw-b.eleve{ background:#173a2a; color:#bbf7d0; }
html.theme-dark #copPanel .copweb .cw-b.moyen{ background:#3a3413; color:#fde68a; }
html.theme-dark #copPanel .copweb .cw-b.faible{ background:#2b4d5b; color:#d1d5db; }
/* ---- 9. precalc / info "prepare il y a X min" ---------------------------- */
#copPanel .cop-precalc-info{ color:var(--navy3); background:var(--card2); border:1px dashed var(--line); }
/* ---- 10. Mobile / etroit : reste lisible a 380 px ------------------------ */
@media (max-width:420px){
.aichips{ gap:5px; }
.qa{ padding:6px 9px; font-size:11px; }
#copPanel .cop2v-qform label.qopt{ padding:8px 9px; }
.copsrc-opt{ padding:9px 10px; }
}
/* Champ « Oriente-toi sur... » de la modale des sources : style des champs Desk, clair et sombre */
#copDeepConsigne{display:block;width:100%;box-sizing:border-box;margin-top:6px;padding:10px 12px;border:1px solid var(--line,#e3e6ea);border-radius:10px;font-size:14px;font-family:inherit;color:var(--txt,#143240);background:var(--card2,var(--bg,#fff));transition:border-color .15s,box-shadow .15s}
#copDeepConsigne::placeholder{color:var(--muted,#7a8a94);opacity:1}
#copDeepConsigne:focus{outline:none;border-color:var(--navy,#143240);box-shadow:0 0 0 3px rgba(20,50,64,.15)}
html.theme-dark #copDeepConsigne:focus{border-color:var(--txt,#e6edf2);box-shadow:0 0 0 3px rgba(230,237,242,.12)}
/* Modale des sources : toutes les sources visibles sans défilement caché (7 et plus) */
.copsrc-pick{ max-height:none; overflow:visible; gap:5px; }
.copsrc-opt{ padding:6px 10px; }
.copsrc-opt .copsrc-ic{ width:26px; height:26px; }
/* ---- 9. IA : UN seul violet, repère visuel de toute action IA du Desk -------
Décision owner du 19/10/2026 : « le bouton Copilote en violet comme toutes
les actions IA, repère visuel à uniformiser dans tout le Desk ». Jetons
globaux --ia / --ia2 (dégradé), --ia-soft (fond léger), --ia-ink (texte).
Mêmes teintes que l'accent du copilote (--cop-acc), clair et sombre. */
:root{--ia:#5b4bd6;--ia2:#7c5cf0;--ia-soft:rgba(91,75,214,.10);--ia-soft2:rgba(91,75,214,.18);--ia-ink:#4c3dc4;--ia-shadow:rgba(91,75,214,.34)}
html.theme-dark{--ia:#8f80ff;--ia2:#a18cff;--ia-soft:rgba(143,128,255,.14);--ia-soft2:rgba(143,128,255,.24);--ia-ink:#b8aeff;--ia-shadow:rgba(0,0,0,.45)}
/* boutons de l'en-tête du copilote : icônes centrées (le globe était un emoji) */
#copPanel .asst-x{display:inline-flex;align-items:center;justify-content:center;padding:0;position:relative}
#copPanel .asst-x .svgi{width:15px;height:15px;vertical-align:0}
#copNavBtn.on::after{content:"";position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--ia)}
#copNavBtn.on[data-ton=warn]::after{background:#f59e0b;box-shadow:0 0 0 2px #fff;animation:navPulseO 1.4s ease-in-out infinite}
#copNavBtn.on[data-ton=ok]::after{background:#22c55e;box-shadow:0 0 0 2px #fff}
/* repère du navigateur, panneau du copilote OUVERT : bandeau sous l'en-tête */
.cop-navband{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:12.5px;font-weight:600;border-bottom:1px solid var(--line);border-left:3px solid transparent}
.cop-navband.ia{background:var(--ia-soft);color:var(--ia-ink);border-left-color:var(--ia)}
.cop-navband.warn{background:#fff4e5;color:#8a4300;border-left-color:#f59e0b}
.cop-navband.ok{background:#e9f7ef;color:#17643a;border-left-color:#22c55e}
.cop-navband.hum{background:var(--card2);color:var(--ink);border-left-color:var(--navy3)}
.cop-navband .cnb-ic{display:inline-flex}
.cop-navband .cnb-ic .svgi{width:16px;height:16px}
.cop-navband .cnb-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cop-navband .cnb-go{flex:none;border:0;border-radius:8px;padding:5px 12px;font-weight:700;font-size:12px;cursor:pointer;color:#fff;background:linear-gradient(135deg,var(--ia),var(--ia2))}
.cop-navband.warn .cnb-go{background:#d97706}
.cop-navband.ok .cnb-go{background:#16a34a}
html.theme-dark .cop-navband.warn{background:#3a2a12;color:#ffc77a}
html.theme-dark .cop-navband.ok{background:#13301f;color:#8fe0ad}
/* repère du navigateur, panneau du copilote FERMÉ : pastille sur son bouton */
.cop-navdot{position:absolute;top:0;right:0;min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;border-radius:9px;border:2px solid var(--card,#fff);font-size:11px;font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center;line-height:1}
.cop-navdot.ia{background:#fff;border-color:var(--ia);animation:navPulseV 1.6s ease-in-out infinite}
.cop-navdot.warn{background:#f59e0b;animation:navPulseO 1.3s ease-in-out infinite}
.cop-navdot.ok{background:#22c55e}
.cop-navdot.hum{background:var(--navy3)}
@keyframes navPulseO{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.65)}50%{box-shadow:0 0 0 9px rgba(245,158,11,0)}}
@keyframes navPulseV{0%,100%{box-shadow:0 0 0 0 rgba(124,92,240,.6)}50%{box-shadow:0 0 0 8px rgba(124,92,240,0)}}
@keyframes navBlink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes navFlash{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.07)}}
/* ---- 10. Fenêtre du navigateur du copilote (refonte 19/10/2026) ----------
Sous la fenêtre de confirmation (10099) et l'appel entrant (10070), au-dessus
du reste : « Arrêter et fermer » demandait sa confirmation DERRIÈRE. */
#navOv{position:fixed;inset:0;z-index:10058;background:rgba(10,20,30,.55);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center}
body.nav-on .toast,body.nav-on #atoast{z-index:10097}
#navOv .nav-win{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:14px;width:min(1560px,98vw);height:min(960px,96vh);display:flex;flex-direction:column;box-shadow:0 24px 70px rgba(0,0,0,.4);overflow:hidden}
#navOv .nav-hd{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
#navOv .nav-ic{width:28px;height:28px;flex:none;border-radius:8px;background:linear-gradient(135deg,var(--ia),var(--ia2));color:#fff;display:flex;align-items:center;justify-content:center}
#navOv .nav-ic .svgi{width:16px;height:16px;vertical-align:0}
#navOv .nav-ttl{font-size:15px;white-space:nowrap}
#navOv .nav-sp{flex:1}
#navOv .nav-chip{font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;max-width:420px;overflow:hidden;text-overflow:ellipsis}
#navOv .nav-chip.ia{background:var(--ia-soft);color:var(--ia-ink)}
#navOv .nav-chip.ia::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ia);animation:navBlink 1s infinite}
#navOv .nav-chip.warn{background:#fff1dc;color:#8a4300}
#navOv .nav-chip.hum{background:var(--card2);color:var(--ink);border:1px solid var(--line)}
#navOv .nav-chip.ok{background:#e3f6ea;color:#17643a}
#navOv .nav-chip.off{background:var(--card2);color:var(--mut)}
#navOv .nav-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:9px;padding:7px 12px;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;font-family:inherit}
#navOv .nav-btn:hover{background:var(--card2)}
#navOv .nav-btn .svgi{width:14px;height:14px;vertical-align:0}
#navOv .nav-btn.ia{background:linear-gradient(135deg,var(--ia),var(--ia2));border-color:transparent;color:#fff;box-shadow:0 3px 10px var(--ia-shadow)}
#navOv .nav-btn.ia:hover{filter:brightness(1.07)}
#navOv .nav-btn.ghost{background:transparent}
#navOv .nav-btn.danger{color:#b42318;border-color:#f1c4bf}
#navOv .nav-btn.danger:hover{background:#fdecea}
#navOv .nav-body{display:flex;flex:1;min-height:0}
#navOv .nav-left{flex:1;display:flex;flex-direction:column;min-width:0;background:#0b1220}
#navOv .nav-bar{display:flex;align-items:center;gap:6px;padding:7px 8px;background:#111a2b;border-bottom:1px solid #1f2a3d}
#navOv .nav-tb{width:30px;height:30px;flex:none;border-radius:8px;border:0;background:#1b2638;color:#dbe4f0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
#navOv .nav-tb:hover:not(:disabled){background:#26344d}
#navOv .nav-tb:disabled{opacity:.35;cursor:default}
#navOv .nav-tb .svgi{width:16px;height:16px;vertical-align:0}
#navOv .nav-url{flex:1;min-width:0;height:30px;border-radius:8px;border:1px solid #26324a;background:#0e1626;color:#e6edf6;padding:0 11px;font-size:12.5px;font-family:inherit}
#navOv .nav-url[readonly]{color:#8fa0b6}
#navOv .nav-url:focus{outline:0;border-color:var(--ia2)}
#navOv .nav-view{flex:1;position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:10px}
#navOv .nav-view img{max-width:100%;max-height:100%;user-select:none;-webkit-user-drag:none;border-radius:6px;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
#navOv .nav-view.hum img{box-shadow:0 0 0 2px #f59e0b}
#navOv .nav-view.hum.focus img{box-shadow:0 0 0 3px #f59e0b,0 0 22px rgba(245,158,11,.35)}
#navOv .nav-kb{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;border:0;padding:0;margin:0;resize:none;pointer-events:none}
#navOv .nav-flag{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);background:rgba(15,23,42,.9);color:#fff;border-radius:999px;padding:6px 7px 6px 14px;font-size:12.5px;display:flex;align-items:center;gap:8px;box-shadow:0 6px 20px rgba(0,0,0,.35);white-space:nowrap}
#navOv .nav-flag.hum{background:rgba(180,83,9,.94);padding:7px 15px;pointer-events:none}
#navOv .nav-flag button{border:0;border-radius:999px;background:#fff;color:#4c3dc4;font-weight:800;font-size:12px;padding:5px 12px;cursor:pointer;font-family:inherit}
#navOv .nav-flag.flash{animation:navFlash .5s 2}
#navOv .nav-dot{width:7px;height:7px;border-radius:50%;background:var(--ia2);display:inline-block;flex:none;animation:navBlink 1s infinite}
#navOv .nav-side{width:360px;flex:none;display:flex;flex-direction:column;border-left:1px solid var(--line);background:var(--card);min-height:0}
#navOv .nav-att{margin:12px 12px 6px;border-radius:12px;padding:12px 13px;border:1px solid var(--line);background:var(--card2)}
#navOv .nav-att.warn{background:#fff6ea;border-color:#f3d2a4}
#navOv .nav-att.ok{background:#eefaf3;border-color:#bfe6cf}
#navOv .na-t{font-weight:800;font-size:14px;margin-bottom:4px}
#navOv .na-m{font-size:13px;margin-bottom:6px;line-height:1.45}
#navOv .na-h{font-size:12px;color:var(--mut);margin-bottom:10px;line-height:1.45}
#navOv .na-ok{font-size:12.5px;background:#e3f6ea;color:#17643a;border-radius:8px;padding:7px 9px;margin-bottom:10px}
#navOv .na-act{display:flex;gap:8px;flex-wrap:wrap}
#navOv .na-act .nav-btn.ia{flex:1;justify-content:center;padding:9px 12px}
#navOv .nav-att input.input{width:100%;margin-bottom:7px;box-sizing:border-box}
#navOv .nav-lnk{border:0;background:none;color:#17643a;font-weight:800;text-decoration:underline;cursor:pointer;padding:0;font:inherit}
#navOv .nav-jt{padding:8px 14px 4px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
#navOv .nav-journal{flex:1;overflow:auto;padding:2px 14px 12px;font-size:12.5px;line-height:1.45}
#navOv .nj{margin:6px 0;padding-left:13px;position:relative}
#navOv .nj::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--ia)}
#navOv .nj.ag::before{background:var(--navy3)}
#navOv .nj.en-cours{color:var(--mut);display:flex;align-items:center;gap:7px;padding-left:0}
#navOv .nj.en-cours::before{display:none}
#navOv .nav-cons{display:flex;gap:8px;align-items:flex-end;padding:10px 12px;border-top:1px solid var(--line)}
#navOv .nav-cons textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:inherit;font-size:12.5px;background:var(--card2);color:var(--ink);min-height:40px;max-height:120px;box-sizing:border-box}
#navOv .nav-cons textarea:focus{outline:0;border-color:var(--ia);box-shadow:0 0 0 3px var(--ia-soft2)}
html.theme-dark #navOv .nav-chip.warn{background:#3a2a12;color:#ffc77a}
html.theme-dark #navOv .nav-chip.ok,html.theme-dark #navOv .na-ok{background:#13301f;color:#8fe0ad}
html.theme-dark #navOv .nav-att.warn{background:#2c2214;border-color:#5a4220}
html.theme-dark #navOv .nav-att.ok{background:#12291b;border-color:#24502f}
html.theme-dark #navOv .nav-btn.danger{color:#ff8a80;border-color:#5c2b28}
html.theme-dark #navOv .nav-btn.danger:hover{background:#3a1e1c}
html.theme-dark #navOv .nav-lnk{color:#8fe0ad}
/* ---- 11. Actions IA du Desk, hors copilote : un seul violet, deux niveaux --
Inventaire du 19/10/2026 : ~45 boutons lancent l'IA hors du copilote, 9
seulement étaient violets, en 5 teintes ; le petit bouton violet servait
aussi à ~26 boutons sans IA. Désormais :
.ia-act bouton plein : lance une génération IA (Analyser, Rédiger...)
.ia-act2 bouton clair : relance, relit, complète (Réessayer, Relire...)
.ia-lnk lien d'action IA dans un texte
et le violet est RÉSERVÉ à l'IA. Réversible : cette section. */
button.ia-act,.ia-act{background:linear-gradient(135deg,var(--ia),var(--ia2))!important;color:#fff!important;border-color:transparent!important;box-shadow:0 2px 8px var(--ia-shadow)}
button.ia-act:hover:not(:disabled){filter:brightness(1.07)}
button.ia-act:disabled{opacity:.55;box-shadow:none}
button.ia-act2,.ia-act2{background:var(--ia-soft)!important;color:var(--ia-ink)!important;border:1px solid var(--ia-soft2)!important}
button.ia-act2:hover:not(:disabled){background:var(--ia-soft2)!important}
a.ia-lnk,.ia-lnk{color:var(--ia-ink)!important;font-weight:700}
/* repères IA déjà violets : même teinte partout */
.aisugbtn{color:var(--ia-ink);background:var(--ia-soft);border-color:var(--ia-soft2)}
.aisugbtn:hover{background:var(--ia-soft2)}
.spgram{color:var(--ia-ink);background:var(--ia-soft);border-color:var(--ia-soft2)}
.spgram:hover{background:var(--ia-soft2)}
.sugg-pill{color:var(--ia-ink);background:var(--ia-soft)}
.chipf.copi-chip.on{background:var(--ia);border-color:var(--ia)}
th.th-sort .thcopi:hover,th.th-sort .thcopi.on{color:var(--ia)}
.mprio-pill.copi{background:var(--ia)} .mprio-pill.copi-strong{background:var(--ia-ink)}
#s2.tv2,html.theme-dark #s2.tv2{--tv2-violet:var(--ia)}
/* violet réservé à l'IA : les petits boutons principaux SANS IA reprennent le
navy des boutons principaux du Desk (ceux avec IA portent .ia-act) */
.minibtn2.p{background:var(--navy);color:#fff}
/* ---- 12. Volet des sources : groupes par type + recherche (19/10/2026) -----
Owner : « quand il y a plein de documents ce n'est pas ergonomique ».
Groupes repliables (repliés d'office au-delà de 6 sources quand la liste est
longue), compteur par groupe, Tout cocher / Tout décocher, recherche. */
.copsrc-tools{position:sticky;top:-1px;z-index:2;background:var(--card);padding:0 0 8px;margin:0 0 4px}
.copsrc-q{display:block;width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid var(--line);border-radius:10px;font-size:13.5px;font-family:inherit;color:var(--ink);background:var(--card2)}
.copsrc-q:focus{outline:none;border-color:var(--navy3);box-shadow:0 0 0 3px rgba(20,50,64,.12)}
.copsrc-tools2{display:flex;align-items:center;gap:10px;margin-top:7px}
.copsrc-tot{font-size:11.5px;font-weight:700;color:var(--mut)}
.copsrc-lnk{border:0;background:none;padding:2px 2px;font-size:11.5px;font-weight:700;color:var(--navy);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
html.theme-dark .copsrc-lnk{color:var(--ink)}
.copsrc-pick{gap:8px}
.copsrc-grp{border:1px solid var(--line);border-radius:11px;background:var(--card);overflow:hidden}
.copsrc-grp.hide{display:none}
.copsrc-gh{display:flex;align-items:center;gap:8px;padding:9px 11px;cursor:pointer;user-select:none;background:var(--card2)}
.copsrc-gh:hover{filter:brightness(.98)}
.copsrc-gh:focus-visible{outline:2px solid var(--navy3);outline-offset:-2px}
.copsrc-chev{width:16px;height:16px;flex:none;fill:none;stroke:var(--mut);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.copsrc-grp.open .copsrc-chev,.copsrc-grp.srch .copsrc-chev{transform:rotate(90deg)}
.copsrc-gt{font-size:12.5px;font-weight:800;color:var(--ink)}
.copsrc-gn{font-size:11px;font-weight:700;color:var(--mut);background:var(--card);border:1px solid var(--line);border-radius:20px;padding:1px 8px}
.copsrc-gb{display:none;flex-direction:column;gap:5px;padding:7px}
.copsrc-grp.open .copsrc-gb,.copsrc-grp.srch .copsrc-gb{display:flex}
.copsrc-opt.hide{display:none}
.copsrc-gempty,.copsrc-none{display:none;font-size:12px;color:var(--mut);padding:8px 11px}
.copsrc-none{display:block;border:1px dashed var(--line);border-radius:10px;margin-top:8px}
/* ---- 13. Alerte à l'écran du copilote expert (19/10/2026) ------------------ */
.copx-toast{display:none;position:fixed;right:84px;bottom:96px;z-index:9406;width:360px;max-width:calc(100vw - 110px);background:var(--card,#fff);color:var(--ink,#143240);border:1px solid var(--ia-soft2);border-left:5px solid var(--ia);border-radius:13px;box-shadow:0 16px 40px rgba(13,31,41,.28);padding:12px 14px 12px 14px;font-size:13px;line-height:1.4}
.copx-toast.q{border-left-color:#e8590c}
.copx-toast.err{border-left-color:#b0342a}
.copx-k{font-size:10.5px;font-weight:800;letter-spacing:.45px;text-transform:uppercase;color:var(--ia-ink);margin:0 20px 3px 0}
.copx-toast.q .copx-k{color:#b5440a}
.copx-t{font-weight:800;font-size:13.5px}
.copx-s{color:var(--mut,#65788a);font-size:12.5px;margin-top:3px;max-height:96px;overflow:auto}
.copx-go{margin-top:9px;border:0;border-radius:9px;padding:8px 12px;font-weight:800;font-size:12.5px;cursor:pointer;color:#fff;background:linear-gradient(135deg,var(--ia),var(--ia2))}
.copx-go:hover{filter:brightness(1.07)}
.copx-x{position:absolute;top:8px;right:9px;border:0;background:none;color:var(--mut,#65788a);font-size:14px;cursor:pointer;line-height:1}
@media (max-width:560px){ .copx-toast{right:10px;left:10px;width:auto;max-width:none;bottom:200px} }
/* ===================================================================
14. Chat : vue « Pour moi » (19/10/2026, demande Camille + Florian)
Orange = un message qui te désigne (tag de l'équipe chez le client,
@prénom). Gris = le reste des canaux de groupe du client, sans bruit.
Le violet reste réservé à l'IA.
=================================================================== */
.cp-fchip.cp-moi{border-color:#f3c98b;color:#b45309;font-weight:700}
.cp-fchip.cp-moi.on{background:#d97706;border-color:#d97706;color:#fff}
.cp-moi-n{display:inline-block;margin-left:5px;min-width:16px;padding:0 5px;border-radius:8px;background:#d97706;color:#fff;font-size:10.5px;font-weight:800;line-height:16px;text-align:center}
.cp-fchip.cp-moi.on .cp-moi-n{background:#fff;color:#b45309}
.cp-rbadge.cp-at{background:#d97706;color:#fff;margin-left:3px}
.cp-rbadge.cp-gris{background:var(--card2,#eef2f4);color:var(--mut,#6b7c86);font-weight:700;margin-left:3px}
.cp-moi-vide{padding:14px 15px;font-size:12.5px;color:var(--txt,#1a2b33);line-height:1.5}
.cp-moi-note{padding:8px 15px 4px;font-size:11px;color:var(--mut,#6b7c86);line-height:1.4}
.cp-moi-vide span{display:block;margin-top:6px;color:var(--mut,#6b7c86);font-size:11.5px}
.cp-pmseg{display:inline-flex;border:1px solid var(--line,#e2e8ec);border-radius:9px;overflow:hidden;flex:0 0 auto}
.cp-pmseg button{border:0;background:var(--card,#fff);color:var(--mut,#6b7c86);font-size:12px;font-weight:700;padding:4px 11px;cursor:pointer;font-family:inherit}
.cp-pmseg button+button{border-left:1px solid var(--line,#e2e8ec)}
.cp-pmseg button.on{background:#d97706;color:#fff}
.cp-pmseg button b{display:inline-block;margin-left:3px;padding:0 5px;border-radius:7px;background:#fff;color:#b45309;font-size:10.5px}
.cp-pmseg button:not(.on) b{background:#d97706;color:#fff}
.cp-pmban{padding:7px 14px;background:#fff8eb;border-bottom:1px solid #f3e1bf;color:#7c4a03;font-size:12px;line-height:1.45}
.cp-pmban b{color:#b45309}
.cp-pmban-lk{border:0;background:none;color:#0d9488;font-weight:700;font-size:12px;cursor:pointer;padding:0 0 0 6px;font-family:inherit}
.msg-row.pm-moi .msg-main{background:#fff8eb;box-shadow:inset 3px 0 0 #d97706;border-radius:8px;padding:4px 8px 4px 10px}
.pm-why{display:inline-block;margin-left:6px;font-size:10px;font-weight:800;color:#b45309;background:#fdecc8;border-radius:4px;padding:1px 6px;vertical-align:1px}
.pm-fil{border:0;background:none;color:#0d9488;font-size:11px;font-weight:700;cursor:pointer;margin-left:4px;padding:0;font-family:inherit}
.pm-pillrow{margin:0 0 3px -6px}
mark.pm-tag{background:#fdecc8;color:#b45309;font-weight:800;border-radius:3px;padding:0 2px}
.pm-fold{display:flex;align-items:center;gap:10px;margin:8px 4px;padding:7px 12px;border:1px dashed var(--line,#cfd8e3);border-radius:10px;background:var(--card2,#f6f8fa);color:var(--mut,#6b7c86);font-size:12px}
.pm-fold b{color:var(--txt,#1a2b33);white-space:nowrap}
.pm-fold-d{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-fold button{margin-left:auto;border:0;background:none;color:#0d9488;font-weight:700;font-size:12px;cursor:pointer;font-family:inherit;white-space:nowrap}
.pm-fold.ouvert{border-style:solid;padding:4px 12px}
.pm-vide{padding:40px 20px;line-height:1.6}
.pm-voir{margin-top:10px;border:1px solid var(--line,#e2e8ec);background:var(--card,#fff);color:#0d9488;font-weight:700;border-radius:9px;padding:6px 12px;cursor:pointer;font-family:inherit}
.pm-toast{display:none;position:fixed;right:84px;bottom:96px;z-index:9407;width:360px;max-width:calc(100vw - 110px);background:var(--card,#fff);color:var(--ink,#143240);border:1px solid #f3c98b;border-left:5px solid #d97706;border-radius:13px;box-shadow:0 16px 40px rgba(13,31,41,.28);padding:12px 14px;font-size:13px;line-height:1.4}
.pm-toast-k{font-size:11px;font-weight:800;color:#b45309;text-transform:uppercase;letter-spacing:.3px}
.pm-toast-t{font-weight:800;margin-top:3px}
.pm-toast-s{color:var(--mut,#65788a);font-size:12.5px;margin-top:3px;max-height:96px;overflow:auto}
.pm-toast-go{margin-top:9px;border:0;border-radius:9px;padding:8px 12px;font-weight:800;font-size:12.5px;cursor:pointer;color:#fff;background:#d97706;font-family:inherit}
.pm-toast-x{position:absolute;top:8px;right:9px;border:0;background:none;color:var(--mut,#65788a);font-size:14px;cursor:pointer;line-height:1}
.pm-modal{display:none;position:fixed;inset:0;z-index:9500;background:rgba(13,31,41,.45);align-items:center;justify-content:center}
.pm-modal.on{display:flex}
.pm-modal-box{position:relative;width:480px;max-width:calc(100vw - 30px);background:var(--card,#fff);color:var(--txt,#1a2b33);border-radius:14px;padding:18px 20px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.pm-modal-box h3{margin:0 24px 6px 0;font-size:15px}
.pm-modal-s{margin:0 0 12px;color:var(--mut,#6b7c86);font-size:12.5px;line-height:1.5}
.pm-modal-x{position:absolute;top:12px;right:14px;border:0;background:none;color:var(--mut,#6b7c86);font-size:15px;cursor:pointer}
.pm-modal-t{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line,#e2e8ec)}
.pm-modal-tag{font-weight:800;color:#b45309;background:#fff8eb;border:1px solid #f3c98b;border-radius:14px;padding:2px 10px}
.pm-modal-n{flex:1;color:var(--mut,#6b7c86);font-size:12px}
.pm-modal-t button{border:0;background:none;color:#b91c1c;font-weight:700;font-size:12px;cursor:pointer;font-family:inherit}
.pm-modal-add{display:flex;gap:8px;margin-top:12px}
.pm-modal-add input{flex:1;border:1px solid var(--line,#e2e8ec);border-radius:9px;padding:7px 10px;font:inherit;background:var(--card,#fff);color:var(--txt,#1a2b33)}
.pm-modal-add button{border:0;border-radius:9px;background:#0d9488;color:#fff;font-weight:700;padding:7px 14px;cursor:pointer;font-family:inherit}
html.theme-dark .cp-pmban{background:#3a2a10;border-color:#5c4316;color:#f6d7a0}
html.theme-dark .cp-pmban b,html.theme-dark .pm-why,html.theme-dark mark.pm-tag{color:#fbbf6a}
html.theme-dark .msg-row.pm-moi .msg-main{background:#33270f}
html.theme-dark .pm-why,html.theme-dark mark.pm-tag{background:#4a3410}
html.theme-dark .pm-modal-tag{background:#33270f;border-color:#5c4316;color:#fbbf6a}
html.theme-dark .cp-fchip.cp-moi{border-color:#5c4316;color:#fbbf6a}
html.theme-dark .cp-fchip.cp-moi.on{color:#fff}
@media (max-width:560px){ .pm-toast{right:10px;left:10px;width:auto;max-width:none;bottom:200px} .pm-fold-d{display:none} }
/* ===== 15. Réponse en deux temps « En bref » + ligne Actions (owner 19/10/2026) ===== */
#aiThread .cb-bref{background:var(--cop-soft,rgba(91,75,214,.08));border:1px solid var(--cop-soft2,rgba(91,75,214,.16));border-radius:12px;padding:9px 12px;margin:0 0 4px}
#aiThread .cb-h{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--cop-acc,#5b4bd6);margin-bottom:3px}
#aiThread .cb-bref p{margin:0 0 4px}
#aiThread .cb-bref p:last-child{margin:0}
#aiThread .cb-tgl{display:flex;flex-wrap:wrap;align-items:center;gap:2px 7px;width:100%;margin:8px 0 0;padding:7px 10px;border:1px dashed var(--line);border-radius:10px;background:transparent;color:var(--ink);font:inherit;font-size:12.5px;font-weight:600;text-align:left;cursor:pointer}
#aiThread .cb-tgl:hover{background:var(--card2)}
#aiThread .cb-chev{display:inline-block;transform:rotate(-90deg);transition:transform .15s;color:var(--cop-acc,#5b4bd6)}
#aiThread .cb-open .cb-chev{transform:none}
#aiThread .cb-n{width:100%;padding-left:17px;color:var(--mut);font-size:11.5px;font-weight:400}
#aiThread .cb-l-m{display:none}
#aiThread .cb-open .cb-l-v{display:none}
#aiThread .cb-open .cb-l-m{display:inline}
#aiThread .cb-det{display:none;margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
#aiThread .cb-open .cb-det{display:block}
.aichips-ligne{display:none;align-items:center;gap:8px;width:calc(100% - 24px);margin:6px 12px 2px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-size:12.5px;cursor:pointer;text-align:left}
.aichips-ligne.vis{display:flex}
.aichips-ligne:hover{background:var(--card2)}
.aichips-ligne .acl-t{font-weight:700;color:var(--cop-acc,#5b4bd6)}
.aichips-ligne .acl-r{flex:1;min-width:0;color:var(--mut);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aichips-ligne .acl-c{transform:rotate(-90deg);transition:transform .15s;color:var(--mut)}
.aichips-ligne.ouv .acl-c{transform:none}
.aichips.cb-rep{display:none!important}
/* (30/10/2026, Lina, Slack « outils ») bouton Stop des copilotes : le bouton Envoyer
devient « Stop » pendant la génération */
button.cop-stop,.btn.cop-stop,.asst-send.cop-stop,.cbc-btn.cop-stop{background:#b42318!important;border-color:#b42318!important;color:#fff!important;cursor:pointer!important;opacity:1!important}
button.cop-stop:hover{background:#912018!important;border-color:#912018!important}
button.cop-stop:disabled{opacity:.7!important;cursor:default!important}