/* ==========================================================================
   INTECSYS — couche « démonstration »
   Sélecteur de rôle, cadre de téléphone, notifications simulées, parcours,
   journal horodaté, base documentaire.
   N'utilise que les tokens déjà déclarés (bordeaux --brand-700, acier
   --steel-500, Raleway pour les titres, Inter pour le corps).
   ========================================================================== */

/* ------------------------------------------------ 1 · Sélecteur de rôle -- */
.rolebox{margin-left:auto;display:flex;align-items:center;gap:10px;position:relative;flex:none}
.rolebox .flag{font-size:9px;letter-spacing:.13em;text-transform:uppercase;font-weight:800;
  color:var(--brand-700);background:var(--brand-50);border:1px solid var(--brand-100);
  border-radius:var(--r-pill);padding:3px 9px;line-height:1.3;white-space:nowrap}
.rolebtn{display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 13px 5px 5px;
  cursor:pointer;font-family:var(--fs-b);box-shadow:var(--sh-1);transition:.15s;max-width:250px}
.rolebtn:hover{border-color:var(--brand-300)}
.rolebtn .av{width:30px;height:30px;font-size:11px;border-width:0}
.rolebtn .tx{text-align:left;min-width:0}
.rolebtn .tx b{display:block;font-size:12.5px;font-weight:700;color:var(--ink-900);line-height:1.2}
.rolebtn .tx span{display:block;font-size:10.5px;color:var(--ink-400);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rolebtn .car{color:var(--ink-400);flex:none}
.rolebox .lead{font-size:11px;color:var(--ink-400);font-weight:600;white-space:nowrap}

.rolemenu{position:absolute;top:calc(100% + 9px);right:0;z-index:240;width:296px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);padding:7px;display:none;animation:ix-pop .2s var(--ease-out)}
.rolemenu.on{display:block}
.rolemenu .hd{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-400);
  font-weight:800;padding:9px 11px 7px}
.rolemenu .ri{display:flex;align-items:center;gap:11px;width:100%;padding:8px 10px;border-radius:10px;
  border:0;background:transparent;cursor:pointer;text-align:left;font-family:var(--fs-b)}
.rolemenu .ri:hover{background:var(--surface-2)}
.rolemenu .ri.on{background:var(--brand-50)}
.rolemenu .ri .av{width:32px;height:32px;font-size:11.5px;border-width:0;color:#fff;font-weight:700}
.rolemenu .ri b{display:block;font-size:13.5px;color:var(--ink-900);font-weight:700}
.rolemenu .ri span{display:block;font-size:11.5px;color:var(--ink-500)}
.rolemenu .ri .tick{width:auto;height:auto;margin-left:auto;color:var(--brand-700);opacity:0;
  background:none;border-radius:0}
.rolemenu .ri.on .tick{opacity:1}
.rolemenu .ft{font-size:11px;color:var(--ink-400);line-height:1.45;padding:10px 11px 6px;
  border-top:1px solid var(--line-2);margin-top:6px}

/* Le drapeau « mode démonstration » sur la barre latérale. */
.side-demo{margin-top:12px;border:1px dashed rgba(255,255,255,.16);border-radius:10px;
  padding:9px 11px;font-size:10.5px;color:var(--ink-400);line-height:1.5}
.side-demo b{display:block;color:#fff;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:800;margin-bottom:3px}

/* --------------------------------------------- 2 · Notification simulée -- */
.pushzone{position:fixed;top:0;left:0;right:0;z-index:400;display:flex;flex-direction:column;
  align-items:center;gap:10px;padding:14px 14px 0;pointer-events:none}
.push{pointer-events:auto;width:100%;max-width:430px;background:rgba(255,255,255,.94);
  backdrop-filter:blur(18px);border:1px solid rgba(20,23,28,.08);border-radius:20px;
  box-shadow:0 18px 46px rgba(20,23,28,.28);padding:12px 14px;
  animation:push-in .42s cubic-bezier(.16,.9,.3,1.05)}
.push.out{animation:push-out .28s var(--ease-out) forwards}
@keyframes push-in{from{opacity:0;transform:translateY(-120%) scale(.94)}to{opacity:1;transform:none}}
@keyframes push-out{to{opacity:0;transform:translateY(-120%) scale(.94)}}
.push .hd{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.push .appic{width:22px;height:22px;border-radius:6px;background:var(--brand-700);color:#fff;
  display:grid;place-items:center;font-family:var(--fs-h);font-weight:800;font-size:11px;flex:none;
  box-shadow:0 3px 8px rgba(114,11,11,.4)}
.push .appn{font-size:11px;font-weight:700;color:var(--ink-500);letter-spacing:.06em;text-transform:uppercase}
.push .when{margin-left:auto;font-size:11px;color:var(--ink-400);font-weight:600}
.push .ti{font-family:var(--fs-h);font-size:14px;font-weight:800;color:var(--ink-900);line-height:1.3}
.push .bd{font-size:13px;color:var(--ink-600);margin-top:3px;line-height:1.45}
.push .ax{display:flex;gap:8px;margin-top:11px}
.push .ax .btn{flex:1;justify-content:center}
.push.plain{cursor:pointer}

/* ------------------------------------------------ 3 · Cadre de téléphone -- */
.phonewrap{display:flex;flex-direction:column;align-items:center;gap:16px;padding:6px 0 10px}
.phone{width:390px;max-width:100%;background:var(--ink-900);border-radius:46px;padding:11px;
  box-shadow:0 30px 70px rgba(20,23,28,.34),0 0 0 2px var(--ink-700) inset;position:relative;flex:none}
.phone:before{content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);
  width:104px;height:26px;border-radius:14px;background:var(--ink-900);z-index:3}
.phone .screen{background:var(--bg);border-radius:36px;overflow:hidden;position:relative;
  height:748px;display:flex;flex-direction:column}
.phone .status{height:44px;flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:12px 26px 0;font-size:12px;font-weight:700;color:var(--ink-900);
  background:var(--surface)}
.phone .status .rt{display:flex;align-items:center;gap:5px;opacity:.75}
.phone .body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--bg)}
.phone .home{height:22px;flex:none;display:grid;place-items:center;background:var(--surface)}
.phone .home i{width:126px;height:4px;border-radius:2px;background:var(--ink-300);display:block}
.phone .pushzone{position:absolute;padding:52px 10px 0}
.phone .push{max-width:none}
.phonecap{font-size:11.5px;color:var(--ink-400);text-align:center;max-width:390px;line-height:1.5}
.phonecap b{color:var(--ink-600)}
@media(max-width:470px){
  .phone{width:100%;border-radius:32px;padding:7px}
  .phone:before{display:none}
  .phone .screen{border-radius:26px;height:min(680px,74vh)}
  .phone .status{padding-top:8px;height:34px}
}

/* Contenu interne d'un écran de téléphone. */
.ph-top{background:var(--surface);padding:6px 20px 16px;border-bottom:1px solid var(--line)}
.ph-top .kick{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:800;color:var(--brand-700)}
.ph-top h2{font-size:19px;margin-top:4px;line-height:1.25}
.ph-top p{font-size:12.5px;color:var(--ink-500);margin-top:3px}
.ph-pad{padding:16px 18px 22px;display:flex;flex-direction:column;gap:14px}
.ph-foot{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(244,246,249,0),var(--bg) 34%);
  padding:16px 18px 18px;display:flex;flex-direction:column;gap:9px}
.btn-xl{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  border:1px solid transparent;border-radius:14px;padding:15px 18px;font-family:var(--fs-b);
  font-weight:700;font-size:15px;cursor:pointer;transition:.15s}
.btn-xl svg{width:19px;height:19px;flex:none}
.btn-xl.p{background:var(--brand-700);color:#fff;box-shadow:0 8px 20px rgba(114,11,11,.28)}
.btn-xl.p:hover{background:var(--brand-600)}
.btn-xl.p:disabled{background:var(--ink-300);box-shadow:none;cursor:not-allowed}
.btn-xl.g{background:var(--surface);color:var(--ink-800);border-color:var(--line);box-shadow:var(--sh-1)}
.btn-xl.g:hover{background:var(--surface-2)}
.btn-xl.s{background:var(--steel-600);color:#fff;box-shadow:0 8px 20px rgba(47,109,176,.26)}
.btn-xl.s:hover{background:var(--steel-700)}

/* La carte « chantier du jour » — l'information la plus grosse de l'écran. */
.today{background:linear-gradient(155deg,var(--brand-700),var(--brand-800));color:#fff;
  border-radius:var(--r-lg);padding:20px;box-shadow:0 14px 32px rgba(114,11,11,.3)}
.today .kick{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;
  color:rgba(255,255,255,.62)}
.today h3{color:#fff;font-size:23px;margin:7px 0 2px;line-height:1.18}
.today .hr{font-family:var(--fs-h);font-size:33px;font-weight:800;color:#fff;letter-spacing:-.02em;
  margin:12px 0 2px;line-height:1}
.today .adr{font-size:13.5px;color:rgba(255,255,255,.82);line-height:1.45}
.today .btn-xl{margin-top:15px;background:rgba(255,255,255,.15);color:#fff;
  border-color:rgba(255,255,255,.28);box-shadow:none}
.today .btn-xl:hover{background:rgba(255,255,255,.24)}

/* Cases à cocher tactiles. */
.tick-list{display:flex;flex-direction:column;gap:9px}
.tickrow{display:flex;align-items:flex-start;gap:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:14px 15px;cursor:pointer;transition:.14s;text-align:left;
  font-family:var(--fs-b);width:100%}
.tickrow:hover{border-color:var(--ink-300)}
.tickrow .bx{width:24px;height:24px;border-radius:7px;border:2px solid var(--ink-300);flex:none;
  display:grid;place-items:center;color:transparent;transition:.14s;margin-top:1px}
.tickrow.on{background:var(--ok-50);border-color:var(--ok-500)}
.tickrow.on .bx{background:var(--ok-500);border-color:var(--ok-500);color:#fff}
.tickrow .tx b{display:block;font-size:14px;font-weight:600;color:var(--ink-900);line-height:1.35}
.tickrow.on .tx b{color:var(--ok-700)}
.tickrow .tx span{display:block;font-size:12px;color:var(--ink-400);margin-top:2px}

/* Compteur + / − */
.stepper{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:8px 10px}
.stepper button{width:46px;height:46px;border-radius:11px;border:1px solid var(--line);background:var(--surface-2);
  color:var(--ink-700);font-size:22px;font-weight:700;cursor:pointer;display:grid;place-items:center;
  font-family:var(--fs-b);flex:none;line-height:1}
.stepper button:hover{background:var(--brand-50);border-color:var(--brand-300);color:var(--brand-700)}
.stepper .v{flex:1;text-align:center;font-family:var(--fs-h);font-size:26px;font-weight:800;color:var(--ink-900)}
.stepper .v small{display:block;font-family:var(--fs-b);font-size:11.5px;font-weight:600;color:var(--ink-400);
  margin-top:1px;letter-spacing:.04em;text-transform:uppercase}

/* Barre d'étapes du questionnaire. */
.wizbar{background:var(--surface);padding:12px 18px 14px;border-bottom:1px solid var(--line)}
.wizbar .lb{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;color:var(--ink-500);
  margin-bottom:9px}
.wizbar .lb .back{border:0;background:transparent;color:var(--ink-500);cursor:pointer;display:grid;
  place-items:center;padding:0;width:22px;height:22px;margin-left:-4px}
.wizbar .lb .back:hover{color:var(--brand-700)}
.wizbar .lb .q{margin-left:auto;color:var(--brand-700)}
.wizbar .track{height:6px;border-radius:var(--r-pill);background:var(--line);overflow:hidden}
.wizbar .track i{display:block;height:100%;border-radius:inherit;background:var(--brand-700);
  transition:width .34s var(--ease-out)}

/* Grosses cartes de choix (Rien / Vigilance / Blocage). */
.pickgrid{display:flex;flex-direction:column;gap:11px}
.pick{display:flex;align-items:center;gap:14px;background:var(--surface);border:2px solid var(--line);
  border-radius:var(--r-lg);padding:17px 17px;cursor:pointer;text-align:left;width:100%;
  font-family:var(--fs-b);transition:.15s}
.pick:hover{border-color:var(--ink-300)}
.pick .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:var(--surface-2);color:var(--ink-500)}
.pick b{display:block;font-size:15px;color:var(--ink-900);font-weight:700}
.pick span{display:block;font-size:12.5px;color:var(--ink-500);margin-top:2px;line-height:1.4}
.pick.on{border-color:var(--brand-700);background:var(--brand-50)}
.pick.on b{color:var(--brand-700)}
.pick.on.ok{border-color:var(--ok-500);background:var(--ok-50)}
.pick.on.ok b{color:var(--ok-700)}
.pick.on.ok .ic{background:var(--ok-500);color:#fff}
.pick.on.warn{border-color:var(--warn-500);background:var(--warn-50)}
.pick.on.warn b{color:var(--warn-700)}
.pick.on.warn .ic{background:var(--warn-500);color:#fff}
.pick.on.bad{border-color:var(--danger-500);background:var(--danger-50)}
.pick.on.bad b{color:var(--danger-700)}
.pick.on.bad .ic{background:var(--danger-500);color:#fff}

/* Zone photo. */
.dropzone{border:2px dashed var(--border-strong);border-radius:var(--r-lg);background:var(--surface);
  padding:26px 18px;text-align:center;cursor:pointer;transition:.15s;width:100%;font-family:var(--fs-b)}
.dropzone:hover{border-color:var(--brand-600);background:var(--brand-50)}
.dropzone .ic{width:46px;height:46px;border-radius:13px;background:var(--brand-50);color:var(--brand-700);
  display:grid;place-items:center;margin:0 auto 11px}
.dropzone b{display:block;font-size:14px;color:var(--ink-900)}
.dropzone span{display:block;font-size:12px;color:var(--ink-400);margin-top:3px}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px}
.thumb{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--surface);
  position:relative;aspect-ratio:4/3;display:grid;place-items:center;
  background-image:linear-gradient(135deg,var(--steel-50),var(--brand-50))}
.thumb .lb{position:absolute;left:0;right:0;bottom:0;background:rgba(20,23,28,.72);color:#fff;
  font-size:9.5px;font-weight:700;padding:3px 6px;letter-spacing:.02em}
.thumb .ic{color:var(--ink-400)}

/* --------------------------------------------------- 4 · Fil d'avancement -- */
.flow{display:flex;align-items:flex-start;gap:0;width:100%}
.flow .st{flex:1;text-align:center;position:relative;min-width:0}
.flow .st .d{width:26px;height:26px;border-radius:50%;background:var(--surface);border:2px solid var(--line);
  margin:0 auto 8px;display:grid;place-items:center;color:var(--ink-300);position:relative;z-index:2}
.flow .st:before{content:"";position:absolute;top:13px;left:-50%;width:100%;height:2px;background:var(--line);z-index:1}
.flow .st:first-child:before{display:none}
.flow .st .l{font-size:9.5px;font-weight:700;color:var(--ink-400);line-height:1.3;
  padding:0 2px;letter-spacing:-.01em}
.flow .st.done .d{background:var(--ok-500);border-color:var(--ok-500);color:#fff}
.flow .st.done:before{background:var(--ok-500)}
.flow .st.done .l{color:var(--ok-700)}
.flow .st.now .d{background:var(--brand-700);border-color:var(--brand-700);color:#fff;
  box-shadow:0 0 0 4px var(--brand-50)}
.flow .st.now .l{color:var(--brand-700)}

/* ------------------------------------------------ 5 · Bandeau de parcours -- */
/* Sur le fond ardoise foncé du bandeau, --ok-500 (#158a5d) descend sous le seuil
   de contraste : on remonte la même teinte de deux crans, ici et nulle part ailleurs. */
:root{
  --ok-sur-fonce:#7fd0ab;    /* vert « franchi », lisible sur ardoise foncé */
  --texte-sur-fonce:#c2c9d2; /* même gris que la barre latérale (base.css, .nav a) */
}
.scenario{background:var(--ink-900);border-radius:var(--r-lg);padding:15px 18px;margin-bottom:22px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;box-shadow:var(--sh-2)}
.scenario .tt{color:#fff;font-family:var(--fs-h);font-weight:800;font-size:13.5px;flex:none}
.scenario .tt small{display:block;font-family:var(--fs-b);font-size:10.5px;font-weight:600;
  color:var(--ink-400);letter-spacing:.09em;text-transform:uppercase;margin-bottom:2px}
.scenario .steps{display:flex;align-items:center;gap:7px;flex-wrap:wrap;flex:1;min-width:0}
.scenario .sp{display:inline-flex;align-items:center;gap:7px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.08);color:var(--texte-sur-fonce);font-size:11.5px;font-weight:600;padding:5px 12px;
  border:1px solid transparent;cursor:pointer;font-family:var(--fs-b);white-space:nowrap}
.scenario .sp i{width:17px;height:17px;border-radius:50%;background:rgba(255,255,255,.14);
  display:grid;place-items:center;font-size:9.5px;font-weight:800;font-style:normal;color:#fff;flex:none}
.scenario .sp:hover{background:rgba(255,255,255,.15);color:#fff}
.scenario .sp.fixe{cursor:default}
.scenario .sp.fixe:hover{background:rgba(255,255,255,.08);color:var(--texte-sur-fonce)}
.scenario .sp.fixe.done:hover{color:var(--ok-sur-fonce)}
.scenario .sp.fixe.on:hover{background:var(--brand-700);color:#fff}
.scenario .sp.done{color:var(--ok-sur-fonce)}
.scenario .sp.done i{background:var(--ok-500)}
.scenario .sp.on{background:var(--brand-700);color:#fff;border-color:var(--brand-500)}
.scenario .sp.on i{background:rgba(255,255,255,.28)}
.scenario .go{margin-left:auto;flex:none}

/* Le relais entre deux rôles. */
.handoff{display:flex;align-items:center;gap:15px;background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--steel-500);border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--sh-1);
  flex-wrap:wrap}
.handoff .ic{width:40px;height:40px;border-radius:11px;background:var(--steel-50);color:var(--steel-700);
  display:grid;place-items:center;flex:none}
.handoff b{display:block;font-size:14px;color:var(--ink-900);font-family:var(--fs-h)}
.handoff span{display:block;font-size:12.5px;color:var(--ink-500);margin-top:2px;line-height:1.45}
.handoff .btn{margin-left:auto}

/* -------------------------------------------------- 6 · Tableaux de bord -- */
.dashhead{display:flex;align-items:flex-end;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.dashhead .lead h1{font-size:24px}
.dashhead .lead .q{font-size:13.5px;color:var(--ink-500);margin-top:5px}
.dashhead .lead .q b{color:var(--brand-700);font-weight:700}
.dashhead .actions{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}

.blocks{display:grid;gap:18px;grid-template-columns:repeat(3,1fr);align-items:start}
.blocks.c2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1180px){.blocks,.blocks.c2{grid-template-columns:1fr}}

.block .card-h .n{margin-left:auto;font-family:var(--fs-h);font-size:19px;font-weight:800;color:var(--ink-900)}
.block .card-h .n.bad{color:var(--danger-700)}
.block .card-h .n.warn{color:var(--warn-700)}
.block .card-b{padding:6px 20px 14px}

.line{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-2);
  width:100%;text-align:left;background:transparent;border-left:0;border-right:0;border-top:0;
  font-family:var(--fs-b);cursor:pointer}
.line:last-child{border-bottom:0}
.line:hover{background:var(--surface-2)}
.line .pin{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none}
.line .tx{min-width:0;flex:1}
.line .tx b{display:block;font-size:13.5px;font-weight:600;color:var(--ink-900);line-height:1.35}
.line .tx span{display:block;font-size:12px;color:var(--ink-500);margin-top:2px;line-height:1.4}
.line .rt{margin-left:auto;text-align:right;flex:none;padding-left:8px}
.line .rt b{display:block;font-size:13px;font-weight:700;color:var(--ink-800);font-family:var(--fs-h)}
.line .rt span{display:block;font-size:11px;color:var(--ink-400);margin-top:2px}
.line .rt .late{color:var(--danger-700)}

/* Barre temps consommé / temps vendu. */
.burn{margin-top:7px;display:block;width:100%}
.burn .bar{display:block;height:8px;border-radius:var(--r-pill);background:var(--line);overflow:hidden;position:relative}
.burn .bar i{display:block;height:100%;background:var(--steel-500);border-radius:inherit}
.burn .bar.over i{background:var(--danger-500)}
.burn .bar .sold{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink-700);border-radius:1px}
.burn .lg{display:flex;width:100%;gap:12px;font-size:11px;color:var(--ink-500);font-weight:600;margin-top:6px;flex-wrap:wrap}
.burn .lg .over{color:var(--danger-700)}

/* File de travail de l'administration. */
.queue{display:flex;flex-direction:column;gap:0}
.qgroup{border-bottom:1px solid var(--line-2)}
.qgroup:last-child{border-bottom:0}
.qgroup .qh{display:flex;align-items:center;gap:10px;padding:14px 0 9px;font-size:11px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500)}
.qgroup .qh .cnt{background:var(--brand-700);color:#fff;border-radius:var(--r-pill);font-size:10.5px;
  padding:1px 8px;letter-spacing:0}
.qgroup .qh .cnt.zero{background:var(--ok-500)}
.qgroup .qh .num{margin-left:auto;letter-spacing:0;text-transform:none;font-weight:600;color:var(--ink-400)}

/* ------------------------------------------------- 7 · Journal horodaté -- */
.jour{display:flex;flex-direction:column}
.jday{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-400);
  padding:20px 0 10px;position:sticky;top:71px;background:var(--bg);z-index:3}
.jday:first-child{padding-top:4px}
.jrow{display:flex;align-items:flex-start;gap:14px;padding:11px 14px;border-radius:var(--r);
  border:1px solid transparent}
.jrow:hover{background:var(--surface);border-color:var(--line-2)}
.jrow .h{font-family:var(--fs-h);font-size:13px;font-weight:800;color:var(--ink-900);
  width:44px;flex:none;padding-top:8px;font-variant-numeric:tabular-nums}
.jrow .dot{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;margin-top:4px}
.jrow .tx{min-width:0;padding-top:6px}
.jrow .tx p{font-size:13.5px;color:var(--ink-700);line-height:1.5}
.jrow .tx p b{color:var(--ink-900);font-weight:700}
.jrow .tx p em{font-style:normal;color:var(--steel-700);font-weight:600}
.jrow .tx .m{font-size:11.5px;color:var(--ink-400);margin-top:3px;font-weight:600}
.jrow.fresh{animation:j-in .5s var(--ease-out)}
@keyframes j-in{from{opacity:0;transform:translateX(-10px);background:var(--brand-50)}to{opacity:1}}
.j-empty{text-align:center;padding:46px 20px;color:var(--ink-400);font-size:13px}

/* ------------------------------------------------ 8 · Base documentaire -- */
.docsearch{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:14px 18px;box-shadow:var(--sh-1);margin-bottom:16px}
.docsearch svg{color:var(--ink-400);flex:none}
.docsearch input{border:0;background:transparent;outline:0;font-family:var(--fs-b);font-size:15px;
  width:100%;color:var(--ink-900)}
.docsearch input::placeholder{color:var(--ink-300)}
.docsearch .n{font-size:12px;color:var(--ink-400);font-weight:600;white-space:nowrap;flex:none}
.doclist{display:flex;flex-direction:column}
.docrow{display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid var(--line-2);
  cursor:pointer}
.docrow:last-child{border-bottom:0}
.docrow:hover{background:var(--surface-2)}
.docrow .fi{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:var(--brand-50);color:var(--brand-700)}
.docrow .nm{min-width:0;flex:1}
.docrow .nm b{display:block;font-size:13.5px;font-weight:600;color:var(--ink-900)}
.docrow .nm .tg{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}
.docrow .dt{font-size:12px;color:var(--ink-400);font-weight:600;flex:none;white-space:nowrap}
.docrow .who{display:flex;gap:5px;flex:none;flex-wrap:wrap;justify-content:flex-end;max-width:190px}
.tag-s{font-size:10.5px;font-weight:700;background:var(--surface-2);border:1px solid var(--line);
  color:var(--ink-500);border-radius:var(--r-pill);padding:2px 8px;white-space:nowrap}
.tag-s.brand{background:var(--brand-50);border-color:var(--brand-100);color:var(--brand-700)}
.tag-s.ok{background:var(--ok-50);border-color:transparent;color:var(--ok-700)}
@media(max-width:820px){.docrow .who{display:none}}

/* ------------------------------------------------------ 9 · Planning DnD -- */
.pgrid.dnd .cell{transition:background .14s}
/* Pas de « + » au survol : sur ce planning, seule l'intervention du mercredi bouge. */
.pgrid.dnd .cell:empty:hover:after{content:none}
.pgrid .cell.drop{background:var(--brand-50);box-shadow:inset 0 0 0 2px var(--brand-300)}
.evt.drag{opacity:.35}
.evt[draggable=true]{cursor:grab}
.evt[draggable=true]:active{cursor:grabbing}
.evt .mv{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;
  color:var(--brand-700);margin-top:4px}
.dnd-hint{display:flex;align-items:center;gap:11px;background:var(--steel-50);border:1px solid var(--steel-100);
  border-radius:var(--r);padding:11px 15px;font-size:12.5px;color:var(--steel-700);font-weight:600;
  margin-bottom:16px}
.dnd-hint svg{flex:none}
.dnd-hint>span{min-width:0}
.dnd-hint b{color:var(--steel-700)}
.evt.moved{animation:evt-land .55s var(--ease-out)}
@keyframes evt-land{0%{transform:scale(.9);box-shadow:0 0 0 3px var(--brand-300)}100%{transform:none}}

/* ------------------------------------------------------ 9 bis · Dictée -- */
/* Le bouton se pose DANS le champ, en bas à droite. Cible large : un
   technicien l'atteint avec des gants, ce que la touche micro du clavier
   ne permet pas. */
.dictee{position:relative;display:block}
.dictee>textarea,.dictee>[contenteditable=true]{padding-bottom:44px}
.dictee>.mic{position:absolute;right:9px;bottom:9px;width:38px;height:38px;border-radius:11px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-500);cursor:pointer;
  display:grid;place-items:center;transition:.15s;box-shadow:var(--sh-1);padding:0}
.dictee>.mic:hover{border-color:var(--brand-300);color:var(--brand-700);background:var(--brand-50)}
.dictee>.mic.on{background:var(--danger-500);border-color:var(--danger-500);color:#fff;
  animation:mic-bat 1.3s ease-in-out infinite}
@keyframes mic-bat{
  0%,100%{box-shadow:0 0 0 0 rgba(204,51,51,.45)}
  50%{box-shadow:0 0 0 7px rgba(204,51,51,0)}
}
/* Dans le composeur de la messagerie, la barre d'outils occupe déjà le bas. */
.composer .dictee>.mic{bottom:auto;top:6px;right:6px;width:32px;height:32px;border-radius:9px}
.composer .dictee>[contenteditable=true]{padding-bottom:11px;padding-right:46px}

/* ------------------------------------------------------ 9 ter · Tâches -- */
.tacheligne .coche{width:26px;height:26px;border-radius:8px;border:2px solid var(--ink-300);
  flex:none;display:grid;place-items:center;color:transparent;transition:.14s;margin-top:3px;
  background:var(--surface);cursor:pointer}
.tacheligne .coche:hover{border-color:var(--ok-500)}
.tacheligne .coche.on{background:var(--ok-500);border-color:var(--ok-500);color:#fff}
.tacheligne.faite .tx b{color:var(--ink-400);text-decoration:line-through}
.tacheligne.faite .tx span{color:var(--ink-300)}
.tacheligne .rt .badge{margin-bottom:4px}

/* --------------------------------------------------------- 10 · Divers -- */
.mini{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-500);font-weight:600}
.money{font-family:var(--fs-h);font-weight:800;letter-spacing:-.01em}
.ok-hero{text-align:center;padding:34px 22px 26px}
.ok-hero .mk{width:78px;height:78px;border-radius:50%;background:var(--ok-50);color:var(--ok-500);
  display:grid;place-items:center;margin:0 auto 18px;animation:mk-pop .5s cubic-bezier(.16,.9,.3,1.1)}
@keyframes mk-pop{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
.ok-hero h2{font-size:21px;line-height:1.28}
.ok-hero p{font-size:13.5px;color:var(--ink-500);margin-top:8px;line-height:1.5}
.sig{border:2px dashed var(--border-strong);border-radius:var(--r);background:var(--surface-2);
  height:104px;display:grid;place-items:center;text-align:center;color:var(--ink-400);font-size:12.5px;
  font-weight:600;line-height:1.5;padding:12px}
.sig b{display:block;color:var(--ink-500);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:4px}
.kv{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2);
  font-size:13px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--ink-500);font-weight:600;width:132px;flex:none}
.kv .v{color:var(--ink-900);font-weight:600}
.emptybox{text-align:center;padding:40px 22px;color:var(--ink-400);font-size:13px;line-height:1.6}
.emptybox .ic{width:52px;height:52px;border-radius:14px;background:var(--surface-2);color:var(--ink-300);
  display:grid;place-items:center;margin:0 auto 14px}
.emptybox b{display:block;color:var(--ink-700);font-size:14px;margin-bottom:5px;font-family:var(--fs-h)}
.catalog{display:flex;flex-direction:column;gap:8px}
.catrow{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:13px 15px;cursor:pointer;width:100%;text-align:left;font-family:var(--fs-b)}
.catrow:hover{border-color:var(--brand-300);background:var(--brand-50)}
.catrow.on{border-color:var(--brand-700);background:var(--brand-50);box-shadow:0 0 0 1px var(--brand-700)}
.catrow .ref{font-family:var(--fs-h);font-size:11px;font-weight:800;color:var(--steel-700);
  background:var(--steel-50);border-radius:6px;padding:3px 7px;flex:none}
.catrow .nm{min-width:0;flex:1}
.catrow .nm b{display:block;font-size:13.5px;font-weight:600;color:var(--ink-900);line-height:1.35}
.catrow .nm span{display:block;font-size:11.5px;color:var(--ink-400);margin-top:2px}
.catrow .ck{color:var(--brand-700);opacity:0;flex:none}
.catrow.on .ck{opacity:1}
.searchbig{display:flex;align-items:center;gap:11px;background:var(--surface);border:2px solid var(--line);
  border-radius:14px;padding:14px 16px}
.searchbig:focus-within{border-color:var(--brand-600);box-shadow:var(--focus-ring)}
.searchbig input{border:0;background:transparent;outline:0;font-family:var(--fs-b);font-size:16px;
  width:100%;color:var(--ink-900)}
.searchbig svg{color:var(--ink-400);flex:none}

/* Le sélecteur passe sous la barre du haut quand la place manque. */
@media(max-width:1080px){
  .rolebox .lead{display:none}
}
@media(max-width:900px){
  .topbar{flex-wrap:wrap;row-gap:11px}
  .rolebox{margin-left:auto;order:2}
  .rolebox .flag{display:none}
  .rolemenu{width:min(296px,calc(100vw - 34px))}
}
@media(max-width:640px){
  .content{padding:18px 16px 40px}
  .dashhead .actions{width:100%;margin-left:0}
  .scenario{flex-direction:column;align-items:stretch;gap:12px}
  .scenario .go{margin-left:0}
  .scenario .go .btn{width:100%;justify-content:center}
  .handoff .btn{margin-left:0;width:100%;justify-content:center}
  .jrow{padding:10px 4px}
  .jday{top:64px}
  .docrow{flex-wrap:wrap}
  .docrow .dt{margin-left:auto}
}

/* Septième pastille d'avatar — l'équipe compte sept personnes, base.css en
   déclare six. */
.a7{background:#7a4b2a}