/* Messagerie interne — thème inspiré de Teams (couleurs et mise en page, sans logo) */
[hidden]{display:none!important}
:root{--violet:#5B5FC7;--violet-f:#464EB8;--violet-ff:#3D3E78;--violet-c:#E8EBFA;--violet-cc:#C5CBFA;--fond:#F5F5F5;--fond2:#EBEBEB;
 --blanc:#fff;--texte:#242424;--gris:#616161;--gris2:#8A8A8A;--bord:#E0E0E0;--rouge:#C4314B;--vert:#6BB700;--ombre:0 2px 4px rgba(0,0,0,.14),0 0 2px rgba(0,0,0,.12)}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:"Segoe UI","Segoe UI Web (West European)",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;font-size:14px;line-height:1.43;color:var(--texte);background:var(--fond)}
a{color:var(--violet-f)}h1{font-size:20px;font-weight:700;margin:0 0 1rem}h2{font-size:18px;font-weight:700;margin:0}h3{font-size:16px;margin:.2rem 0}
small{color:var(--gris);font-weight:400}.petit{font-size:12px;color:var(--gris)}.vert{color:#498205!important}
.svg{display:block;flex-shrink:0}

/* Boutons et champs */
.btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--violet);color:#fff;border:1px solid transparent;border-radius:4px;padding:5px 16px;min-height:32px;font:600 14px/1 inherit;font-family:inherit;cursor:pointer;text-decoration:none;margin:.3rem .3rem .3rem 0}
.btn:hover{background:var(--violet-f)}.btn .svg{width:16px;height:16px}.btn.large{width:100%;justify-content:center;min-height:36px;margin:.8rem 0 0}
.btn.gris{background:#fff;color:var(--texte);border-color:#D1D1D1}.btn.gris:hover{background:#F5F5F5}.btn.danger{background:var(--rouge)}.btn.danger:hover{background:#A4262C}
.btn.petit{padding:3px 10px;min-height:26px;font-size:12px;margin:0}
.icone-btn{background:none;border:0;border-radius:4px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;color:var(--gris);cursor:pointer}
.icone-btn:hover{background:var(--fond2);color:var(--violet)}
label{display:block;margin:.8rem 0;font-weight:600;font-size:14px}
input,textarea,select{width:100%;padding:6px 10px;min-height:32px;border:1px solid #D1D1D1;border-bottom-color:#616161;border-radius:4px;font:inherit;margin-top:.25rem;background:#fff;color:var(--texte)}
input:focus,textarea:focus{outline:none;border-bottom:2px solid var(--violet)}
.tag{display:inline-flex;align-items:center;gap:.3rem;border:1px solid var(--bord);background:#fff;border-radius:16px;padding:2px 10px;margin:2px;cursor:pointer;font:inherit;font-size:12px}
.tag:hover{border-color:var(--violet);color:var(--violet)}.lien{background:none;border:0;color:var(--violet);cursor:pointer;font:inherit}
.inline{display:inline}.erreur-txt{color:var(--rouge);min-height:1em;margin:.3rem 0 0}
.flash{padding:8px 12px;border-radius:4px;margin-bottom:1rem;border:1px solid}.flash.ok{background:#F1FAF1;border-color:#9FD89F;color:#0E700E}.flash.erreur{background:#FDF3F4;border-color:#EEACB2;color:#B10E1C}

/* Cadre général */
.cadre{display:flex;flex-direction:column;height:100vh}
.haut{height:48px;background:var(--violet-f);color:#fff;display:flex;align-items:center;gap:12px;padding:0 12px 0 0;flex-shrink:0;position:relative;z-index:5}
.marque{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;min-width:200px}.grille{width:68px;display:flex;justify-content:center;opacity:.9}
.recherche{flex:1;max-width:620px;margin:0 auto;position:relative;display:flex;align-items:center}
.recherche .svg{position:absolute;left:10px;width:16px;height:16px;color:var(--gris)}
.recherche input{margin:0;height:32px;min-height:32px;padding-left:34px;border:0;border-radius:4px;background:#F0F0F8}.recherche input:focus{background:#fff;border:0;outline:2px solid var(--violet-cc)}
.profil{position:relative;margin-left:auto}
.avatar{position:relative;width:32px;height:32px;border-radius:50%;background:var(--violet);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;flex-shrink:0;border:0;font-family:inherit}
.avatar.moi{cursor:pointer;background:#C5CBFA;color:var(--violet-ff)}.avatar.petit{width:32px;height:32px}.grand-av{width:52px;height:52px;font-size:18px;background:var(--violet-c);color:var(--violet-ff)}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #8A8A8A;vertical-align:middle;box-shadow:0 0 0 2px #fff}
.dot.on{background:var(--vert);border-color:var(--vert)}.avatar .dot{position:absolute;right:-3px;bottom:-3px;width:11px;height:11px}
.haut .avatar .dot{box-shadow:0 0 0 2px var(--violet-f)}
.menu{position:absolute;right:0;top:42px;background:#fff;color:var(--texte);border-radius:6px;box-shadow:0 8px 16px rgba(0,0,0,.14),0 0 2px rgba(0,0,0,.12);min-width:280px;padding:6px 0}
.menu-tete{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--bord)}.menu-tete small{display:block}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 16px;background:none;border:0;font:inherit;cursor:pointer;text-align:left;color:var(--texte)}.menu-item:hover{background:var(--fond)}
.corps-appli{flex:1;display:flex;min-height:0}
.rail{width:92px;background:var(--fond2);display:flex;flex-direction:column;align-items:center;padding:6px 0;flex-shrink:0;border-right:1px solid #E0E0E0;overflow-y:auto}
.rail a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:88px;min-height:64px;padding:8px 4px 6px;color:#616161;text-decoration:none;font-size:11px;line-height:1.15;gap:4px;text-align:center}
.rail a span{display:block;max-width:84px;font-size:11px;font-weight:400;color:inherit;white-space:normal;word-break:break-word}
.rail a:hover{color:var(--violet);background:#F5F5F5}.rail a.actif{color:var(--violet);font-weight:600}
.rail a.actif::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 2px 2px 0;background:var(--violet)}
.rail a.actif .svg{stroke-width:2.1}
.badge{background:var(--rouge);color:#fff;border-radius:10px;min-width:16px;height:16px;padding:0 4px;font-size:10px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;line-height:1}
.rail .badge{position:absolute;top:4px;right:10px;box-shadow:0 0 0 2px var(--fond2)}
.contenu{flex:1;min-width:0;overflow:auto;display:flex;flex-direction:column}
.barre-page{display:flex;align-items:center;gap:20px;padding:0 20px;height:52px;background:#fff;border-bottom:1px solid var(--bord);flex-shrink:0}
.barre-page .btn{margin-left:auto}
.onglets{display:flex;gap:18px;height:100%}.onglets a{display:flex;align-items:center;color:var(--gris);text-decoration:none;position:relative;font-weight:400;cursor:pointer}
.onglets a:hover{color:var(--texte)}.onglets a.actif{color:var(--texte);font-weight:600}.onglets a.actif::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px 2px 0 0;background:var(--violet)}
.page{padding:20px;max-width:960px;width:100%;margin:0 auto}
.carte{background:#fff;border-radius:6px;padding:20px 24px;box-shadow:var(--ombre)}
.liste{background:#fff;border-radius:6px;overflow:hidden;box-shadow:var(--ombre)}
.ligne{display:flex;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid #F0F0F0;color:var(--texte);text-decoration:none}
.ligne:hover{background:#F5F5F5}.ligne .etat,.ligne>small{margin-left:auto;font-size:12px;color:var(--gris);flex-shrink:0}
.ligne.nonlu{font-weight:600;box-shadow:inset 3px 0 var(--violet)}.ligne.nonlu b{font-weight:700}.off{opacity:.55}
.ou{display:block;font-size:11px;color:var(--violet-f)!important}
.corps{white-space:pre-wrap;border-top:1px solid var(--bord);padding-top:1rem;margin:1rem 0}
.cases{max-height:300px;overflow-y:auto;border:1px solid var(--bord);border-radius:4px;padding:4px 10px;margin:.5rem 0}.cases label{font-weight:400;margin:.4rem 0;display:flex;align-items:center;gap:.4rem}
.cases input{width:auto;min-height:0;margin:0}
.vide{color:var(--gris);padding:24px;text-align:center}
.etat-pill{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;background:#F1FAF1;color:#0E700E}.etat-pill.off2{background:#F5F5F5;color:#616161}

/* Chat */
.chat{display:flex;flex:1;min-height:0}
.liste-conv{width:320px;background:var(--fond);border-right:1px solid var(--bord);display:flex;flex-direction:column;flex-shrink:0}
.liste-conv .tete{display:flex;justify-content:space-between;align-items:center;padding:0 12px 0 20px;height:52px;border-bottom:1px solid var(--bord)}
.liste-conv .actions{display:flex;gap:2px}.sous-tete{font-size:12px;color:var(--gris);padding:10px 20px 4px}
#convs{overflow-y:auto;flex:1;padding:0 8px 8px}
.conv{display:flex;gap:10px;padding:8px 12px;color:var(--texte);text-decoration:none;align-items:center;border-radius:4px;margin:1px 0}
.conv:hover{background:#fff}.conv.sel{background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.ct{flex:1;min-width:0}.l1,.l2{display:flex;justify-content:space-between;gap:6px;align-items:center}
.l1 b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}.l1 small{color:var(--gris);flex-shrink:0;font-size:12px}
.l2 span{color:var(--gris);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv.nl b{font-weight:700}.conv.nl .l2 span{font-weight:600;color:var(--texte)}
.fil{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--fond)}
#conv{display:flex;flex-direction:column;height:100%}
.vide-fil{margin:auto;text-align:center;color:var(--gris)}.illus{width:96px;height:96px;margin:0 auto 12px;border-radius:50%;background:var(--violet-c);color:var(--violet);display:flex;align-items:center;justify-content:center}
.illus .svg{width:48px;height:48px}
.tete-fil{display:flex;align-items:center;gap:12px;padding:0 16px 0 20px;height:52px;background:#fff;border-bottom:1px solid var(--bord);flex-shrink:0}
.tete-fil .titre{display:flex;flex-direction:column;min-width:0;line-height:1.25}.tete-fil .titre b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tete-fil small{font-size:12px}.tete-fil .onglets.mini{margin-left:18px;margin-right:auto}
.retour{display:none}.membres{padding:8px 20px;background:#fff;border-bottom:1px solid var(--bord)}
.messages{flex:1;overflow-y:auto;padding:16px 8% 8px}
.msg{display:flex;gap:10px;margin-top:16px;align-items:flex-start}.msg.suite{margin-top:2px;padding-left:42px}
.msg.mien{justify-content:flex-end}.msg.mien.suite{padding-left:0}
.bulle{background:#fff;border-radius:4px;padding:6px 14px 8px;max-width:72%;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.msg.mien .bulle{background:var(--violet-c)}
.meta{font-size:12px;margin-bottom:2px;display:flex;gap:10px;align-items:baseline}.meta b{font-weight:600;color:var(--texte)}.meta small{color:var(--gris)}
.txt{white-space:pre-wrap;word-wrap:break-word;font-size:14px}
.sep-jour{display:flex;align-items:center;gap:12px;margin:20px 0 6px;font-size:12px;color:var(--gris)}.sep-jour::before,.sep-jour::after{content:"";flex:1;height:1px;background:var(--bord)}
.saisie{padding:8px 8% 20px;flex-shrink:0}
.boite-saisie{display:flex;align-items:flex-end;background:#fff;border:1px solid #D1D1D1;border-radius:8px;padding:4px 6px 4px 12px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.boite-saisie:focus-within{border-color:#D1D1D1;border-bottom:2px solid var(--violet);padding-bottom:3px}
.boite-saisie textarea{border:0;margin:0;resize:none;padding:8px 0;min-height:36px;max-height:150px;background:transparent}.boite-saisie textarea:focus{border:0}
.envoyer{background:none;border:0;color:var(--violet);cursor:pointer;width:36px;height:36px;border-radius:4px;display:flex;align-items:center;justify-content:center}.envoyer:hover{background:var(--violet-c)}
dialog{border:0;border-radius:8px;padding:24px;width:min(480px,92vw);box-shadow:0 25px 65px rgba(0,0,0,.25)}dialog::backdrop{background:rgba(0,0,0,.4)}
dialog h3{font-size:18px;margin-bottom:12px}dialog menu{display:flex;justify-content:flex-end;gap:8px;padding:0;margin:16px 0 0}

/* Connexion */
body.accueil{background:linear-gradient(135deg,#E8EBFA 0%,#F5F5F5 55%,#EDEBF8 100%);min-height:100vh}
.connexion{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px}
.carte-cx{background:#fff;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);width:min(400px,100%);padding:32px 36px;border-top:4px solid var(--violet)}
.logo-cx{width:52px;height:52px;border-radius:12px;background:var(--violet);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:16px}.logo-cx .svg{width:30px;height:30px}
.carte-cx h1{font-size:22px;margin:0}.sous{color:var(--gris);margin:.3rem 0 1rem}.pied{color:var(--gris);font-size:12px;margin-top:16px}

/* Mobile */
@media(max-width:760px){
 .marque{min-width:0}.marque span:last-child{display:none}.grille{width:48px}
 .corps-appli{flex-direction:column-reverse}
 .rail{width:100%;height:56px;flex-direction:row;justify-content:space-around;padding:0;border-right:0;border-top:1px solid var(--bord)}
 .rail a{width:auto;flex:1;min-width:72px;height:auto;min-height:56px;padding:6px 2px;font-size:10px}.rail a.actif::before{left:25%;right:25%;top:0;bottom:auto;width:auto;height:3px;border-radius:0 0 2px 2px}.rail .badge{left:calc(50% + 4px)}
 .liste-conv{width:100%;border:0}.fil{display:none}.chat.ouvert .liste-conv{display:none}.chat.ouvert .fil{display:flex}
 .retour{display:inline-flex}.tete-fil{padding-left:6px}.tete-fil .onglets.mini{display:none}.tete-fil #btn-membres{margin-left:auto}
 .messages{padding:12px 10px}.saisie{padding:6px 8px 10px}.bulle{max-width:84%}.msg.suite{padding-left:42px}
 .barre-page{padding:0 12px;gap:12px}.barre-page h2{font-size:16px}.barre-page .btn{padding:5px 10px}.page{padding:12px}.carte{padding:16px}.menu{right:-4px}
}
.rail-sep{width:56px;height:1px;background:#D1D1D1;margin:8px 0}
@media(max-width:760px){.rail-sep{display:none}.rail{overflow-x:auto;justify-content:flex-start}.rail a{min-width:62px}}
.choix{border:1px solid var(--bord);border-radius:6px;margin:.4rem 0 1rem;background:#FAFAFA}
.choix-barre{display:flex;gap:8px;align-items:center;padding:8px;border-bottom:1px solid var(--bord);flex-wrap:wrap}
.choix-barre input{flex:1;min-width:160px;margin:0}.choix-liste{max-height:240px;overflow-y:auto;padding:4px 0}
.choix-liste label{display:flex;align-items:center;gap:10px;margin:0;padding:6px 12px;font-weight:400;cursor:pointer}.choix-liste label:hover{background:#fff}
.choix-liste input{width:auto;min-height:0;margin:0}.choix-liste .avatar{width:28px;height:28px;font-size:11px}
.choix-liste .nm{flex:1;min-width:0}.choix-liste small{display:block}.compteur{font-size:12px;color:var(--gris)}
select{appearance:auto}
.ligne-bloc{border-bottom:1px solid #F0F0F0}.ligne-bloc .ligne{border:0}.ligne-bloc.nonlu{box-shadow:inset 3px 0 var(--violet)}
.recus{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px 60px}.recu{font-size:11px;color:var(--gris);background:#F5F5F5;border-radius:10px;padding:2px 8px}
.recu.lu{color:#498205;background:#F1FAF1}.recu.typing{color:var(--violet-f);background:var(--violet-c);font-style:italic}
.vu-rcpt{text-align:right;font-size:11px;color:var(--violet-f);margin-top:2px;padding-right:4px}
.en-train{min-height:18px;padding:0 8% 4px;font-size:12px;color:var(--gris);font-style:italic}
.ligne.typing{background:#F7F7FC}

.btn-grand{min-height:40px;padding:10px 20px;font-size:15px;font-weight:700;border-radius:6px}
.btn-grand .svg{width:18px;height:18px}
.tab{width:100%;border-collapse:collapse;font-size:13px;margin:.5rem 0}.tab th{text-align:left;color:var(--gris);font-weight:600;border-bottom:1px solid var(--bord);padding:6px}
.tab td{border-bottom:1px solid #F0F0F0;padding:6px;vertical-align:top}.ok-txt{color:#0E700E}.ko-txt{color:#B10E1C}
.case{display:flex;align-items:center;gap:8px;font-weight:400}.case input{width:auto;min-height:0;margin:0}.perms{display:flex;flex-direction:column;gap:2px;margin:.4rem 0}
.conf-box{border:1px solid var(--violet-cc);background:#F7F7FD;border-radius:6px;padding:4px 12px;margin:.6rem 0}
.bandeau-conf{background:#FDF3F4;color:#B10E1C;border-radius:4px;padding:6px 10px;font-size:13px;font-weight:600}
.carte.confidentiel{border-top:4px solid #C4314B}.filigrane{background-repeat:repeat;user-select:none;-webkit-user-select:none;min-height:120px}
.vide-conf{background:#F5F5F5;border-radius:6px;padding:24px;text-align:center;color:var(--gris);margin:1rem 0}
@media print{.filigrane{display:none}}

.citation{margin:.8rem 0;padding:.4rem 0 .4rem .9rem;border-left:3px solid #c3c6d4;color:#6b6f7b;font-size:.92em}
.citation-tete{margin-bottom:.5rem;line-height:1.45}.citation-tete b{color:#555}
.citation-corps{white-space:pre-wrap}

.ligne-a{margin:.3rem 0 .9rem;padding:.5rem .7rem;background:#f4f5f8;border-radius:6px}

/* Courrier non lu, style Outlook */
.ligne-bloc{background:#fff}
.ligne-bloc.nonlu{background:#EAF3FC;box-shadow:inset 4px 0 #0F6CBD}
.ligne-bloc.nonlu .ligne:hover{background:#DCEBFA}
.ligne-bloc.nonlu .l1 b,.ligne-bloc.nonlu .l2 span{font-weight:700;color:#11243a}
.ligne-bloc:not(.nonlu) .l1 b,.ligne-bloc:not(.nonlu) .l2 span{font-weight:400}
.point-nonlu{width:9px;height:9px;border-radius:50%;background:#0F6CBD;flex-shrink:0;margin-left:-4px}