/* =========================================================================
   Desk iCarsoft France — feuille de style unique
   ========================================================================= */
:root{
  --bg:#f4f6f8; --surface:#fff; --surface-2:#fafbfc; --border:#e7eaef; --border-2:#eff1f5;
  --ink:#0f141d; --ink-2:#4a5262; --ink-3:#878f9e; --ink-4:#aab1bd;
  --navy:#0e1320; --navy-2:#161c2b; --navy-3:#1e2534;
  --accent:#f07d00; --accent-2:#d96f00; --accent-soft:#fff4e6;
  --red:#e5484d; --red-soft:#fff0f0; --amber:#f0a020; --amber-soft:#fff8e8;
  --green:#15b765; --green-soft:#eafaf1; --blue:#3b7ddd; --blue-soft:#eef4fd;
  --r-s:8px; --r:12px; --r-l:16px; --r-xl:22px;
  --sh-1:0 1px 2px rgba(16,24,40,.05);
  --sh-2:0 4px 14px rgba(16,24,40,.07);
  --sh-3:0 18px 46px rgba(16,24,40,.14);
  --t:180ms cubic-bezier(.4,0,.2,1);
  --sidebar:252px; --liste:368px; --panneau:356px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
::selection{background:#ffd9ad;color:#5c3000}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* --------------------------------------------------------------- scrollbars */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#d4d9e1;border:3px solid transparent;
  background-clip:content-box;border-radius:9px}
*::-webkit-scrollbar-thumb:hover{background:#b9c0cb;background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

/* =========================================================================
   AUTHENTIFICATION
   ========================================================================= */
.auth{display:grid;grid-template-columns:1.05fr 1fr;min-height:100vh}
.auth__aside{
  position:relative;overflow:hidden;padding:56px 60px;display:flex;flex-direction:column;
  background:radial-gradient(1200px 620px at 12% -8%,#243149 0%,transparent 62%),
             radial-gradient(760px 520px at 86% 108%,#3a2208 0%,transparent 60%),
             linear-gradient(158deg,#0e1320 0%,#0b0f19 58%,#0a0d15 100%);
}
.auth__aside:before{
  content:'';position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(70% 70% at 40% 30%,#000 30%,transparent 100%);
}
.auth__glow{
  position:absolute;width:520px;height:520px;right:-170px;top:38%;border-radius:50%;
  background:radial-gradient(circle,rgba(240,125,0,.34) 0%,rgba(240,125,0,0) 68%);
  filter:blur(14px);animation:flot 11s ease-in-out infinite;
}
@keyframes flot{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-26px,-30px,0)}}
.auth__brand{position:relative;display:flex;align-items:center;gap:13px;margin-bottom:auto}
.auth__brand img{height:34px;filter:brightness(0) invert(1);opacity:.96}
.auth__brand span{color:#fff;font-weight:600;letter-spacing:.2px}
.auth__brand small{
  display:block;color:var(--accent);font-size:10.5px;letter-spacing:2.6px;
  text-transform:uppercase;font-weight:600;margin-top:3px
}
.auth__titre{
  position:relative;color:#fff;font-size:40px;line-height:1.1;letter-spacing:-1.3px;
  font-weight:600;margin:0 0 20px;max-width:12em
}
.auth__titre em{font-style:normal;color:var(--accent)}
.auth__texte{position:relative;color:#9aa3b4;font-size:15.5px;max-width:30em;margin:0 0 38px}
.auth__points{position:relative;display:flex;flex-direction:column;gap:14px;margin-bottom:46px}
.auth__point{display:flex;align-items:center;gap:13px;color:#cfd5df;font-size:14px}
.auth__point i{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;
  background:rgba(240,125,0,.13);border:1px solid rgba(240,125,0,.25);color:var(--accent);
  font-style:normal;font-size:14px
}
.auth__pied{position:relative;color:#5b6477;font-size:12px;letter-spacing:.2px}

.auth__main{display:grid;place-items:center;padding:40px 28px;background:var(--surface)}
.auth__carte{width:100%;max-width:386px}
.auth__carte h1{font-size:25px;letter-spacing:-.6px;margin:0 0 7px;font-weight:600}
.auth__carte p.sous{color:var(--ink-3);margin:0 0 30px;font-size:14px}
.champ{position:relative;margin-bottom:15px}
.champ input{
  width:100%;height:54px;padding:21px 15px 7px;border:1.4px solid var(--border);
  border-radius:var(--r);background:var(--surface);outline:none;transition:var(--t);
}
.champ input:hover{border-color:#d6dbe3}
.champ input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(240,125,0,.13)}
.champ label{
  position:absolute;left:16px;top:17px;color:var(--ink-3);pointer-events:none;
  transition:var(--t);font-size:14px
}
.champ input:focus+label,.champ input:not(:placeholder-shown)+label{
  top:8px;font-size:11px;letter-spacing:.3px;color:var(--ink-3);font-weight:500
}
.champ input:focus+label{color:var(--accent-2)}
.champ__oeil{position:absolute;right:6px;top:11px;width:40px;height:32px;border-radius:8px;
  color:var(--ink-4);display:grid;place-items:center}
.champ__oeil:hover{color:var(--ink-2);background:var(--surface-2)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;
  padding:0 22px;border-radius:var(--r);background:var(--accent);color:#fff;font-weight:600;
  font-size:15px;transition:var(--t);box-shadow:0 6px 18px rgba(240,125,0,.26)
}
.btn:hover{background:var(--accent-2);transform:translateY(-1px);box-shadow:0 10px 24px rgba(240,125,0,.3)}
.btn:active{transform:translateY(0)}
.btn--large{width:100%}
.btn--fantome{background:var(--surface);color:var(--ink-2);border:1.4px solid var(--border);box-shadow:none}
.btn--fantome:hover{background:var(--surface-2);color:var(--ink);border-color:#d6dbe3;box-shadow:none}
.btn[disabled]{opacity:.55;pointer-events:none}
.auth__ligne{display:flex;justify-content:flex-end;margin:-4px 0 22px}
.auth__ligne a{color:var(--ink-3);font-size:13px;transition:var(--t)}
.auth__ligne a:hover{color:var(--accent-2)}
.alerte{
  display:flex;gap:10px;align-items:flex-start;padding:13px 15px;border-radius:var(--r);
  font-size:13.5px;margin-bottom:18px;line-height:1.45
}
.alerte--err{background:var(--red-soft);color:#a62126;border:1px solid #f7cdce}
.alerte--ok{background:var(--green-soft);color:#0b7b45;border:1px solid #c4ecd6}
.alerte--info{background:var(--blue-soft);color:#2a5ca8;border:1px solid #cfe0f8}
.auth__bas{margin-top:26px;color:var(--ink-4);font-size:12.5px;text-align:center}

@media(max-width:940px){
  .auth{grid-template-columns:1fr}
  .auth__aside{display:none}
  .auth__main{background:var(--bg)}
  .auth__carte{background:var(--surface);padding:30px 24px;border-radius:var(--r-xl);
    box-shadow:var(--sh-2);max-width:420px}
}

/* =========================================================================
   COQUE APPLICATIVE
   ========================================================================= */
.coque{display:grid;grid-template-columns:var(--sidebar) 1fr;height:100vh;overflow:hidden}

/* ------------------------------------------------------------------ sidebar */
.cote{
  background:linear-gradient(180deg,var(--navy) 0%,#0b0f19 100%);
  display:flex;flex-direction:column;position:relative;z-index:30
}
.cote__tete{padding:19px 18px 15px;display:flex;align-items:center;gap:11px;
  border-bottom:1px solid rgba(255,255,255,.065)}
.cote__tete img{height:26px;filter:brightness(0) invert(1)}
.cote__tete div{line-height:1.15}
.cote__tete b{color:#fff;font-size:13.5px;font-weight:600;letter-spacing:.1px}
.cote__tete small{display:block;color:var(--accent);font-size:9px;letter-spacing:2px;
  text-transform:uppercase;font-weight:600;margin-top:2px}
.cote__nav{flex:1;overflow-y:auto;padding:14px 10px 10px}
.cote__titre{
  color:#5d6678;font-size:10px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;
  padding:14px 9px 7px
}
.lien{
  display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;color:#a7aebc;
  font-size:13.5px;transition:var(--t);position:relative;margin-bottom:1px;cursor:pointer
}
.lien:hover{background:rgba(255,255,255,.055);color:#e8ebf0}
.lien--actif{background:rgba(240,125,0,.14);color:#fff;font-weight:500}
.lien--actif:before{
  content:'';position:absolute;left:-10px;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:0 3px 3px 0;background:var(--accent)
}
.lien svg{width:16px;height:16px;flex:0 0 auto;opacity:.85}
.lien__nb{
  margin-left:auto;font-size:11px;font-weight:600;min-width:21px;height:19px;padding:0 6px;
  border-radius:20px;display:grid;place-items:center;background:rgba(255,255,255,.1);color:#cfd5df
}
.lien--actif .lien__nb{background:rgba(255,255,255,.17);color:#fff}
.lien__nb--rouge{background:var(--red);color:#fff}
.puce{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.puce--cd{background:#ff6c2c}.puce--lm{background:#52a83b}
.cote__pied{padding:11px 10px 14px;border-top:1px solid rgba(255,255,255,.065)}
.moi{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:10px;
  transition:var(--t);cursor:pointer;width:100%;text-align:left}
.moi:hover{background:rgba(255,255,255,.055)}
.pastille{
  width:32px;height:32px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-size:12px;font-weight:600;color:#fff;letter-spacing:.3px;
  background:linear-gradient(140deg,#f08b1d,#d96f00)
}
.moi div{min-width:0}
.moi b{display:block;color:#eceff3;font-size:13px;font-weight:500;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.moi small{display:block;color:#6c7488;font-size:11px}
.menu{
  position:absolute;bottom:62px;left:10px;right:10px;background:var(--navy-3);
  border:1px solid rgba(255,255,255,.09);border-radius:var(--r);padding:6px;
  box-shadow:0 20px 44px rgba(0,0,0,.45);display:none;z-index:50
}
.menu.ouvert{display:block;animation:surgir var(--t)}
@keyframes surgir{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.menu button{display:flex;width:100%;align-items:center;gap:10px;padding:9px 10px;
  border-radius:8px;color:#b9c0cd;font-size:13px;text-align:left;transition:var(--t)}
.menu button:hover{background:rgba(255,255,255,.07);color:#fff}

/* ------------------------------------------------------------------- entête */
.principal{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.entete{
  height:60px;flex:0 0 auto;background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:14px;padding:0 18px;z-index:20
}
.entete h1{font-size:16px;font-weight:600;letter-spacing:-.2px;margin:0;white-space:nowrap}
.entete .sousTitre{color:var(--ink-3);font-size:12.5px;white-space:nowrap}
.recherche{
  margin-left:auto;position:relative;display:flex;align-items:center;flex:0 1 330px
}
.recherche svg{position:absolute;left:12px;width:15px;height:15px;color:var(--ink-4)}
.recherche input{
  width:100%;height:38px;padding:0 13px 0 36px;border-radius:10px;border:1.3px solid var(--border);
  background:var(--surface-2);outline:none;transition:var(--t);font-size:13.5px
}
.recherche input:focus{background:#fff;border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(240,125,0,.11)}
.iconeBtn{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--ink-2);
  border:1.3px solid var(--border);background:var(--surface-2);transition:var(--t);flex:0 0 auto
}
.iconeBtn:hover{background:#fff;color:var(--ink);border-color:#d6dbe3;box-shadow:var(--sh-1)}
.iconeBtn svg{width:16px;height:16px}
.iconeBtn.tourne svg{animation:tourner 1s linear infinite}
@keyframes tourner{to{transform:rotate(360deg)}}

/* -------------------------------------------------------------- 3 colonnes */
.espace{display:grid;grid-template-columns:var(--liste) 1fr var(--panneau);flex:1;min-height:0}
.colonne{min-width:0;display:flex;flex-direction:column;min-height:0}
.colonne--liste{background:var(--surface);border-right:1px solid var(--border)}
.colonne--fil{background:var(--bg)}
.colonne--panneau{background:var(--surface);border-left:1px solid var(--border);overflow-y:auto}

.filtres{display:flex;gap:6px;padding:11px 13px;border-bottom:1px solid var(--border-2);
  overflow-x:auto;flex:0 0 auto;scrollbar-width:none}
.filtres::-webkit-scrollbar{display:none}
.chip{
  padding:6px 12px;border-radius:20px;font-size:12.5px;color:var(--ink-2);white-space:nowrap;
  border:1.3px solid var(--border);background:var(--surface);transition:var(--t);font-weight:500
}
.chip:hover{background:var(--surface-2);border-color:#d6dbe3}
.chip--actif{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip b{margin-left:5px;opacity:.65;font-weight:600}

.liste{flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.fil{
  display:grid;grid-template-columns:38px 1fr;gap:11px;padding:13px 15px;cursor:pointer;
  border-bottom:1px solid var(--border-2);transition:background var(--t);position:relative
}
.fil:hover{background:var(--surface-2)}
.fil--actif{background:var(--accent-soft)}
.fil--actif:after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.fil__av{position:relative;width:38px;height:38px}
.fil__av .pastille{width:38px;height:38px;font-size:13px}
.fil__canal{
  position:absolute;right:-2px;bottom:-2px;width:15px;height:15px;border-radius:50%;
  border:2.2px solid var(--surface);display:grid;place-items:center
}
.fil__canal--cd{background:#ff6c2c}.fil__canal--lm{background:#52a83b}
.fil__haut{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.fil__nom{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;letter-spacing:-.1px}
.fil__date{margin-left:auto;color:var(--ink-4);font-size:11px;white-space:nowrap;flex:0 0 auto}
.fil__motif{font-size:12.5px;color:var(--ink-2);margin-bottom:3px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.fil__apercu{
  font-size:12.5px;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;line-height:1.42
}
.fil__tags{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
.tag{
  font-size:10.5px;font-weight:600;letter-spacing:.2px;padding:3px 7px;border-radius:6px;
  display:inline-flex;align-items:center;gap:4px
}
.tag--rouge{background:var(--red-soft);color:#bf2e32}
.tag--ambre{background:var(--amber-soft);color:#a8690b}
.tag--vert{background:var(--green-soft);color:#0d7a45}
.tag--gris{background:#f1f3f6;color:var(--ink-2)}
.tag--bleu{background:var(--blue-soft);color:#2a5ca8}

.vide{display:grid;place-items:center;height:100%;padding:40px;text-align:center}
.vide div{max-width:300px}
.vide svg{width:42px;height:42px;color:var(--ink-4);margin-bottom:14px}
.vide b{display:block;font-size:15px;margin-bottom:6px;font-weight:600}
.vide p{color:var(--ink-3);font-size:13.5px;margin:0;line-height:1.5}

/* ------------------------------------------------------------- conversation */
.fil__tete{
  flex:0 0 auto;background:var(--surface);border-bottom:1px solid var(--border);
  padding:11px 16px;display:flex;align-items:center;gap:11px;flex-wrap:nowrap;min-width:0
}
.fil__tete .pastille{width:36px;height:36px}
.fil__ident{min-width:0;flex:1 1 auto}
.fil__ident b{display:block;font-size:14.5px;letter-spacing:-.15px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.fil__ident small{display:block;color:var(--ink-3);font-size:12.3px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.fil__actions{margin-left:auto;display:flex;gap:6px;align-items:center;flex:0 0 auto}
.segm{display:flex;background:var(--surface-2);border:1.3px solid var(--border);
  border-radius:10px;padding:2px;gap:2px}
.segm button{padding:6px 10px;border-radius:8px;font-size:12.3px;color:var(--ink-2);
  transition:var(--t);font-weight:500;white-space:nowrap}
.segm button:hover{color:var(--ink);background:#fff}
.segm button.on{background:var(--ink);color:#fff;box-shadow:var(--sh-1)}

.messages{flex:1;overflow-y:auto;padding:22px 24px 10px;display:flex;
  flex-direction:column;gap:16px}
.sep{display:flex;align-items:center;gap:12px;color:var(--ink-4);font-size:11px;
  letter-spacing:.4px;text-transform:uppercase;font-weight:600;margin:4px 0}
.sep:before,.sep:after{content:'';height:1px;background:var(--border);flex:1}
.msg{display:flex;gap:11px;max-width:min(760px,86%)}
.msg--sortant{margin-left:auto;flex-direction:row-reverse}
.msg__av{width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-size:11px;font-weight:600;color:#fff}
.msg--entrant .msg__av{background:linear-gradient(140deg,#5b6b86,#39455c)}
.msg--mp .msg__av{background:linear-gradient(140deg,#8c93a3,#616a7d)}
.msg--sortant .msg__av{background:linear-gradient(140deg,#f08b1d,#d96f00)}
.msg__corps{min-width:0}
.msg__meta{display:flex;gap:8px;align-items:baseline;margin-bottom:5px;font-size:11.5px;
  color:var(--ink-3)}
.msg--sortant .msg__meta{justify-content:flex-end}
.msg__meta b{color:var(--ink-2);font-weight:600;font-size:12px}
.bulle{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);
  padding:13px 16px;font-size:13.8px;line-height:1.58;white-space:pre-wrap;word-break:break-word;
  box-shadow:var(--sh-1)
}
.msg--entrant .bulle{border-top-left-radius:5px}
.msg--mp .bulle{background:#f7f8fa;border-style:dashed}
.msg--sortant .bulle{
  background:linear-gradient(145deg,#fff6ec,#fff1e2);border-color:#ffdfbc;
  border-top-right-radius:5px
}
.bulle__pj{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px;padding-top:11px;
  border-top:1px dashed #e2e6ec}
.pj{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:8px;
  background:var(--surface-2);border:1px solid var(--border);font-size:12px;color:var(--ink-2);
  transition:var(--t)}
.pj:hover{background:#fff;border-color:var(--accent);color:var(--accent-2)}
.pj svg{width:13px;height:13px}

/* -------------------------------------------------------------- composition */
.compo{flex:0 0 auto;background:var(--surface);border-top:1px solid var(--border);padding:13px 20px 16px}
.compo__cadre{border:1.4px solid var(--border);border-radius:var(--r-l);background:var(--surface);
  transition:var(--t);overflow:hidden}
.compo__cadre.focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(240,125,0,.1)}
.compo textarea{
  width:100%;border:0;outline:none;resize:none;padding:14px 16px 6px;min-height:84px;
  max-height:260px;font-size:13.8px;line-height:1.58;background:transparent
}
.compo__barre{display:flex;align-items:center;gap:8px;padding:8px 10px 9px 12px;
  border-top:1px solid var(--border-2);background:var(--surface-2)}
.compo__barre .compte{margin-left:auto;color:var(--ink-4);font-size:11.5px}
.lienOutil{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:9px;
  color:var(--ink-2);font-size:12.5px;transition:var(--t);font-weight:500;white-space:nowrap;
  cursor:pointer}
.lienOutil:hover{background:#fff;color:var(--ink);box-shadow:var(--sh-1)}
.lienOutil svg{width:15px;height:15px}
.btn--envoi{height:38px;padding:0 17px;border-radius:10px;font-size:13.5px;
  box-shadow:0 4px 12px rgba(240,125,0,.24)}
.jointes{display:flex;flex-wrap:wrap;gap:7px;padding:0 12px 10px}
.jointe{display:inline-flex;align-items:center;gap:8px;padding:6px 8px 6px 10px;border-radius:8px;
  background:var(--accent-soft);border:1px solid #ffdfbc;font-size:12px;color:#9a5200}
.jointe button{color:#b06200;width:18px;height:18px;border-radius:5px;display:grid;place-items:center}
.jointe button:hover{background:#ffe3c2}

/* ----------------------------------------------------------------- panneau */
.carte{border-bottom:1px solid var(--border-2);padding:17px 18px}
.carte h3{
  font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-3);
  margin:0 0 13px;font-weight:600;display:flex;align-items:center;gap:8px
}
.carte h3 .tag{margin-left:auto;text-transform:none;letter-spacing:0}
.paire{display:flex;gap:10px;padding:5px 0;font-size:13px;align-items:baseline}
.paire span{color:var(--ink-3);flex:0 0 108px;font-size:12.5px}
.paire div{color:var(--ink);font-weight:500;min-width:0;word-break:break-word}
.paire a{color:var(--blue);font-weight:500}
.paire a:hover{text-decoration:underline}
.produit{display:flex;gap:11px;padding:10px 0;border-top:1px dashed var(--border)}
.produit:first-of-type{border-top:0}
.produit img{width:44px;height:44px;border-radius:9px;object-fit:cover;background:var(--surface-2);
  border:1px solid var(--border);flex:0 0 auto}
.produit__ph{width:44px;height:44px;border-radius:9px;background:var(--surface-2);
  border:1px solid var(--border);display:grid;place-items:center;color:var(--ink-4);flex:0 0 auto}
.produit b{display:block;font-size:12.8px;font-weight:600;line-height:1.35;margin-bottom:3px}
.produit small{color:var(--ink-3);font-size:11.5px;display:block}
.suivi{
  display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:var(--r);
  background:var(--blue-soft);border:1px solid #d6e4fa;margin-top:4px
}
.suivi b{font-size:13px;letter-spacing:.3px;font-family:ui-monospace,Menlo,monospace}
.suivi small{display:block;color:#3f6193;font-size:11.5px}
.note{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;
  padding:10px 12px;font-size:12.8px;margin-bottom:8px;line-height:1.5}
.note small{display:block;color:var(--ink-4);font-size:11px;margin-top:5px}
.noteSaisie{display:flex;gap:7px;margin-top:4px}
.noteSaisie input{flex:1;height:36px;padding:0 11px;border:1.3px solid var(--border);
  border-radius:9px;outline:none;font-size:12.8px;background:var(--surface-2)}
.noteSaisie input:focus{background:#fff;border-color:var(--accent)}

/* ------------------------------------------------------------------- modale */
.voile{
  position:fixed;inset:0;background:rgba(10,14,22,.5);backdrop-filter:blur(3px);
  display:none;place-items:center;z-index:100;padding:22px
}
.voile.ouvert{display:grid;animation:apparaitre 150ms ease-out}
@keyframes apparaitre{from{opacity:0}to{opacity:1}}
.modale{
  background:var(--surface);border-radius:var(--r-xl);width:100%;max-width:580px;
  box-shadow:var(--sh-3);max-height:88vh;display:flex;flex-direction:column;
  animation:monter 200ms cubic-bezier(.2,.8,.2,1)
}
@keyframes monter{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.modale__tete{padding:20px 22px 15px;border-bottom:1px solid var(--border-2);display:flex;
  align-items:center;gap:12px}
.modale__tete h2{font-size:17px;margin:0;font-weight:600;letter-spacing:-.3px}
.modale__tete small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:2px;font-weight:400}
.modale__corps{padding:20px 22px;overflow-y:auto}
.modale__pied{padding:14px 22px 18px;display:flex;gap:9px;justify-content:flex-end;
  border-top:1px solid var(--border-2)}
.grille2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tableau{width:100%;border-collapse:collapse;font-size:13px}
.tableau th{text-align:left;color:var(--ink-3);font-size:11px;letter-spacing:1.1px;
  text-transform:uppercase;font-weight:600;padding:0 10px 9px}
.tableau td{padding:11px 10px;border-top:1px solid var(--border-2);vertical-align:middle}
.tableau tr:hover td{background:var(--surface-2)}

/* ------------------------------------------------------------------- toasts */
.toasts{position:fixed;bottom:22px;right:22px;display:flex;flex-direction:column;gap:9px;z-index:200}
.toast{
  background:var(--navy-3);color:#eef0f4;padding:13px 17px;border-radius:var(--r);font-size:13.5px;
  box-shadow:0 14px 34px rgba(0,0,0,.3);display:flex;gap:10px;align-items:center;max-width:380px;
  animation:glisser 220ms cubic-bezier(.2,.8,.2,1);border:1px solid rgba(255,255,255,.08)
}
@keyframes glisser{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
.toast--ok{border-left:3px solid var(--green)}
.toast--err{border-left:3px solid var(--red)}

/* --------------------------------------------------------------- squelettes */
.sq{background:linear-gradient(90deg,#eef0f3 25%,#f6f7f9 50%,#eef0f3 75%);
  background-size:400% 100%;animation:brille 1.3s ease-in-out infinite;border-radius:7px}
@keyframes brille{0%{background-position:100% 0}100%{background-position:0 0}}
.sqFil{padding:14px 15px;border-bottom:1px solid var(--border-2);display:grid;
  grid-template-columns:38px 1fr;gap:11px}
.sqFil .r1{height:38px;width:38px;border-radius:50%}
.sqFil .r2{height:11px;width:58%;margin-bottom:8px}
.sqFil .r3{height:10px;width:88%;margin-bottom:6px}
.sqFil .r4{height:10px;width:70%}

/* ------------------------------------------------------------- responsivité */
.retour{display:none}
@media(max-width:1560px){:root{--panneau:330px;--liste:340px}}
@media(max-width:1340px){:root{--panneau:316px;--liste:318px}}
@media(max-width:1180px){
  .espace{grid-template-columns:var(--liste) 1fr}
  .colonne--panneau{
    position:fixed;right:0;top:60px;bottom:0;width:360px;z-index:40;box-shadow:var(--sh-3);
    transform:translateX(100%);transition:transform 240ms cubic-bezier(.2,.8,.2,1)
  }
  .colonne--panneau.ouvert{transform:none}
}
@media(max-width:900px){
  :root{--sidebar:0px}
  .coque{grid-template-columns:1fr}
  .cote{position:fixed;left:0;top:0;bottom:0;width:252px;transform:translateX(-100%);
    transition:transform 240ms cubic-bezier(.2,.8,.2,1);box-shadow:var(--sh-3)}
  .cote.ouvert{transform:none}
  .espace{grid-template-columns:1fr}
  .colonne--liste{display:flex}
  .colonne--fil{display:none}
  body.lecture .colonne--liste{display:none}
  body.lecture .colonne--fil{display:flex}
  .retour{display:grid}
  .colonne--panneau{width:min(360px,92vw)}
  .messages{padding:16px 14px 6px}
  .msg{max-width:94%}
  .compo{padding:10px 13px 13px}
  .fil__tete{flex-wrap:wrap;padding:9px 11px;gap:9px}
  .fil__ident{flex:1 1 auto}
  .fil__actions{order:3;width:100%;margin-left:0;justify-content:flex-start}
  .compo__barre .compte{display:none}
  .lienOutil{font-size:0;gap:0;padding:8px 9px}
  .lienOutil svg{width:16px;height:16px}
  .entete{padding:0 13px;gap:10px}
  .entete h1{font-size:15px}
  .entete .sousTitre{display:none}
}