:root{
  --prim:#430A4B; --lime:#AEBF38; --gold:#F5C518; --paper:#FFFFFF; --ink:#212529;
  --muted:#5D5D5D; --line:#E9E9E9; --soft:#F3F3F3; --violet-l:#F3EDF5; --lime-l:#F8F9F0;
  --select:#EFF3DC; --select-h:#E3EBC4; --amber:#8A5F00; --crit:#A93226;
  --e-fait:#1FA13C; --e-encours:#E5730B; --e-attente:#DE1F17;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:Sora,'Segoe UI',system-ui,sans-serif;
  font-size:15px; color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; min-height:100%;
}
body.app{display:flex; flex-direction:column; height:100%; overflow:hidden}
a{color:var(--prim)}
button,input,select{font-family:inherit}
.mono{font-family:var(--mono)}

/* Porte — fond violet, rien n'annonce ce qui est derrière */
body.porte{background:var(--prim); color:#fff; display:flex; align-items:stretch}
.cadre{width:100%; max-width:1180px; margin:0 auto; padding:44px 40px;
  display:flex; flex-direction:column}
.haut .marque{font-size:22px; font-weight:800; letter-spacing:-.4px; color:#fff}
.filet{width:48px; height:3px; background:var(--lime); margin-bottom:18px}
.sur{font-size:12px; font-weight:300; letter-spacing:.2em; text-transform:uppercase;
  color:var(--lime); margin-bottom:20px}
body.porte h1{font-size:clamp(34px,6.4vw,58px); font-weight:800; line-height:1.02;
  letter-spacing:-.025em; margin:0 0 26px}
body.porte .milieu p{margin:0; font-size:15px; font-weight:300; line-height:1.6;
  color:rgba(255,255,255,.72); max-width:52ch}
body.porte form{margin-top:34px; display:flex; flex-wrap:wrap; gap:10px; align-items:center}
body.porte input{
  font-size:16px; color:#fff; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.26); border-radius:3px;
  padding:0 18px; height:52px; width:288px; max-width:100%
}
body.porte .champ-mdp{position:relative; width:288px; max-width:100%}
body.porte .champ-mdp input{width:100%; padding-right:48px}
body.porte .voir-mdp{
  position:absolute; right:0; top:0; width:48px; height:52px;
  border:0; background:transparent; color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0
}
body.porte .voir-mdp .ico{width:20px; height:20px; color:#fff}
body.porte .voir-mdp .oeil-barre-trait{display:none}
body.porte .voir-mdp[aria-pressed="true"] .oeil-barre-trait{display:block}
body.porte .voir-mdp:focus{outline:2px solid var(--lime); outline-offset:-4px}
body.porte input:focus,
body.porte .champ-mdp:focus-within input{outline:none; border-color:var(--lime); background:rgba(255,255,255,.1)}
body.porte input::placeholder{color:rgba(255,255,255,.42)}
body.porte button[type=submit]{
  font-size:15px; font-weight:600; color:var(--prim); background:var(--lime);
  border:0; border-radius:3px; height:52px; padding:0 26px; cursor:pointer
}
body.porte button[type=submit]:hover{background:#BDCF44}
.err{width:100%; font-size:13px; color:var(--gold); margin-top:2px}

/* Barre 64px — même grammaire que le portail Missions */
.bar{
  flex:0 0 auto; height:64px; background:var(--prim); color:#fff;
  display:flex; align-items:center; gap:18px; padding:0 24px;
  position:sticky; top:0; z-index:40; overflow:visible
}
.bar-logo{display:flex; align-items:center; flex:0 0 auto}
.bar img{height:27px; width:auto; display:block}
.bar .ident{flex:0 0 auto; min-width:0}
.bar .ident b{display:block; font-size:11px; font-weight:600; line-height:1.25; letter-spacing:.01em}
.bar .ident.marque b{
  font-size:22px; font-weight:800; letter-spacing:-.04em; line-height:1;
  text-transform:none
}
.bar .ident.qui b{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; font-weight:500}
.onglets{
  flex:1 1 auto; display:flex; align-items:center; justify-content:center;
  gap:4px; min-width:0; overflow:visible
}
.onglets .miss{position:relative; display:flex; align-items:center}
.onglets > .miss > a{
  display:flex; align-items:center; height:34px; padding:0 13px;
  color:#fff; text-decoration:none; background:transparent;
  font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  white-space:nowrap; box-shadow:inset 0 -3px 0 transparent
}
.onglets > .miss > a:hover,.onglets > .miss > a.ici,
.onglets .miss.ouvert > a{color:var(--lime); box-shadow:inset 0 -3px 0 var(--lime)}
.onglets .miss > .vol{
  position:absolute; top:100%; left:0; z-index:80; display:none; padding-top:6px
}
.onglets .miss:hover > .vol,.onglets .miss.ouvert > .vol{display:block}
.onglets .vol .dedans{
  background:#fff; border:1px solid var(--line); border-top:0; min-width:224px
}
.onglets .vol .col1{padding:5px 0}
.onglets .vol a{
  display:flex; align-items:center; gap:8px; padding:10px 15px; color:var(--prim);
  text-decoration:none; font-size:13px; font-weight:500; letter-spacing:0;
  text-transform:none; box-shadow:none; white-space:nowrap
}
.onglets .vol a .ico-robot{width:16px; height:16px; flex:0 0 auto}
.onglets .vol a:hover{background:var(--lime-l); color:var(--prim)}
.onglets .vol a.actif{background:var(--select); color:var(--prim); font-weight:600}
.bar .sep{width:1px; height:26px; background:#65366B; flex:0 0 auto; margin:0 4px 0 auto}
.bar .lien{
  flex:0 0 auto; height:30px; padding:0 13px; border-radius:3px;
  background:var(--lime); color:var(--prim); text-decoration:none;
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.06em;
  display:inline-flex; align-items:center
}
.bar .lien:hover{background:#C6D65C}
.bar .lien.actif{background:#fff}
.bar .sortir{
  flex:0 0 auto; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:#A184A5; text-decoration:none
}
.bar .sortir:hover{color:#fff}

.shell{display:flex; flex:1; min-height:0; align-items:stretch}
.tdm{
  flex:0 0 240px; width:240px; border-right:1px solid var(--line);
  background:#F7F5F8; padding:14px 0 28px; overflow:auto
}
.tdm-kicker{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--prim); margin:10px 0 4px; padding:0 16px
}
.tdm-agent{
  display:flex; align-items:flex-start; gap:8px; padding:10px 16px;
  text-decoration:none; color:var(--prim); font-size:13px; font-weight:600
}
.tdm-agent .ico-robot{width:16px; height:16px; flex:0 0 auto; margin-top:2px}
.tdm-agent.ici{background:var(--select); box-shadow:inset 3px 0 0 var(--lime)}
.tdm-etat{
  display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); font-weight:500; margin-top:2px
}
.tdm-sous{padding:0 12px 10px 28px}
.tdm-sous a{
  display:block; padding:7px 10px; text-decoration:none; color:var(--prim);
  font-size:12.5px; font-weight:500; border-radius:3px
}
.tdm-sous a.ici{background:var(--select); box-shadow:inset 3px 0 0 var(--lime)}
.tdm-pre{
  display:block; height:0; margin:8px 10px 10px;
  border-top:1px solid var(--line)
}
.tdm-sous-vide{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); padding:6px 10px
}
.tdm a:hover{background:var(--lime-l)}
.tdm-sous a:hover{background:var(--lime-l)}

.page{flex:1; min-width:0; min-height:0; overflow:auto; padding:26px 32px 48px; display:flex; flex-direction:column}

.cartes{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch;
  gap:14px; width:100%; margin:auto
}
.cartes-accueil{
  display:grid; grid-template-columns:repeat(4, minmax(min-content, 1fr));
  gap:18px; width:100%; max-width:100%; margin:auto
}
.mcarte{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid #E3E0E6; border-top:4px solid var(--line); border-radius:4px;
  padding:17px 19px 15px; text-decoration:none; color:inherit;
  flex:0 1 280px; width:280px; max-width:100%
}
.accueil-vignette{
  flex:none; width:auto; max-width:none; min-width:min-content;
  padding:20px 22px 18px
}
.mcarte.vignette-marketing{border-top-color:var(--lime)}
.mcarte.vignette-finance{border-top-color:var(--amber)}
.mcarte.vignette-commercial{border-top-color:var(--prim)}
.mcarte.vignette-direction{border-top-color:var(--gold)}
.mcarte h2{margin:0; font-size:18.5px; font-weight:800; letter-spacing:-.4px; color:var(--prim); line-height:1.2}
.mcarte h2 a{color:inherit; text-decoration:none}
.ico{width:16px; height:16px; display:block; color:var(--prim)}
.ico-robot{width:18px; height:18px}
.titre-ligne{
  display:grid; grid-template-columns:minmax(0,1fr) 28px;
  align-items:center; gap:10px; min-height:28px;
  text-decoration:none; color:inherit; cursor:pointer
}
.titre-ligne h2{color:var(--prim)}
.titre-agent{display:flex; align-items:center; gap:8px; min-width:0}
.btn-voir{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; padding:0; border-radius:3px; flex:0 0 auto;
  background:var(--select); color:var(--prim); text-decoration:none; pointer-events:none
}
.titre-ligne:hover .btn-voir,.agent-puce:hover .btn-voir,.mcarte:hover .btn-voir{
  background:var(--select-h)
}
.agents-dans{display:flex; flex-direction:column; gap:8px; margin-top:14px; flex:1}
.agent-puce{
  display:grid; grid-template-columns:28px minmax(min-content,1fr) 28px;
  align-items:center; gap:10px; min-height:44px;
  padding:0; border:1px solid var(--line); border-radius:3px;
  text-decoration:none; color:inherit; cursor:pointer
}
.agent-puce .ico-robot{justify-self:center}
.agent-puce:hover{background:var(--lime-l)}
.agent-puce b{font-size:14px; font-weight:700; color:var(--prim); line-height:1.2; white-space:nowrap}
.agent-nom{
  display:flex; flex-direction:row; align-items:baseline; gap:8px;
  min-width:min-content; overflow:visible; white-space:nowrap
}
.accueil-vignette .titre-ligne{
  grid-template-columns:minmax(min-content,1fr) 28px;
  border:1px solid transparent
}
.non-cable{
  font-size:11px; font-weight:600; color:var(--muted);
  white-space:nowrap; flex:0 0 auto
}
.agent-puce.eteint,
.mcarte.eteint,
.tdm-agent.eteint,
.tdm-agent.ici.eteint,
.onglets .vol a.eteint,
.onglets .vol a.actif.eteint{
  background:var(--lime-l);
  color:#8A8A8A
}
.agent-puce.eteint{border-color:#E8EAD8}
.mcarte.eteint{
  border-left-color:#E8EAD8;
  border-right-color:#E8EAD8;
  border-bottom-color:#E8EAD8
}
.agent-puce.eteint b,
.agent-puce.eteint .ico-robot,
.mcarte.eteint h2,
.mcarte.eteint .ico-robot,
.tdm-agent.eteint,
.tdm-agent.eteint .ico-robot,
.onglets .vol a.eteint,
.onglets .vol a.eteint .ico-robot{
  color:#8A8A8A
}
.agent-puce.eteint .btn-voir,
.mcarte.eteint .btn-voir{
  background:#F1F3E6; color:#A3A3A3
}
.agent-puce.eteint:hover,
.mcarte.eteint:hover,
.tdm-agent.eteint:hover,
.onglets .vol a.eteint:hover{
  background:#F3F5E8
}
.agent-puce.eteint .non-cable,
.mcarte.eteint .non-cable,
.tdm-agent.eteint .tdm-etat,
.tdm-sous-vide{
  color:#9A9A9A
}
.carte-haut{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.mcarte .brief{margin:12px 0 14px; font-size:12.8px; line-height:1.55; color:#5A5266}
.intro-rubrique{max-width:68ch;color:#5A5266;margin:0 0 18px;font-size:14px;line-height:1.55}
.etatp.fait{background:var(--e-fait)}
.piece.pile-publier{border-color:#C8E6C9;border-left-color:var(--e-fait);background:#F4FBF4}
.corriger-bloc{
  display:grid; grid-template-columns:minmax(0, 552px) minmax(0, 1fr);
  gap:18px; align-items:start; width:100%
}
.corriger-espace{display:flex; flex-direction:column; gap:10px; min-width:0}
.corriger-espace label{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted)
}
.piece-corriger{width:100%; max-width:1100px}
.corriger-texte{
  width:100%; min-height:280px; font-family:var(--mono); font-size:13px;
  line-height:1.5; border:1px solid var(--line); border-radius:4px;
  padding:12px; display:block; resize:vertical
}
@media (max-width:900px){
  .corriger-bloc{grid-template-columns:1fr}
}
.gabarits{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%, 1080px), 1fr));gap:24px;margin-top:8px}
.gabarit-carte{border:1px solid #E3E0E6;border-radius:4px;padding:14px 14px 10px;background:#fff;overflow:auto}
.gabarit-carte h4{margin:0;font-size:16px;font-weight:800;color:var(--prim)}
.gabarit-vue{overflow:auto;margin-top:10px;border:1px solid var(--line);border-radius:3px;background:#F7F5F8;max-height:none}
.gabarit-vue iframe{width:1080px;height:1350px;border:0;display:block}
.source-long{max-height:640px}
.etatp{
  display:inline-flex; align-items:center; gap:6px; height:23px; padding:0 11px;
  border-radius:12px; font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:#fff; width:max-content
}
.etatp.encours{background:var(--e-encours)}
.etatp.attente{background:var(--muted)}
.mcarte .bas{margin-top:auto; padding-top:13px}
.mcarte .actions button,.mcarte .actions a,.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:38px; padding:0 16px; border:0; border-radius:3px; cursor:pointer;
  font-size:12.5px; font-weight:600; text-decoration:none
}
.btn-valider{background:var(--lime); color:var(--prim)}
.btn-valider:hover{background:#BDCF44}
.btn-second{background:var(--select); color:var(--prim)}
.btn-danger{background:var(--crit); color:#fff}

.gestes{
  display:flex; flex-wrap:wrap; gap:12px 20px; margin-top:12px;
  align-items:center; justify-content:space-between
}
.gestes form{margin:0}
.gestes-princ,.gestes-outil{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.gestes-outil{margin-left:auto}
.btn-petit{height:30px; padding:0 10px; font-size:12px}
.pieces-grille{
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  width:100%;
  align-items:flex-start
}
.jour-bloc{margin:0 0 28px; min-width:0}
.jour-rang{
  display:flex; flex-wrap:nowrap; gap:14px; overflow-x:auto;
  padding:0 0 12px; align-items:stretch; width:100%
}
.piece-sujet{flex:0 0 200px; width:200px; min-width:200px; max-width:200px}
.piece-vigne{
  display:flex; flex-direction:column; width:200px;
  height:calc(192px + 18px + 3.9em); padding:0;
  border:1px solid #E0DFDC; border-radius:4px; background:#fff; cursor:pointer;
  overflow:hidden; text-align:left; color:inherit
}
.piece-vigne:hover{border-color:var(--prim); box-shadow:inset 0 -3px 0 var(--lime)}
.vigne-cadre{position:relative; display:block; flex:0 0 192px; height:192px; overflow:hidden; background:#fff}
.piece-vigne img{width:100%; height:100%; object-fit:cover; display:block}
.vigne-cadre .vigne-visuel{display:none}
.vigne-cadre .vigne-visuel.ici{display:block}
.filtres{
  display:flex; flex-wrap:wrap; gap:12px 18px; align-items:flex-end;
  margin:0 0 22px
}
.filtres label{
  font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--prim);
  display:flex; flex-direction:column; gap:6px
}
.filtres select,.filtres input{
  font-size:13px; height:36px; padding:0 10px; min-width:180px;
  border:1px solid var(--line); border-radius:3px; background:#fff; color:var(--ink)
}
.filtres-nb{font-family:var(--mono); font-size:11px; color:var(--muted); padding-bottom:10px}
table.comptes-filtre thead th{
  position:sticky; top:0; background:var(--paper); z-index:1
}
.vigne-titre{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  flex:0 0 calc(18px + 3.9em); height:calc(18px + 3.9em);
  padding:8px 8px 10px; font-size:12px; font-weight:600;
  line-height:1.3; color:var(--prim); overflow:hidden;
  word-break:break-word
}
.vigne-texte{
  display:block; padding:10px 10px 28px; font-size:11px; line-height:1.35;
  color:#191919; overflow:hidden; height:100%
}
.vigne-canaux{
  position:absolute; left:0; right:0; bottom:0; display:flex; gap:4px;
  padding:6px 8px; background:linear-gradient(transparent, rgba(255,255,255,.94));
  pointer-events:none
}
.vigne-canaux .ico-canal{width:14px; height:14px; color:var(--prim)}
.piece-pop{
  --zoom:1; --pop-base:400px;
  width:max-content; height:fit-content;
  max-width:calc(100vw - 40px); max-height:calc(100vh - 40px);
  min-width:0; overflow:hidden; box-sizing:border-box; margin:auto;
  border:1px solid var(--line); border-radius:4px; padding:0;
  background:#fff; color:inherit;
  flex-direction:column
}
.piece-pop[open]{display:flex}
.piece-pop:has(.declinaison[data-canal="facebook"].ici){--pop-base:380px}
.piece-pop:has(.declinaison[data-canal="instagram"].ici){--pop-base:368px}
.piece-pop:has(.declinaison[data-canal="x"].ici){--pop-base:380px}
.piece-pop:has(.declinaison[data-canal="linkedin"].ici){--pop-base:400px}
.piece-pop::backdrop{background:rgba(67, 10, 75, .55)}
.pop-bandeau{
  flex:0 0 auto; display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-bottom:1px solid var(--line);
  background:#fff; position:sticky; top:0; z-index:3
}
.pop-zoom{
  display:flex; align-items:center; gap:4px; margin:0 0 0 auto
}
.pop-zoom-pct{
  min-width:4.2em; text-align:center;
  font-family:var(--mono); font-size:12px; font-weight:600; color:var(--prim)
}
.pop-fermer{display:flex; margin:0}
.pop-titre{
  flex:0 0 auto; margin:0; padding:8px 12px 0;
  font-size:13px; font-weight:600; color:var(--prim); line-height:1.35
}
.pop-corps{
  flex:1 1 auto; min-height:0; overflow:auto;
  padding:10px; display:flex; justify-content:center; align-items:flex-start
}
.pop-visionneuse{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  gap:8px; padding:4px 10px 10px; border-top:1px solid var(--line)
}
.pop-visionneuse-pos{
  min-width:4.8em; text-align:center;
  font-family:var(--mono); font-size:12px; font-weight:600; color:var(--muted)
}
.piece-pop .declinaison.ici{
  display:flex; flex-direction:column; align-items:stretch;
  width:max-content; max-width:100%; height:auto; min-height:0;
  flex-shrink:0
}
.piece-pop .reseau{
  width:calc(var(--pop-base) * var(--zoom));
  max-width:none; flex-shrink:0
}
.piece-pop .reseau-texte{
  max-height:none; overflow:visible; font-size:13px; padding:10px 12px 8px
}
.piece-pop .reseau-visuel{
  width:100%; height:auto; max-height:none;
  object-fit:contain; object-position:top center;
  display:block; background:#fff; flex-shrink:0
}
.piece-pop .gestes{
  flex:0 0 auto; position:static; width:calc(var(--pop-base) * var(--zoom));
  background:#fff; padding:8px 0 0; margin-top:8px;
  flex-direction:column; align-items:stretch; gap:8px;
  justify-content:flex-start; flex-shrink:0
}
.piece-pop .gestes-princ{
  display:grid; grid-template-columns:1fr 1fr 1fr;
  width:100%; margin:0; align-items:center
}
.piece-pop .gestes-princ > :first-child{justify-self:start}
.piece-pop .gestes-princ > :nth-child(2){justify-self:center}
.piece-pop .gestes-princ > :last-child{justify-self:end}
.piece-pop .gestes-outil{
  display:flex; justify-content:center; width:100%; margin:0
}
.piece-pop .refus-menu{left:auto; right:0}
.pop-bandeau .canal-btn{width:28px; height:28px}
.pop-bandeau .ico-canal{width:14px; height:14px}
.canaux-sel{display:flex; gap:6px; margin:0; align-items:center}
.canal-btn{
  width:36px; height:36px; padding:0; border:1px solid var(--line); border-radius:3px;
  background:#fff; color:var(--prim); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center
}
.canal-btn:hover{background:var(--lime-l)}
.canal-btn.ici{background:var(--select); box-shadow:inset 0 -3px 0 var(--lime)}
.ico-canal{width:18px; height:18px; display:block}
.declinaison{display:none}
.declinaison.ici{display:block}
.piece-pop .declinaison.ici{
  display:flex; flex-direction:column; align-items:stretch;
  width:max-content; max-width:100%; height:auto; flex-shrink:0
}
.piece-reseau{flex:0 1 552px; width:min(100%, 552px); min-width:0}
.jour-piece{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); font-weight:700;
  margin:0 0 12px
}
.vide-grille{color:var(--muted); margin:0}
.piece-reseau{min-width:0}
.piece-type{
  margin:0 0 8px; font-size:12px; font-weight:600; color:var(--muted);
  text-transform:capitalize
}
.reseau{
  background:#fff; border:1px solid #E0DFDC; border-radius:8px; overflow:hidden
}
.reseau-texte{
  margin:0; padding:12px 16px 10px; font-size:14px; line-height:1.45;
  white-space:pre-wrap; color:#191919
}
.reseau-visuel{width:100%; height:auto; display:block}
.remettre{margin-top:12px}
.remettre .btn{margin-top:10px}
.refus{position:relative}
.refus > summary{
  list-style:none; cursor:pointer
}
.refus > summary::-webkit-details-marker{display:none}
.refus-menu{
  position:absolute; left:0; top:100%; z-index:8; margin-top:4px;
  background:#fff; border:1px solid var(--line); border-radius:3px;
  padding:6px; display:flex; flex-direction:column; gap:6px; min-width:140px
}
.bloc h3{
  font-family:var(--mono); font-size:10.5px; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--prim); margin:0 0 10px
}
.chemin{font-family:var(--mono); font-size:11px; color:var(--muted)}
.source{
  white-space:pre-wrap; font-family:var(--mono); font-size:12px; line-height:1.55;
  background:var(--soft); border:1px solid var(--line); border-radius:4px;
  padding:14px 16px; overflow:auto; max-height:420px; color:#4B4453
}
.piece{
  border:1px solid #F2C89A; border-left:4px solid var(--e-encours);
  border-radius:4px; background:#FFF9F2; padding:16px 20px 15px; margin:0 0 14px
}
.piece h4{margin:0; font-size:17px; font-weight:800; color:var(--prim)}
.piece .delai{
  font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#8A4B06; background:#FCE2C4; padding:0 9px;
  height:22px; display:inline-flex; align-items:center; border-radius:11px
}
.vide-service{
  border:1px solid #E8EAD8; border-left:3px solid var(--lime);
  background:var(--lime-l); padding:20px 22px; margin-top:22px
}
.vide-service p{margin:0; font-size:15px; color:#8A8A8A}
table.comptes{width:100%; border-collapse:collapse; font-size:13px}
table.comptes th,table.comptes td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--line)}
table.comptes th{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--prim)}
.inactif{color:var(--muted)}
.admin-form{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.admin-form input,.admin-form select{
  height:38px; border:1px solid var(--line); border-radius:3px; padding:0 10px
}
.visuel-piece{display:block;width:100%;height:auto;margin:10px 0 0}

@media (max-width:1100px){
  .cartes-accueil{grid-template-columns:repeat(2, minmax(min-content, 1fr))}
}
@media (max-width:640px){
  .cartes-accueil{grid-template-columns:minmax(min-content, 1fr)}
}

@media (max-width:720px){
  .bar{height:auto; flex-wrap:wrap; padding:8px 14px; gap:10px}
  .onglets{order:3; width:100%; justify-content:flex-start; flex-wrap:wrap}
  .bar .sep{margin-left:0}
  .shell{flex-direction:column}
  .tdm{width:100%; flex:0 0 auto; border-right:0; border-bottom:1px solid var(--line)}
  .page,.cadre{padding-left:22px; padding-right:22px}
  body.porte input,
  body.porte .champ-mdp{width:100%}
  body.porte button[type=submit]{width:100%}
}