/* ============================================================
   Renfora — Le Bureau v4 — FONDATIONS (coquille + design system)
   Langue de design « calme premium · esprit SugarCRM » :
   couleur RÉSERVÉE au statut ; avatars = photos du casting ;
   ombres douces ; air généreux ; fontes système sentence-case.
   Source : 99_Workspace/bureau-v4.css + maquettes v4.
   CHARGÉ APRÈS bureau-v3.css → re-skinne la COQUILLE (top-bar
   pills + rail agents-photos/badges + dalle) en réutilisant le
   MÊME DOM (._v3_shell) : on ne strippe AUCUNE fonction.
   Clair/sombre via [data-theme] ; mobile 375 en fin de fichier.
   ============================================================ */

/* ── Jetons calme-premium (priment sur bureau-v3.css) ─────────────────────── */
:root{
  --ink:#15171d; --ink-soft:#474c56; --ink-faint:#686d7a;
  --line:#eef0f3; --bg:#e8eaee;
  --card:#ffffff; --card-2:#fafbfc;
  --glass:#f4f5f8; --glass2:#ffffff; --slab:#f4f5f8; --slab-brd:#e6e8ed;
  --accent:#2f5fff; --accent-soft:#edf1ff; --accent-ink:#1f3fc4;
  --blue:#5b8def; --green:#1fa86a; --green-soft:#e7f5ee; --green-ink:#0d6e44;
  --red:#ec6a5e; --red-soft:#fcece9; --red-ink:#b23f31;
  --amber:#e0a23a; --amber-ink:#946011;
  --draft:#868ea0;
  --shadow:0 24px 50px -26px rgba(18,20,28,.24), 0 6px 16px -10px rgba(18,20,28,.07);
  --shadow-sm:0 12px 26px -16px rgba(18,20,28,.18);
  --pop:0 22px 50px -14px rgba(18,20,28,.4);
  --field:linear-gradient(160deg,#e4e6ea,#eff1f4);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --r-xl:34px; --r-lg:28px; --r-md:20px; --r-sm:15px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#eef1f7; --ink-soft:#aeb5c2; --ink-faint:#8b929d;
  --line:rgba(255,255,255,.08); --bg:#0c0f15;
  --card:#171b23; --card-2:#1d222d;
  --glass:#13161d; --glass2:#1b2029; --slab:#13161d; --slab-brd:rgba(255,255,255,.08);
  --accent:#6f93ff; --accent-soft:#1b2540; --accent-ink:#c3d2ff;
  --blue:#6f93ff; --green:#39d08c; --green-soft:#10301f; --green-ink:#7ce6b3;
  --red:#ff7a6c; --red-soft:#3a1d18; --red-ink:#ffb0a4;
  --amber:#e6b24f; --amber-ink:#ecc878;
  --draft:#626c84;
  --shadow:0 24px 50px -22px rgba(0,0,0,.6), 0 6px 16px -10px rgba(0,0,0,.5);
  --shadow-sm:0 12px 26px -14px rgba(0,0,0,.55);
  --pop:0 22px 50px -12px rgba(0,0,0,.7);
  --field:linear-gradient(160deg,#0a0d13,#10141d);
}}
[data-theme="dark"]{
  --ink:#eef1f7; --ink-soft:#aeb5c2; --ink-faint:#8b929d;
  --line:rgba(255,255,255,.08); --bg:#0c0f15;
  --card:#171b23; --card-2:#1d222d;
  --glass:#13161d; --glass2:#1b2029; --slab:#13161d; --slab-brd:rgba(255,255,255,.08);
  --accent:#6f93ff; --accent-soft:#1b2540; --accent-ink:#c3d2ff;
  --blue:#6f93ff; --green:#39d08c; --green-soft:#10301f; --green-ink:#7ce6b3;
  --red:#ff7a6c; --red-soft:#3a1d18; --red-ink:#ffb0a4;
  --amber:#e6b24f; --amber-ink:#ecc878;
  --draft:#626c84;
  --shadow:0 24px 50px -22px rgba(0,0,0,.6), 0 6px 16px -10px rgba(0,0,0,.5);
  --shadow-sm:0 12px 26px -14px rgba(0,0,0,.55);
  --pop:0 22px 50px -12px rgba(0,0,0,.7);
  --field:linear-gradient(160deg,#0a0d13,#10141d);
}

/* ── Surface : papier crème calme, air généreux ───────────────────────────── */
body{background:var(--field);padding:34px}
html{background:var(--bg)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── DALLE : verre→panneau plein, ombre douce premium ─────────────────────── */
/* dalle pleine, ombre douce premium ; PAS de bord (maquette .panel = ombre seule) */
.app{max-width:1380px;background:var(--slab);
  border-radius:var(--r-xl);box-shadow:var(--shadow);backdrop-filter:none}

/* ── TOP BAR : marque + nav pills + outils ────────────────────────────────── */
.top{gap:30px;padding:22px 30px;border-bottom:0}
.brand{font-size:21px;letter-spacing:-.6px}
.brand .mk{width:36px;height:36px;border-radius:11px;
  background:linear-gradient(140deg,#2f5fff,#6a3bff);box-shadow:0 9px 20px -7px rgba(47,95,255,.55)}
.brand small{font-size:10px;color:var(--ink-faint);letter-spacing:.2px;margin-top:-3px}
.nav{gap:2px;margin-left:8px}
.nav a{font-size:14px;font-weight:600;color:var(--ink-soft);padding:10px 18px;border-radius:999px}
.nav a:hover{background:var(--card);color:var(--ink)}
.nav a.on{background:var(--ink);color:#fff;box-shadow:var(--shadow-sm)}
[data-theme="dark"] .nav a.on,:root:not([data-theme="light"]) .nav a.on{background:var(--card-2);color:var(--ink)}
.tr{gap:11px}
.ib{width:46px;height:46px;border-radius:50%;background:var(--card);border:0;
  color:var(--ink-soft);box-shadow:var(--shadow-sm)}
.ib:hover{transform:translateY(-1px);color:var(--ink)}
.me{width:48px;height:48px;border-radius:50%;font-size:16px;border:3px solid var(--card);
  box-shadow:var(--shadow-sm);background:linear-gradient(140deg,#f0c8a0,#e8a877);color:#7a3b12}

/* Cloche-shellbadge : compte d'actes en attente (corail = statut). */
.top .ib.shellbadge{background:var(--card);border:0;box-shadow:var(--shadow-sm)}
.top .ib.shellbadge .shellbadge-n{top:-2px;right:-2px;min-width:18px;height:18px;
  background:var(--red);color:#fff;font-size:10.5px;font-weight:700;
  border:2.5px solid var(--slab);box-shadow:none}

/* ── BODY + RAIL : « votre staff » en photos du casting ───────────────────── */
.body{gap:10px;padding:6px 26px 30px}
.rail{width:76px;padding:10px 0 0;gap:15px}
.rail .rba{width:52px;height:52px}
.rail .rba:hover{transform:translateY(-2px)}
.rail .rav{width:52px;height:52px;font-size:17px;letter-spacing:.5px;
  border:3px solid transparent;box-shadow:var(--shadow-sm)}
/* photos du casting : cadrage visage (haut du portrait) */
.rail .rav-photo{background-size:cover;background-position:center 24%;color:transparent}
.rail .rba.on .rav{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow-sm)}
/* point d'état = pastille statut en bas-droite */
.rail .rdot{right:-3px;bottom:-3px;width:14px;height:14px;border:2.5px solid var(--slab)}
.rail .rdot.st-live{background:var(--green)}
.rail .rdot.st-valid{background:var(--accent)}
.rail .rdot.st-prep{background:var(--ink-faint)}
/* boutons ronds (embaucher / thème) en blanc, ombre douce */
.rail .rb{width:46px;height:46px;background:var(--card);border:0;
  color:var(--ink-soft);box-shadow:var(--shadow-sm)}
.rail .rb:hover{transform:translateY(-1px);color:var(--ink)}
.rail .rb.emb{border:1.5px dashed var(--draft);color:var(--ink-soft);font-weight:300}
.rail .rb.emb:hover{border-color:var(--accent);color:var(--accent)}
.rail .rb.night{background:var(--ink);color:#fff}
.rail .rb.day{background:var(--card);color:var(--ink-soft)}
[data-theme="dark"] .rail .rb.night,:root:not([data-theme="light"]) .rail .rb.night{background:var(--card-2);color:var(--ink)}
.rail .sp{flex:1;min-height:20px}

.main{padding:8px 2px 0 6px}

/* ── PIED ──────────────────────────────────────────────────────────────────── */
.foot{padding:0 30px 24px;text-align:left;font-size:12px;color:var(--ink-faint)}
.foot b{color:var(--ink-soft)}

/* ── Avatars de contenu (._v3 helpers) : photos cadrées visage ───────────────
   Le board et les fiches réutilisent `.photo`/`.rav-photo`/`.av-photo` — on
   garde le cadrage visage cohérent sans toucher le HTML fonctionnel. */
.photo[style*="background-image"],.av-photo,.ava.av-photo{background-position:center 24%}

/* ── PANOPLIE FONCTIONNELLE (.lb) au look v4 — calme premium ─────────────────
   La home rend SOUS le board la panoplie (« À votre attention » / briefing /
   « Votre staff » / décisions / récemment retirés) en classes cockpit (.lb).
   On la re-skinne EN PLACE (mêmes DOM/fonctions) au langage v4 : titres de
   section en SENTENCE-CASE (maquette toute en fonte système, pas d'Oswald
   MAJUSCULES), cartes blanches à ombre douce, avatars = PHOTOS du casting,
   pastille de niveau = pill de statut. Scopé `.app .main .lb` → 0 fuite. */
.app .main .lb{--gap:20px}
/* Titres de section : sentence-case, fonte système, plus de petite-capitale Oswald */
.app .main .lb .att-h{margin:30px 0 14px;gap:12px}
.app .main .lb .att-h h2{font-family:var(--font);text-transform:none;letter-spacing:-.3px;
  font-size:16px;font-weight:800;color:var(--ink)}
.app .main .lb .att-h .line{background:var(--line)}

/* Carte « renfort » (Votre staff) : carte blanche douce ; photo du casting cadrée visage */
.app .main .lb .rfl{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);padding:15px 18px;margin-bottom:11px}
.app .main .lb .rfl:hover{border-color:var(--slab-brd);box-shadow:var(--shadow);transform:translateY(-2px)}
.app .main .lb .rfl .av{box-shadow:var(--shadow-sm)}
.app .main .lb .rfl .av.av-photo{background-size:cover;background-position:center 24%;color:transparent}
.app .main .lb .rfl .av .st{border:2.5px solid var(--card)}
.app .main .lb .rfl .av .st.ok{background:var(--green)}
.app .main .lb .rfl .av .st.warn{background:var(--amber)}
.app .main .lb .rfl .rx b{color:var(--ink);font-size:15px;font-weight:800}
.app .main .lb .rfl .rx .state.on{color:var(--green-ink)}
.app .main .lb .rfl .rx .state.prep{color:var(--amber-ink)}
.app .main .lb .rfl .rx .sub{color:var(--ink-faint);font-size:13px}
/* pastille de niveau = pill de statut calme (Apprentissage/Opérationnel/Autonome) */
.app .main .lb .mt-card{font-size:11px;font-weight:700;padding:5px 11px;border-radius:999px}
.app .main .lb .mt-card.mt-app{background:var(--card-2);color:var(--ink-soft)}
.app .main .lb .mt-card.mt-ope{background:var(--accent-soft);color:var(--accent-ink)}
.app .main .lb .mt-card.mt-aut{background:var(--green-soft);color:var(--green-ink)}
/* CTA « Parler » : pill accent doux → plein au survol (cohérent maquette .btn) */
.app .main .lb .rfl .talk-btn{background:var(--accent-soft);color:var(--accent-ink);min-height:40px;font-size:13.5px}
.app .main .lb .rfl:hover .talk-btn{background:var(--accent);color:#fff}

/* Cartes d'action (« À votre attention » / décisions) : panneau verre v3 déjà
   posé ; on aligne juste le rayon/ombre sur v4 et l'avatar photo si présent. */
.app .main .lb .act{border-radius:var(--r-md)}
.app .main .lb .act .av.av-photo{background-size:cover;background-position:center 24%;color:transparent}

/* ── MOBILE 375 : la nav pills passe au drawer (déjà masquée <980 par v3),
   on resserre l'air pour tenir la dalle sans débord horizontal. ───────────── */
@media (max-width:560px){
  body{padding:14px}
  /* nav pills masquée <560 → la marque + les 3 outils tiennent sur UNE ligne sans clip */
  .top{gap:10px;padding:14px 16px;flex-wrap:nowrap}
  .nav{display:none}
  .brand{font-size:18px}
  .brand .mk{width:32px;height:32px}
  .tr{gap:8px}
  .top .ib{width:40px;height:40px}
  .top .me{width:40px;height:40px;font-size:14px}
  .body{padding:4px 14px 22px;gap:8px}
  /* ── 375 FIX SYSTÉMIQUE : le rail « vos agents » passe en BANDE HORIZONTALE en haut du
     contenu (≤560) → `.main` prend la PLEINE largeur (sinon rail vertical 60-76px + paddings
     écrasaient `.main` à ~167px, contenu clippé sous `.app{overflow:hidden}`). Desktop ≥561 :
     INCHANGÉ (rail vertical, cf. base). Le spacer `.sp` (flex:1) pousse embaucher/thème à
     droite EN LIGNE comme en colonne. ── */
  .app .body{flex-direction:column}
  .app .rail{flex-direction:row;width:auto;max-width:100%;overflow-x:auto;gap:12px;padding:4px 0;
    align-items:center;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .app .rail::-webkit-scrollbar{display:none}
  .app .rail .sp{flex:1;min-height:0;min-width:20px}
  .app .main{width:100%;min-width:0}
  .app .rail .rba,.app .rail .rb{flex:none}
  .rail .rav,.rail .rba{width:44px;height:44px}
  .rail .rb,.rail .rb.emb{width:40px;height:40px}
  .foot{padding:0 18px 18px}
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  BIBLIOTHÈQUE DE CONTENU v4 — l'accueil « Le Bureau » (S1)                 ║
   ║  Classes de la maquette 99_Workspace/bureau-v4.css portées FIDÈLEMENT,     ║
   ║  scopées sous `.app .main .v4` → 0 fuite vers les pages v3 NON migrées ;   ║
   ║  RÉUTILISÉES par S2-S4 (fiche/échange/bilan : .board/.donut/.card).        ║
   ║  Tokens sémantiques (var(--…)) → clair/sombre/375 gratuits (la maquette    ║
   ║  est light-only ; le sombre dérive comme la coquille S0).                  ║
   ║  Couleur RÉSERVÉE au statut ; avatars = photos du casting ; ombres douces. ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── HÉRO ──────────────────────────────────────────────────────────────────── */
.app .main .v4 .hd{margin:8px 2px 22px}
.app .main .v4 .kick{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:8px}
.app .main .v4 h1{font-size:42px;font-weight:800;letter-spacing:-1.4px;line-height:1;color:var(--ink)}
.app .main .v4 .sub{color:var(--ink-soft);font-size:15px;margin-top:11px;line-height:1.5;max-width:64ch}
.app .main .v4 .sub b{color:var(--ink);font-weight:700}
.app .main .v4 .chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.app .main .v4 .chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;
  padding:8px 14px;border-radius:999px;background:var(--card);color:var(--ink-soft);
  box-shadow:var(--shadow-sm);text-decoration:none;border:none;font-family:inherit}
/* `.chip` portée par <a>/<button> (export CSV · Imprimer) : main au survol, reset bouton natif */
.app .main .v4 a.chip,.app .main .v4 button.chip{cursor:pointer}
.app .main .v4 a.chip:hover,.app .main .v4 button.chip:hover{box-shadow:var(--shadow)}
.app .main .v4 .chip .d{width:7px;height:7px;border-radius:50%}
.app .main .v4 .chip.live{background:var(--green-soft);color:var(--green-ink)}
.app .main .v4 .chip.live .d{background:var(--green)}
.app .main .v4 .chip.ue{color:var(--accent-ink)}.app .main .v4 .chip.ue .d{background:var(--accent)}

/* ── CARTE générique ───────────────────────────────────────────────────────── */
.app .main .v4 .card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:22px 24px}
.app .main .v4 .ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.app .main .v4 .ch h3{font-size:16px;font-weight:800;letter-spacing:-.3px;color:var(--ink)}
.app .main .v4 .ch .note{font-size:12px;color:var(--ink-faint);font-weight:600}
.app .main .v4 .mini{width:38px;height:38px;border-radius:50%;background:var(--card-2);display:grid;
  place-items:center;color:var(--ink-soft);cursor:pointer;box-shadow:var(--shadow-sm)}

/* ── BOARD (parcours) ──────────────────────────────────────────────────────── */
/* `width/height:auto` RESET le `.board{width:1240px;height:560px}` de bureau-v3.css (même nom de classe,
   board-graphe v3 à largeur fixe) : sans ça la grille v4 hérite 1240px → débord horizontal (clip à 375). */
.app .main .v4 .board{background:var(--card);border-radius:var(--r-xl);box-shadow:var(--shadow);
  padding:28px 30px 34px;position:relative;width:auto;height:auto;margin:0}
.app .main .v4 .board-h{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:26px}
.app .main .v4 .board-h h2{font-size:20px;font-weight:800;letter-spacing:-.5px;color:var(--ink)}
.app .main .v4 .board-h p{font-size:13px;color:var(--ink-faint);font-weight:500;margin-top:5px}
.app .main .v4 .board-h .tools{display:flex;gap:8px}
/* GRILLE (≠ scroller v3 qui débordait à 1440 et tronquait « ce qui remonte ») */
.app .main .v4 .flow{display:grid;grid-template-columns:1fr 34px 1fr 34px 1.05fr 34px 1.18fr;align-items:start}
.app .main .v4 .stage{display:flex;flex-direction:column;min-width:0}
.app .main .v4 .stage>.col{background:var(--card-2);border-radius:var(--r-lg);padding:8px;display:flex;
  flex-direction:column;box-shadow:var(--shadow-sm)}
.app .main .v4 .stage .lbl{text-align:center;font-size:12.5px;font-weight:700;color:var(--ink-soft);margin-top:16px}
.app .main .v4 .row{display:flex;align-items:center;gap:13px;padding:13px 12px;border-radius:var(--r-sm)}
.app .main .v4 .row+.row{border-top:1px solid var(--line)}
.app .main .v4 .row .ava{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:14px;box-shadow:var(--shadow-sm)}
.app .main .v4 .row .ava.pic{background-size:cover;background-position:center 24%;color:transparent}
.app .main .v4 .row .num{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-weight:700;font-size:12.5px;background:var(--card-2);color:var(--ink-soft)}
.app .main .v4 .row .num.esc{background:var(--red-soft);color:var(--red-ink)}
.app .main .v4 .row .num.ok{background:var(--green-soft);color:var(--green-ink)}
.app .main .v4 .row .ic{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--card-2);color:var(--draft)}
.app .main .v4 .row .tx{flex:1;min-width:0}
.app .main .v4 .row .tx b{font-size:13px;font-weight:700;display:block;line-height:1.3;color:var(--ink)}
.app .main .v4 .row .tx span{font-size:11.5px;color:var(--ink-faint);font-weight:500}
.app .main .v4 .row .done{color:var(--green);flex:none}
.app .main .v4 .row .dots{color:var(--draft);font-weight:800;letter-spacing:1px;flex:none;padding:0 2px}
.app .main .v4 .row.ghost .tx b{color:var(--ink-faint)}
.app .main .v4 .gap{align-self:stretch;display:flex;align-items:center;justify-content:center}
.app .main .v4 .gap svg{width:34px;height:100%}
.app .main .v4 .remonte{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.app .main .v4 .tnode{background:var(--card-2);border-radius:var(--r-sm);padding:14px 15px;box-shadow:var(--shadow-sm);
  text-decoration:none;display:block}
.app .main .v4 .tnode b{font-size:13px;font-weight:700;display:block;color:var(--ink)}
.app .main .v4 .tnode span{font-size:11px;color:var(--ink-faint);font-weight:500}
/* nœud NOIR « À votre validation » : reste INK/noir en clair ET en sombre (ink-card), jamais un pill bleu */
.app .main .v4 .tnode.dark{background:var(--ink);color:#fff;grid-column:1 / -1;position:relative;box-shadow:var(--pop)}
.app .main .v4 .tnode.dark b{color:#fff}
.app .main .v4 .tnode.dark span{color:#a7adba}
.app .main .v4 .tnode.dark::before{content:"";position:absolute;left:-9px;top:24px;width:16px;height:16px;
  background:var(--ink);transform:rotate(45deg);border-radius:3px}
[data-theme="dark"] .app .main .v4 .tnode.dark,
:root:not([data-theme="light"]) .app .main .v4 .tnode.dark{background:#15171d}
[data-theme="dark"] .app .main .v4 .tnode.dark::before,
:root:not([data-theme="light"]) .app .main .v4 .tnode.dark::before{background:#15171d}
.app .main .v4 .tnode.add{background:transparent;border:1.5px dashed var(--draft);color:var(--ink-soft);
  box-shadow:none;display:flex;align-items:center}
.app .main .v4 .tnode.add b{color:var(--ink-soft)}

/* ── BAS : grille 2 colonnes (action focale | staff + statut calme) ────────── */
.app .main .v4 .grid{display:grid;grid-template-columns:1.7fr 1fr;gap:20px;margin-top:20px}
/* items de grille rétractables (sinon le contenu non-shrinkable des cartes force la piste → débord @375) */
.app .main .v4 .grid>.card,.app .main .v4 .col-r>.card{min-width:0}
.app .main .v4 .col-r{display:flex;flex-direction:column;gap:20px;min-width:0}
.app .main .v4 .att{display:flex;align-items:center;gap:14px;padding:15px 0;border-top:1px solid var(--line)}
.app .main .v4 .att:first-of-type{border-top:0;padding-top:2px}
.app .main .v4 .att .ava{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:15px;box-shadow:var(--shadow-sm)}
.app .main .v4 .att .ava.pic{background-size:cover;background-position:center 24%;color:transparent}
.app .main .v4 .att .tx{flex:1;min-width:0}
.app .main .v4 .att .tx b{font-size:14px;font-weight:700;display:block;color:var(--ink);overflow-wrap:anywhere}
.app .main .v4 .att .tx span{font-size:12px;color:var(--ink-faint)}
/* La maquette S2-S4 est en CASSE-PHRASE (« Pris en compte », « Livré », « Demandé »,
   « Géré sans vous »…). Or cockpit.css force `.pill`/`.cap` en MAJUSCULES (globaux 228/234).
   Un seul reset scopé `.v4` rétablit la casse-phrase sur les pastilles/caps/chips/niveaux
   (Référentiel + Bilan + Mon référent + Livrables). Les eyebrows `.kick`, labels `.k`/`.meta .k`
   et en-têtes de table `th` GARDENT leurs majuscules (réglés ailleurs, intacts). */
.app .main .v4 .pill,.app .main .v4 .donut .cap,.app .main .v4 .tchip,
.app .main .v4 .lvl{text-transform:none;letter-spacing:normal}
.app .main .v4 .pill{font-size:11px;font-weight:700;padding:6px 12px;border-radius:999px;white-space:nowrap}
.app .main .v4 .pill.wait{background:var(--chip-n);color:var(--ink-soft)}
.app .main .v4 .pill.val{background:var(--accent-soft);color:var(--accent-ink)}
.app .main .v4 .pill.urg{background:var(--red-soft);color:var(--red-ink)}
.app .main .v4 .pill.ok{background:var(--green-soft);color:var(--green-ink)}
.app .main .v4 .att .btn{border:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:12.5px;
  padding:10px 17px;border-radius:999px;background:var(--ink);color:#fff;box-shadow:var(--shadow-sm);
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
[data-theme="dark"] .app .main .v4 .att .btn,
:root:not([data-theme="light"]) .app .main .v4 .att .btn{background:var(--card-2);color:var(--ink)}
.app .main .v4 .att .btn.accent{background:var(--accent);color:#fff}
/* état vide HONNÊTE (« rien n'attend votre main ») stylé v4 */
.app .main .v4 .att-empty{font-size:13.5px;color:var(--ink-soft);line-height:1.5;padding:6px 0 2px}
.app .main .v4 .att-empty b{color:var(--ink);font-weight:700}
.app .main .v4 .staff{display:flex;align-items:center;gap:13px;padding:13px 0;border-top:1px solid var(--line)}
.app .main .v4 .staff:first-of-type{border-top:0;padding-top:2px}
.app .main .v4 .staff .ava{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:14px;box-shadow:var(--shadow-sm);position:relative}
.app .main .v4 .staff .ava.pic{background-size:cover;background-position:center 24%;color:transparent}
.app .main .v4 .staff .ava .live{position:absolute;right:-1px;bottom:-1px;width:13px;height:13px;
  border-radius:50%;background:var(--green);border:2.5px solid var(--card)}
.app .main .v4 .staff .tx{flex:1;min-width:0}
.app .main .v4 .staff .tx b,.app .main .v4 .staff .tx .nm{font-size:14px;font-weight:700;display:block;color:var(--ink)}
.app .main .v4 .staff .tx span{font-size:11.5px;color:var(--ink-faint)}
.app .main .v4 .lvl{font-size:11px;font-weight:700;padding:5px 11px;border-radius:999px;
  background:var(--green-soft);color:var(--green-ink);white-space:nowrap}
.app .main .v4 .lvl.n{background:var(--card-2);color:var(--ink-soft)}
.app .main .v4 .lvl.o{background:var(--accent-soft);color:var(--accent-ink)}
.app .main .v4 .donuts{display:flex;gap:14px;justify-content:space-around;padding-top:4px;flex-wrap:wrap}
.app .main .v4 .donut{text-align:center}
.app .main .v4 .ring{width:108px;height:108px;border-radius:50%;display:grid;place-items:center;margin:0 auto 10px}
.app .main .v4 .ring .hole{width:78px;height:78px;border-radius:50%;background:var(--card);display:flex;
  align-items:center;justify-content:center;flex-direction:column}
.app .main .v4 .ring .hole .v{font-size:25px;font-weight:800;line-height:1;color:var(--ink)}
.app .main .v4 .ring .hole .u{font-size:9.5px;color:var(--ink-faint);font-weight:700;margin-top:3px;
  text-transform:uppercase;letter-spacing:.04em}
.app .main .v4 .donut .cap{font-size:12px;font-weight:600;color:var(--ink-soft)}
/* La PISTE du donut (segment non rempli du conic-gradient) : la maquette code un #edeff2 littéral
   (gris clair sur carte blanche). On expose un token `--ring-track` → en sombre, une piste VISIBLE
   sur la carte (#1d222d ≈ card-2) au lieu d'un gris clair qui « flasherait ». Couleurs de remplissage =
   var(--green)/var(--red) (statut), JAMAIS du littéral, pour suivre le thème. */
.app .main .v4{--ring-track:#edeff2;--chip-n:#eef0f3}
[data-theme="dark"] .app .main .v4,
:root:not([data-theme="light"]) .app .main .v4{--ring-track:#252b37;--chip-n:#252b37}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  BILAN (S4) — « Ce qu'il a porté » : grille de stats + donuts + log         ║
   ║  Classes propres à la maquette 99_Workspace/…bilan v4.html (.stats/.stat),  ║
   ║  scopées `.app .main .v4`. Réutilise S1/S2 (.grid/.col-r/.card/.ch/.donut/  ║
   ║  .ring/.meta/.tlog). `.print-only`/@media print = la sortie imprimable.     ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
.app .main .v4 .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.app .main .v4 .stat{background:var(--card-2);border-radius:var(--r-md);padding:18px}
.app .main .v4 .stat .v{font-size:30px;font-weight:800;letter-spacing:-1px;color:var(--ink)}
.app .main .v4 .stat .l{font-size:12.5px;color:var(--ink-faint);font-weight:600;margin-top:3px}
.app .main .v4 .stat .l b{color:var(--ink-soft)}
/* note cliquable du `.ch` (« Imprimer › ») : main au survol, reset bouton natif */
.app .main .v4 .ch button.note{cursor:pointer;border:none;background:none;font-family:inherit}
.app .main .v4 .ch button.note:hover{color:var(--ink)}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  S2 — ÉCRAN « VUE D'ENSEMBLE D'UN RENFORT »                                ║
   ║  Classes propres à la fiche v4 (99_Workspace/…renfort v4.html), portées   ║
   ║  FIDÈLEMENT (valeurs exactes de la maquette), scopées `.app .main .v4`.    ║
   ║  Réutilise la biblio S1 (.chips/.chip/.card/.ch/.donut/.ring). Tokens      ║
   ║  sémantiques → clair/sombre/375 gratuits ; couleur RÉSERVÉE au statut.     ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── EN-TÊTE de fiche : photo + nom + rôle + CTA « Parler à X » ────────────── */
.app .main .v4 .phd{display:flex;align-items:center;gap:20px;margin:6px 2px 18px}
.app .main .v4 .phd .big{width:88px;height:88px;border-radius:28px;flex:none;box-shadow:var(--shadow-sm);
  border:3px solid var(--card);display:grid;place-items:center;color:#fff;font-weight:700;font-size:34px}
.app .main .v4 .phd .big.av-photo{background-size:cover;background-position:center 24%;color:transparent}
.app .main .v4 .phd .pi{flex:1;min-width:0}
.app .main .v4 .phd .pi h1{font-size:34px;letter-spacing:-1.1px;color:var(--ink)}
.app .main .v4 .phd .pi .role{font-size:14px;color:var(--ink-faint);font-weight:600;margin-top:4px}
.app .main .v4 .phd .cta{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:#fff;
  font-weight:700;font-size:14px;padding:14px 22px;border-radius:999px;
  box-shadow:var(--shadow-sm);cursor:pointer;border:none;font-family:inherit;
  text-decoration:none;white-space:nowrap}
.app .main .v4 .phd .cta:hover{box-shadow:var(--shadow)}
.app .main .v4 .phd .cta .icon{width:17px;height:17px;stroke:currentColor;fill:none}

/* ── ONGLETS de fiche (la nav unique du renfort, look v4) ──────────────────── */
.app .main .v4 .tabs{display:flex;gap:6px;margin:0 2px 20px;flex-wrap:wrap}
.app .main .v4 .tabs a{font-size:13.5px;font-weight:600;color:var(--ink-soft);padding:9px 16px;
  border-radius:999px;text-decoration:none;background:var(--card);box-shadow:var(--shadow-sm)}
.app .main .v4 .tabs a:hover{color:var(--ink)}
.app .main .v4 .tabs a.on{background:var(--ink);color:#fff}
[data-theme="dark"] .app .main .v4 .tabs a.on,
:root:not([data-theme="light"]) .app .main .v4 .tabs a.on{background:var(--card-2);color:var(--ink)}

/* ── GRILLES 3 / 2 colonnes ────────────────────────────────────────────────── */
.app .main .v4 .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.app .main .v4 .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.app .main .v4 .grid3>.card,.app .main .v4 .grid2>.card{min-width:0}

/* ── « Son poste » : méta-lignes + « ce qu'il ne fera jamais » ─────────────── */
.app .main .v4 .meta{padding:13px 0;border-top:1px solid var(--line)}
.app .main .v4 .meta:first-of-type{border-top:0;padding-top:0}
.app .main .v4 .meta .k{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:4px}
.app .main .v4 .meta .v{font-size:14px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.app .main .v4 .notdo{margin-top:14px;background:var(--card-2);border-radius:var(--r-sm);padding:14px 16px}
.app .main .v4 .notdo .k{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--red-ink);margin-bottom:9px}
.app .main .v4 .notdo li{list-style:none;font-size:13px;color:var(--ink-soft);font-weight:500;
  padding-left:18px;position:relative;margin-bottom:7px;line-height:1.4}
.app .main .v4 .notdo li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:2px;
  background:var(--red);border-radius:2px}

/* ── « Façonnage » : étapes réglées / à faire (case + statut) ──────────────── */
.app .main .v4 .steps li{list-style:none;display:flex;align-items:center;gap:11px;padding:11px 0;
  border-top:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--ink)}
.app .main .v4 .steps li:first-child{border-top:0}
.app .main .v4 .steps .box{width:22px;height:22px;border-radius:7px;flex:none;display:grid;place-items:center;
  background:var(--card-2);color:var(--ink-faint)}
.app .main .v4 .steps .box.ok{background:var(--green-soft);color:var(--green-ink)}
.app .main .v4 .steps .box .icon{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4}
.app .main .v4 .steps .s-st{margin-left:auto;font-size:11px;font-weight:700;color:var(--ink-faint)}
.app .main .v4 .steps .s-st.ok{color:var(--green-ink)}

/* ── « L'activité » : timeline (point d'état + texte) ──────────────────────── */
.app .main .v4 .tl{position:relative;padding-left:6px}
.app .main .v4 .tl .ev{display:flex;gap:13px;padding:12px 0;border-top:1px solid var(--line)}
.app .main .v4 .tl .ev:first-child{border-top:0}
.app .main .v4 .tl .ev .dt{width:9px;height:9px;border-radius:50%;background:var(--draft);margin-top:5px;flex:none}
.app .main .v4 .tl .ev .dt.urg{background:var(--red)}
.app .main .v4 .tl .ev .dt.ok{background:var(--green)}
.app .main .v4 .tl .ev .dt.acc{background:var(--accent)}
.app .main .v4 .tl .ev .e{flex:1;min-width:0}
.app .main .v4 .tl .ev .e b{font-size:13.5px;font-weight:700;display:block;color:var(--ink)}
.app .main .v4 .tl .ev .e span{font-size:12px;color:var(--ink-faint)}
/* ── CARNET : pastille de niveau à droite (.lvl S2) + bouton « Revenir » (pilule grise) ──
   ║ La timeline .tl/.ev/.dt/.e est RÉUTILISÉE (biblio Activité) ; on n'ajoute ici que le ║
   ║ bouton « Revenir » (crée une NOUVELLE version, rien n'est écrasé) et le repli .ev-diff║
   ║ « Ce qui a changé » (était <details class=tl-diff> en cockpit → restylé scopé v4).    ║ */
.app .main .v4 .tl .ev .revbtn{flex:none;align-self:center;border:0;cursor:pointer;font-family:inherit;
  font-weight:700;font-size:12.5px;padding:8px 14px;border-radius:999px;
  background:var(--card-2);color:var(--ink-soft);box-shadow:var(--shadow-sm)}
.app .main .v4 .tl .ev .revbtn:hover{color:var(--ink)}
.app .main .v4 .tl .ev .e .ev-diff{margin-top:7px}
.app .main .v4 .tl .ev .e .ev-diff>summary{font-size:12px;font-weight:700;color:var(--accent);
  cursor:pointer;list-style:none}
.app .main .v4 .tl .ev .e .ev-diff>summary::-webkit-details-marker{display:none}
.app .main .v4 .tl .ev .e .ev-diff>summary:hover{text-decoration:underline}
.app .main .v4 .tl .ev .e .ev-diff ul{margin:6px 0 0;padding-left:17px}
.app .main .v4 .tl .ev .e .ev-diff li{font-size:12px;color:var(--ink-faint);line-height:1.45}
/* lien « Voir le Journal complet › » en pied de carte (état honnête sinon) */
.app .main .v4 .cardlink{display:inline-block;margin-top:14px;color:var(--accent);font-weight:700;
  font-size:13.5px;text-decoration:none}
.app .main .v4 .cardlink:hover{text-decoration:underline}
.app .main .v4 .empty{font-size:13.5px;color:var(--ink-soft);line-height:1.5}

/* ── « Ses branchements » : outils + statut honnête ────────────────────────── */
.app .main .v4 .tool{display:flex;align-items:center;gap:13px;padding:12px 0;border-top:1px solid var(--line)}
.app .main .v4 .tool:first-of-type{border-top:0}
.app .main .v4 .tool .ti2{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--card-2);color:var(--ink-soft)}
.app .main .v4 .tool .ti2 .icon{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9}
.app .main .v4 .tool .tn{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--ink)}

/* ── « Activité récente » : donut grand format (jauge) ─────────────────────── */
.app .main .v4 .jauge{display:flex;justify-content:center;padding-top:4px}
.app .main .v4 .jauge .donut svg{display:block;margin:0 auto 10px}

/* ── MOBILE 375 : board en pile, grille en 1 colonne (pas de débord) ───────── */
@media (max-width:980px){
  .app .main .v4 .grid{grid-template-columns:1fr}
  /* fiche : 3 colonnes → 1 ; les 2 colonnes du bas → 1 (pas de débord) */
  .app .main .v4 .grid3,.app .main .v4 .grid2{grid-template-columns:1fr}
}
@media (max-width:760px){
  .app .main .v4 h1{font-size:34px;letter-spacing:-1.1px}
  /* en-tête de fiche : la photo + le nom restent en ligne, le CTA passe pleine largeur dessous */
  .app .main .v4 .phd{flex-wrap:wrap}
  .app .main .v4 .phd .pi h1{font-size:28px;letter-spacing:-.9px}
  .app .main .v4 .phd .cta{width:100%;justify-content:center}
  /* le board passe en PILE verticale : chaque étape pleine largeur, connecteurs masqués */
  .app .main .v4 .flow{grid-template-columns:1fr;gap:14px}
  .app .main .v4 .gap{display:none}
  .app .main .v4 .board{padding:22px 18px 26px}
  .app .main .v4 .card{padding:18px 18px}
}
/* 375 strict : le board étroit ne doit JAMAIS débord ; `.remonte` en 1 colonne et les sous-textes
   des rangées peuvent retourner à la ligne (pas de troncature horizontale). */
@media (max-width:480px){
  .app .main .v4 .board{padding:18px 14px 22px}
  .app .main .v4 .remonte{grid-template-columns:1fr}
  .app .main .v4 .row{padding:11px 8px;gap:10px}
  .app .main .v4 .row .tx span{white-space:normal}
  /* rangées d'action étroites : pill + bouton passent sous l'avatar+titre plutôt que de forcer un débord */
  .app .main .v4 .att{flex-wrap:wrap}
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  S3 — ÉCRAN « ÉCHANGE » (conversation patron ↔ agent)                      ║
   ║  Classes propres à la maquette 99_Workspace/…echange v4.html, portées      ║
   ║  FIDÈLEMENT (valeurs EXACTES), scopées `.app .main .v4`. Réutilise la       ║
   ║  biblio S1/S2 (.phd/.tabs/.crumb/.card/.ch/.meta/.notdo/.att/.pill).        ║
   ║  Le CHAT GARDE ses ids bf-* (JS inchangé) : on RESTYLE `.bf-row`/`.bf-b`    ║
   ║  en bulles `.bub` au look v4 via des règles PLUS SPÉCIFIQUES que le         ║
   ║  `_BRIEF_STYLE` inline ([0,3,0] `.app .main .v4 .bf-*` > [0,1,0] `.bf-*`).  ║
   ║  Tokens sémantiques → clair/sombre/375 gratuits (maquette light-only).     ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── EN-TÊTE Échange : crumb (était non scopé en v4) ───────────────────────── */
.app .main .v4 .crumb{font-size:13px;font-weight:600;color:var(--ink-faint);margin-bottom:10px;
  display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.app .main .v4 .crumb a{color:var(--ink-faint);text-decoration:none}
.app .main .v4 .crumb a:hover{color:var(--ink-soft)}
.app .main .v4 .crumb .icon{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
/* la photo de l'en-tête échange (maquette : `.phd .big.pic`) — alias du `.big.av-photo` de S2 */
.app .main .v4 .phd .big.pic{background-size:cover;background-position:center 24%;color:transparent}
.app .main .v4 .phd .pi .role{font-weight:600}

/* ── LAYOUT échange : conversation (large) | colonne contexte ──────────────── */
.app .main .v4 .echat{display:grid;grid-template-columns:1.55fr 1fr;gap:20px;align-items:start}

/* ── CONVERSATION : carte blanche pleine hauteur, fil + composer collé en bas ── */
.app .main .v4 .conv{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:24px;display:flex;flex-direction:column;min-height:560px;min-width:0}
/* le fil bf-log = la zone `.msgs` de la maquette (flex:1, scroll interne) */
.app .main .v4 .conv .bf-log{flex:1;display:flex;flex-direction:column;gap:16px;padding:4px 2px 18px;
  max-height:60vh;overflow-y:auto;background:none;border:0;margin:0}
/* notice (LLM off) en tête du fil */
.app .main .v4 .conv .bf-notice{margin:0 2px 12px;padding:11px 15px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--card-2);color:var(--ink-soft);font-size:13px;line-height:1.5}

/* BULLES : `.bf-row.bf-a`(agent, gauche) / `.bf-row.bf-u`(patron, droite) restylées en `.bub` v4.
   La maquette met une PHOTO/initiale en pastille avant la bulle → on la rend par ::before (le JS
   client crée `.bf-row` SANS pastille ; le ::before la fournit, identité cohérente écrit+voix). */
.app .main .v4 .conv .bf-row{display:flex;gap:11px;max-width:78%;width:fit-content;
  align-self:flex-start;align-items:flex-start;justify-content:flex-start}
.app .main .v4 .conv .bf-row.bf-a::before{content:"";width:34px;height:34px;border-radius:50%;flex:none;
  box-shadow:var(--shadow-sm);background-image:var(--ag-photo,none);background-size:cover;
  background-position:center 24%;background-color:var(--accent)}
.app .main .v4 .conv .bf-row.bf-u{align-self:flex-end;flex-direction:row-reverse}
.app .main .v4 .conv .bf-row.bf-u::after{content:var(--me-ini,"R");width:34px;height:34px;border-radius:50%;
  flex:none;display:grid;place-items:center;font-weight:700;font-size:13px;color:#7a3b12;
  box-shadow:var(--shadow-sm);background:linear-gradient(140deg,#f0c8a0,#e8a877)}
.app .main .v4 .conv .bf-b{max-width:100%;padding:12px 16px;border-radius:18px;font-size:13.5px;
  line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--card-2);color:var(--ink);
  border-top-left-radius:6px;box-shadow:none;border:0}
.app .main .v4 .conv .bf-row.bf-u .bf-b{background:var(--accent);color:#fff;
  border-top-left-radius:18px;border-top-right-radius:6px}
/* badge « mémorisé / règle adoptée » (centré) au look pill calme */
.app .main .v4 .conv .bf-learn{align-self:center;font-size:12px;font-weight:600;color:var(--green-ink);
  background:var(--green-soft);padding:5px 13px;border-radius:999px}

/* CARTE D'ACTION injectée (relais/RDV/outils) = `.actcard` de la maquette : bordure accent douce,
   alignée à gauche sous la bulle agent. Les wrappers serveur `.bf-relais-wrap`/`.bf-tools` en héritent. */
.app .main .v4 .conv .bf-relais-wrap,.app .main .v4 .conv .bf-tools{align-self:flex-start;max-width:80%;
  margin-left:45px;background:var(--card);border:1px solid var(--accent-soft);border-radius:18px;
  border-top-left-radius:6px;padding:15px 17px;box-shadow:var(--shadow-sm)}
.app .main .v4 .conv .bf-tools{display:flex;flex-direction:column;gap:8px}
.app .main .v4 .conv .bf-tools-h,.app .main .v4 .conv .bf-relais-h{font-size:13px;font-weight:700;
  color:var(--accent-ink)}
.app .main .v4 .conv .bf-tool{display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:var(--card-2);border-radius:11px;padding:9px 12px;font-size:13px;font-weight:600;
  color:var(--ink);text-decoration:none}
.app .main .v4 .conv .bf-tool span{font-size:12px;font-weight:700;color:var(--accent);white-space:nowrap}

/* COMPOSER : barre arrondie `.bf-input` (mic ronde blanche + champ + bouton rond accent) */
.app .main .v4 .conv .bf-input{display:flex;align-items:center;gap:11px;background:var(--card-2);
  border-radius:999px;padding:9px 9px 9px 20px;margin-top:auto;border:0}
.app .main .v4 .conv .bf-ta{flex:1;border:none;background:none;font-family:inherit;font-size:14px;
  color:var(--ink);outline:none;resize:none;max-height:120px;min-height:24px;line-height:1.4;padding:6px 0}
.app .main .v4 .conv .bf-ta::placeholder{color:var(--ink-faint)}
.app .main .v4 .conv #bf-send{width:auto;min-height:44px;padding:0 20px;border-radius:999px;
  background:var(--accent);color:#fff;font-weight:700;font-size:13.5px;border:0;cursor:pointer;flex:none}
.app .main .v4 .conv #bf-send:disabled{opacity:.5;cursor:default}
/* MICRO en barre de saisie = `.composer .mic` : rond blanc, devient corail-vivant en appel */
.app .main .v4 .conv .bf-mic{width:44px;height:44px;border-radius:50%;background:var(--card);
  color:var(--ink-soft);border:0;display:grid;place-items:center;cursor:pointer;flex:none;
  box-shadow:var(--shadow-sm);transition:.15s}
.app .main .v4 .conv .bf-mic:hover{color:var(--red-ink)}
.app .main .v4 .conv .bf-mic svg{width:19px;height:19px}
.app .main .v4 .conv .bf-mic[aria-pressed="true"]{background:var(--red);color:#fff;
  animation:v4-mic-pulse 2s ease-out infinite}
.app .main .v4 .conv .bf-mic:disabled{opacity:.5;cursor:default;animation:none}
.app .main .v4 .conv .bf-mic-status{margin-top:10px;padding:8px 14px;font-size:12.5px;
  color:var(--ink-soft);background:var(--card-2);border-radius:var(--r-sm)}
@keyframes v4-mic-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--red),transparent 40%)}
  70%{box-shadow:0 0 0 9px color-mix(in srgb,var(--red),transparent 100%)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--red),transparent 100%)}}
@media(prefers-reduced-motion:reduce){.app .main .v4 .conv .bf-mic[aria-pressed="true"]{animation:none}}

/* ── COLONNE CONTEXTE `.ctx` : pile de cartes (attente / qui est l'agent / outils / maturité / besoins) ── */
.app .main .v4 .ctx{display:flex;flex-direction:column;gap:18px;position:sticky;top:8px}
/* « Ce qui attend votre main » : lignes `.att` (réutilise S2) + compteur `.note`/`.n` */
.app .main .v4 .ctx .ph,.app .main .v4 .ctx .who-h{display:flex;align-items:center;margin-bottom:8px}
.app .main .v4 .ctx .ph h3{font-size:16px;font-weight:800;letter-spacing:-.3px;color:var(--ink)}
.app .main .v4 .ctx .ph .grow{flex:1}
.app .main .v4 .ctx .ph .n{font-size:11px;font-weight:800;color:#fff;background:var(--accent);min-width:20px;
  height:20px;border-radius:999px;display:grid;place-items:center;padding:0 6px}
/* lignes d'attente : icône carrée teintée + texte + chevron (lecture → Journal) */
.app .main .v4 .ctx .att{padding:13px 0}
.app .main .v4 .ctx .att .ic2{width:38px;height:38px;border-radius:11px;flex:none;display:grid;
  place-items:center;background:var(--accent-soft);color:var(--accent)}
.app .main .v4 .ctx .att .ic2.a{background:var(--amber-soft,var(--card-2));color:var(--amber-ink)}
.app .main .v4 .ctx .att .ic2 .icon{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9}
.app .main .v4 .ctx .att .tb{flex:1;min-width:0}
.app .main .v4 .ctx .att .tb b{font-size:13.5px;font-weight:700;display:block;color:var(--ink);overflow-wrap:anywhere}
.app .main .v4 .ctx .att .tb span{font-size:12px;color:var(--ink-faint)}
.app .main .v4 .ctx .att .go{color:var(--ink-faint);margin-left:auto;display:flex}
.app .main .v4 .ctx .att .go .icon{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.app .main .v4 .ctx .att-empty{font-size:13px;color:var(--ink-soft);line-height:1.5}
/* « Qui est l'agent » : pastille + nom + rôle, puis « ce qu'il ne fera jamais » (réutilise .meta/.notdo S2) */
.app .main .v4 .ctx .who{display:flex;align-items:center;gap:13px}
.app .main .v4 .ctx .who .ava{width:46px;height:46px;border-radius:50%;flex:none;box-shadow:var(--shadow-sm)}
.app .main .v4 .ctx .who .ava.av-photo{background-size:cover;background-position:center 24%;color:transparent}
.app .main .v4 .ctx .who .wt b{font-size:15px;font-weight:800;display:block;color:var(--ink)}
.app .main .v4 .ctx .who .wt span{font-size:12.5px;color:var(--ink-faint)}
/* outils (constellation) / maturité / besoins : cartes blanches calmes (héritent .card si possible) */
.app .main .v4 .ctx .tools,.app .main .v4 .ctx .mt-bar,.app .main .v4 .ctx #bs-box .bs-box{
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:20px 22px;margin:0}
.app .main .v4 .ctx .mt-bar{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.app .main .v4 .ctx .mt-pill{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px}
.app .main .v4 .ctx .mt-app{background:var(--card-2);color:var(--ink-soft)}
.app .main .v4 .ctx .mt-ope{background:var(--accent-soft);color:var(--accent-ink)}
.app .main .v4 .ctx .mt-aut{background:var(--green-soft);color:var(--green-ink)}
.app .main .v4 .ctx .mt-meta{font-size:12.5px;color:var(--ink-soft);flex:1;min-width:120px}
.app .main .v4 .ctx .mt-prog{flex-basis:100%;height:6px;border-radius:999px;background:var(--card-2);overflow:hidden}
.app .main .v4 .ctx .mt-fill{height:100%;background:var(--accent);transition:width .4s ease}
.app .main .v4 .ctx .bs-h{font-size:13px;font-weight:700;color:var(--ink-soft);margin-bottom:8px}
.app .main .v4 .ctx .bs-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 0;border-top:1px solid var(--line)}
.app .main .v4 .ctx .bs-row:first-of-type{border-top:0}
.app .main .v4 .ctx .bs-t{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
.app .main .v4 .ctx .bs-t b{font-size:13.5px;font-weight:600;color:var(--ink)}
.app .main .v4 .ctx .bs-st{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px}
.app .main .v4 .ctx .bs-demande{background:var(--card-2);color:var(--ink-soft)}
.app .main .v4 .ctx .bs-en_cours{background:var(--accent-soft);color:var(--accent-ink)}
.app .main .v4 .ctx .bs-livre{background:var(--green-soft);color:var(--green-ink)}
/* boutons des cartes contexte (Valider/Marquer satisfait) au look pill v4 */
.app .main .v4 .ctx .btn{border:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:12.5px;
  padding:9px 15px;border-radius:999px;background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}
.app .main .v4 .ctx .btn.sm{padding:7px 13px;font-size:11.5px}

/* ── 375 / tablette : la colonne contexte passe SOUS la conversation (pas de débord) ──────── */
@media(max-width:980px){
  .app .main .v4 .echat{grid-template-columns:1fr}
  .app .main .v4 .ctx{position:static}
}
@media(max-width:480px){
  .app .main .v4 .conv{padding:18px 15px}
  .app .main .v4 .conv .bf-row{max-width:88%}
  .app .main .v4 .conv .bf-relais-wrap,.app .main .v4 .conv .bf-tools{margin-left:0;max-width:100%}
  .app .main .v4 .conv .bf-input{padding:8px 8px 8px 16px;gap:9px}
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  S4 — ÉCRAN « ACTIVITÉ / JOURNAL » (hiérarchie D2)                         ║
   ║  Classes propres à 99_Workspace/…activite v4.html, portées FIDÈLEMENT      ║
   ║  (valeurs EXACTES), scopées `.app .main .v4`. Réutilise la biblio S1/S2/S3 ║
   ║  (.phd/.tabs/.crumb/.chips/.card/.ch/.grid2). PRIMAIRE = « À traiter »      ║
   ║  (cartes .jcard.prio qui PORTENT les hooks .jact-* → le JS valider/relais/ ║
   ║  confirmer-rdv survit, .closest('.jact') retire bien la carte) ; SECONDAIRE ║
   ║  = générateurs repliés sous une `.disc` (tuiles .gen). Light-only maquette  ║
   ║  → sombre dérivé des tokens sémantiques. La couche FONCTIONNELLE conservée  ║
   ║  (Journal complet, Atelier, devis/relance/lire-doc…) est re-stylée au calme ║
   ║  via le pont `.v4 .fnl` (panoplie, pas couloir : zéro fonction strippée).   ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── « À traiter » : cartes de décision (primaire) ─────────────────────────── */
.app .main .v4 .jcard{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;
  border-radius:var(--r-md);background:var(--card-2);margin-bottom:12px;list-style:none}
.app .main .v4 .jcard.prio{background:var(--card);box-shadow:var(--shadow-sm);border:1px solid var(--red-soft)}
.app .main .v4 .jcard .ava{width:44px;height:44px;border-radius:50%;flex:none;box-shadow:var(--shadow-sm);
  background-size:cover;background-position:center 24%;display:grid;place-items:center;
  color:var(--ink-soft);background-color:var(--card-2);font-weight:700;font-size:16px}
.app .main .v4 .jcard .ava .icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9}
.app .main .v4 .jcard .jc{flex:1;min-width:0}
.app .main .v4 .jcard .jc b{font-size:14.5px;font-weight:700;display:block;color:var(--ink);line-height:1.3}
.app .main .v4 .jcard .jc p{font-size:13px;color:var(--ink-soft);margin-top:3px;line-height:1.45;
  overflow-wrap:anywhere}
.app .main .v4 .jcard .jc .meta-s{font-size:12px;color:var(--ink-faint);margin-top:7px}
/* Colonne d'action de carte = `.jacts` (PAS `.jact` → la carte porte `.jact` UNE seule fois pour que
   le `.closest('.jact')` des handlers JS retire LA CARTE, pas la colonne). */
.app .main .v4 .jcard .jacts{display:flex;flex-direction:column;gap:8px;align-items:flex-end;flex:none}
.app .main .v4 .jcard .jacts .pill{font-size:11px;font-weight:700;padding:6px 12px;border-radius:999px;
  white-space:nowrap;text-transform:none}
.app .main .v4 .jcard .jacts .pill.wait{background:var(--card-2);color:var(--ink-soft)}
.app .main .v4 .jcard .jacts .pill.val{background:var(--accent-soft);color:var(--accent-ink)}
.app .main .v4 .jcard .jacts .pill.urg{background:var(--red-soft);color:var(--red-ink)}
.app .main .v4 .jcard .jacts .pill.ok{background:var(--green-soft);color:var(--green-ink)}
/* bouton d'action de carte (porte le hook .jact-valider / .jact-relais / .jact-confirm-rdv) */
.app .main .v4 .jcard .jacts .btn{border:none;cursor:pointer;font-family:inherit;font-weight:700;
  font-size:12.5px;padding:10px 17px;border-radius:999px;background:var(--ink);color:#fff;
  box-shadow:var(--shadow-sm);white-space:nowrap;display:inline-flex;align-items:center;gap:6px;
  text-decoration:none}
.app .main .v4 .jcard .jacts .btn .icon{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.app .main .v4 .jcard .jacts .btn.accent{background:var(--accent)}
.app .main .v4 .jcard .jacts .btn:disabled{opacity:.55;cursor:default}
[data-theme="dark"] .app .main .v4 .jcard .jacts .btn,
:root:not([data-theme="light"]) .app .main .v4 .jcard .jacts .btn{background:var(--card-2);color:var(--ink)}
[data-theme="dark"] .app .main .v4 .jcard .jacts .btn.accent,
:root:not([data-theme="light"]) .app .main .v4 .jcard .jacts .btn.accent{background:var(--accent);color:#fff}

/* ── « Journal » / « Agenda » : lignes de log (.tlog) ──────────────────────── */
.app .main .v4 .tlog{display:flex;align-items:center;gap:13px;padding:13px 0;border-top:1px solid var(--line)}
.app .main .v4 .tlog:first-of-type{border-top:0}
.app .main .v4 .tlog .ti{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--card-2);color:var(--ink-faint)}
.app .main .v4 .tlog .ti .icon{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9}
.app .main .v4 .tlog .ti.ok{background:var(--green-soft);color:var(--green-ink)}
.app .main .v4 .tlog .ti.warn{background:var(--red-soft);color:var(--red-ink)}
.app .main .v4 .tlog .tx{flex:1;min-width:0}
.app .main .v4 .tlog .tx b{font-size:13.5px;font-weight:600;display:block;color:var(--ink)}
.app .main .v4 .tlog .tx span{font-size:12px;color:var(--ink-faint)}

/* ── Disclosure « Produire un document » + tuiles générateurs (.gens/.gen) ─── */
.app .main .v4 .disc{border:1px dashed var(--slab-brd);border-radius:var(--r-md);padding:16px 20px;
  display:flex;align-items:center;gap:12px;cursor:pointer;color:var(--ink-soft);font-weight:600;
  font-size:14px;background:var(--card-2);width:100%;text-align:left;font-family:inherit}
.app .main .v4 .disc .icon{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;flex:none}
.app .main .v4 .disc .chev{margin-left:auto;color:var(--ink-faint);display:inline-flex;transition:transform .2s ease}
.app .main .v4 .disc[aria-expanded="true"] .chev{transform:rotate(180deg)}
.app .main .v4 .gens{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:13px}
.app .main .v4 .gen{background:var(--card-2);border-radius:var(--r-sm);padding:15px;cursor:pointer;
  box-shadow:var(--shadow-sm);border:0;font-family:inherit;text-align:left;display:block;width:100%}
.app .main .v4 .gen:hover{box-shadow:var(--shadow)}
.app .main .v4 .gen .gi{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:var(--card);color:var(--accent-ink);box-shadow:var(--shadow-sm);margin-bottom:10px}
.app .main .v4 .gen .gi .icon{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}
.app .main .v4 .gen b{font-size:13.5px;font-weight:700;display:block;color:var(--ink)}
.app .main .v4 .gen span{font-size:11.5px;color:var(--ink-faint)}
/* ── « outils à la demande » (accordéon) : tuile ACTIVE = liseré accent + gi inversé ── */
.app .main .v4 .gen.gen-jump[aria-expanded="true"]{box-shadow:0 0 0 2px var(--accent) inset,var(--shadow)}
.app .main .v4 .gen.gen-jump[aria-expanded="true"] .gi{background:var(--accent);color:#fff}
.app .main .v4 .gen.gen-jump[aria-expanded="true"] .gi .icon{stroke:#fff}
/* conteneur d'outil ouvert : carte calme rattachée à la grille des tuiles */
.app .main .v4 .fnl.fnl-tool{margin-top:12px}
.app .main .v4 .fnl.fnl-tool>:first-child{margin-top:0}
.app .main .v4 .fnl.fnl-tool .block-h:first-child{margin-top:2px}
/* « Aller plus loin » : disclosures EMPILÉES, légères, espacées ; conteneur replié au calme */
.app .main .v4 .detail-disc,.app .main .v4 .echdisc{margin-top:10px;font-size:13.5px;padding:13px 18px}
.app .main .v4 .echdisc{background:transparent;border-style:dashed}
.app .main .v4 .fnl.fnl-detail{margin-top:6px;margin-bottom:6px}
.app .main .v4 .fnl.fnl-detail>:first-child{margin-top:0}
.app .main .v4 .fnl.fnl-detail .block-h:first-child{margin-top:2px}
/* lien discret « › » (Ses livrables / Ses outils / page dédiée) */
.app .main .v4 .cardlink-sm{display:inline-flex;align-items:center;gap:7px;color:var(--accent);font-weight:700;
  font-size:13px;text-decoration:none}
.app .main .v4 .cardlink-sm:hover{text-decoration:underline}
.app .main .v4 .cardlink-sm .icon{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}

/* ── statebar (compteurs 30j) au calme v4 ──────────────────────────────────── */
.app .main .v4 .statebar{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.app .main .v4 .statebar .stat{background:var(--card);border-radius:var(--r-md);padding:16px 18px;
  box-shadow:var(--shadow-sm)}
.app .main .v4 .statebar .stat .sk{font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--ink-faint);
  display:flex;align-items:center;gap:6px}
.app .main .v4 .statebar .stat .sk .icon{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.app .main .v4 .statebar .stat .sv{font-size:26px;font-weight:800;color:var(--ink);margin-top:6px;letter-spacing:-.5px}
.app .main .v4 .statebar .stat .sd{font-size:12px;color:var(--ink-faint);margin-top:2px}

/* ── PONT couche fonctionnelle conservée (`.fnl`) : titres + cartes au calme ── */
/* Les sous-panneaux fonctionnels (Journal complet, Atelier, devis/relance/lire-doc/reproduire,
   perfectionnement) gardent leur DOM cockpit (markup + ids + hooks JS intacts) ; on les re-style
   ICI au look v4, plus spécifiquement que cockpit.css, sans toucher au fonctionnel. */
.app .main .v4 .fnl{margin-top:8px}
.app .main .v4 .fnl[hidden]{display:none}
.app .main .v4 .fnl .block-h{display:flex;align-items:center;gap:14px;margin:26px 2px 4px}
.app .main .v4 .fnl .block-h .h-cond{font-size:16px;font-weight:800;letter-spacing:-.3px;color:var(--ink);
  margin:0;font-family:inherit;text-transform:none}
.app .main .v4 .fnl .block-h .line{flex:1;height:1px;background:var(--line)}
.app .main .v4 .fnl .lede{font-size:13px;color:var(--ink-soft);line-height:1.55;margin:4px 2px 10px}
.app .main .v4 .fnl .card,.app .main .v4 .fnl .card-pad{background:var(--card);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:20px 22px}
.app .main .v4 .fnl .field label{font-size:13px;font-weight:700;color:var(--ink);display:block;margin-bottom:6px}
.app .main .v4 .fnl .field .hint{font-weight:500;color:var(--ink-faint)}
.app .main .v4 .fnl .field input,.app .main .v4 .fnl .field select,.app .main .v4 .fnl .field textarea,
.app .main .v4 .fnl .in{width:100%;background:var(--card-2);border:1px solid var(--line);border-radius:14px;
  padding:11px 14px;font-size:14px;color:var(--ink);font-family:inherit;box-sizing:border-box}
.app .main .v4 .fnl .field{margin-bottom:14px}
.app .main .v4 .fnl .btn.primary{border:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:13px;
  padding:11px 18px;border-radius:999px;background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}
.app .main .v4 .fnl .btn.ghost,.app .main .v4 .fnl .ghostbtn{border:1px solid var(--line);cursor:pointer;
  font-family:inherit;font-weight:700;font-size:12.5px;padding:9px 15px;border-radius:999px;
  background:var(--card-2);color:var(--ink-soft);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.app .main .v4 .fnl .btn.sm{font-size:11.5px;padding:7px 13px}
.app .main .v4 .fnl .status{font-size:12.5px;color:var(--ink-soft);margin-top:8px}
.app .main .v4 .fnl .status.err{color:var(--red-ink)}
.app .main .v4 .fnl .status.ok{color:var(--green-ink)}
.app .main .v4 .fnl .empty{font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.app .main .v4 .fnl .row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.app .main .v4 .fnl .foot{font-size:12px;color:var(--ink-faint);margin-top:18px;line-height:1.5}
.app .main .v4 .fnl .foot a{color:var(--accent)}

/* ── MOBILE 375 : grilles en pile, pas de débord ───────────────────────────── */
@media(max-width:980px){
  .app .main .v4 .gens{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .app .main .v4 .statebar{grid-template-columns:1fr 1fr}
  .app .main .v4 .gens{grid-template-columns:1fr}
}
@media(max-width:480px){
  /* la carte de décision empile son action sous le récit (pas de troncature) */
  .app .main .v4 .jcard{flex-wrap:wrap}
  .app .main .v4 .jcard .jacts{flex-direction:row;align-items:center;width:100%;
    justify-content:flex-end;flex-wrap:wrap}
  .app .main .v4 .fnl .row-2{grid-template-columns:1fr}
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  S5 — ÉCRAN « FICHE DE POSTE » (le cadre éditable du renfort)              ║
   ║  Maquette : 99_Workspace/Le-Bureau-Renfora — fiche-poste v4.html.          ║
   ║  Classes propres portées FIDÈLEMENT (valeurs EXACTES), scopées             ║
   ║  `.app .main .v4`. Réutilise la biblio S1/S2 (.phd/.tabs/.crumb/.card/.ch/  ║
   ║  .grid2/.meta/.notdo). DIFFÉRENCE vs maquette (read-only `.in`) : la fiche  ║
   ║  réelle est ÉDITABLE → les `.field input/select/textarea` PORTENT le look   ║
   ║  des `.in` (même fond/rayon/typo) mais restent de vrais champs (panoplie,   ║
   ║  pas couloir). Maquette light-only → sombre dérivé des tokens sémantiques.  ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── EN-TÊTE : la `.cta` de la fiche est le bouton « Enregistrer » (encre, pas accent) ── */
.app .main .v4 .phd .cta.save{background:var(--ink);box-shadow:var(--shadow)}
.app .main .v4 .phd .cta.save:hover{box-shadow:var(--pop)}
[data-theme="dark"] .app .main .v4 .phd .cta.save,
:root:not([data-theme="light"]) .app .main .v4 .phd .cta.save{background:var(--card-2);color:var(--ink)}

/* ── BANDEAU d'info (modification suivie au Carnet → validation) ────────────── */
.app .main .v4 .banner{background:var(--accent-soft);border-radius:14px;padding:13px 16px;font-size:13px;
  color:var(--accent-ink);font-weight:600;display:flex;align-items:center;gap:10px;margin:0 2px 18px}
.app .main .v4 .banner .icon{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;flex:none}

/* ── LE FORMULAIRE : colonne de champs (.field), libellé MAJUSCULE + champ calme ── */
.app .main .v4 .form{display:flex;flex-direction:column;gap:16px}
.app .main .v4 .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.app .main .v4 .form .field{margin:0}
/* fiche de poste : champs groupés en CARTES (maquette « Son identité » / « Sa mission »…) — pile
   verticale d'espacement régulier à l'intérieur d'une .card, sous le .ch ; les .frow gardent leur grille. */
.app .main .v4 .form .fcg{display:flex;flex-direction:column;gap:16px}
.app .main .v4 .field>label{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:7px}
.app .main .v4 .field>label .hint{display:block;text-transform:none;letter-spacing:0;font-size:11.5px;
  font-weight:500;color:var(--ink-faint);margin-top:3px}
/* champ éditable = look « .in » de la maquette (fond card-2, r14), + vrai contrôle de saisie */
.app .main .v4 .form input,.app .main .v4 .form select,.app .main .v4 .form textarea,
.app .main .v4 .field .in,.app .main .v4 .field .ro-field{width:100%;background:var(--card-2);
  border:1px solid var(--line);border-radius:14px;padding:13px 16px;font-size:14px;color:var(--ink);
  font-weight:500;font-family:inherit;box-sizing:border-box;min-height:48px;line-height:1.4}
.app .main .v4 .form input:focus,.app .main .v4 .form select:focus,.app .main .v4 .form textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.app .main .v4 .form textarea{min-height:84px;resize:vertical;line-height:1.5;
  color:var(--ink-soft);font-weight:400}
.app .main .v4 .form input::placeholder,.app .main .v4 .form textarea::placeholder{
  color:var(--ink-faint);font-weight:400}
/* « .ro-field » = champ NON modifiable (le poste, défini par le métier) — calme, en retrait */
.app .main .v4 .field .ro-field{color:var(--ink-faint);display:flex;align-items:center;
  background:var(--card-2);font-weight:500}

/* ── BOUTON d'enregistrement (sous le formulaire) + ligne de statut (a11y aria-live) ── */
.app .main .v4 .form .btn.primary,.app .main .v4 .notdo .btn.primary{border:none;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:14px;padding:14px 22px;border-radius:999px;
  background:var(--accent);color:#fff;box-shadow:var(--shadow-sm);margin-top:2px;
  display:inline-flex;align-items:center;gap:8px}
.app .main .v4 .form .btn.primary:disabled,.app .main .v4 .notdo .btn.primary:disabled{
  opacity:.55;cursor:default}
.app .main .v4 .status{font-size:12.5px;color:var(--ink-soft);margin-top:8px;min-height:0}
.app .main .v4 .status[hidden],.app .main .v4 .status:empty{margin-top:0}
.app .main .v4 .status.err{color:var(--red-ink)}
.app .main .v4 .status.ok{color:var(--green-ink)}

/* ── PANNEAU « Tour de garde » / « Consignes » / « le trousseau » (.notdo) ──── */
/* .notdo est déjà défini (S2) : on n'ajoute que ce qui est PROPRE à la fiche (titre, champs, liste). */
.app .main .v4 .notdo b{font-size:13px;font-weight:700;color:var(--red-ink);display:block}
.app .main .v4 .notdo p{font-size:13px;color:var(--ink-soft);line-height:1.45}
.app .main .v4 .notdo p b,.app .main .v4 .notdo p code{display:inline;color:var(--ink);font-weight:700}
.app .main .v4 .notdo p code{font-family:ui-monospace,monospace;font-size:12px}
.app .main .v4 .notdo .field{margin-top:10px}
.app .main .v4 .notdo .field .hint{display:inline;text-transform:none;letter-spacing:0;
  font-weight:500;color:var(--ink-faint)}
.app .main .v4 .notdo input{width:100%;background:var(--card-2);border:1px solid var(--line);
  border-radius:14px;padding:12px 14px;font-size:14px;color:var(--ink);font-family:inherit;box-sizing:border-box}
.app .main .v4 .notdo input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.app .main .v4 .notdo ul{list-style:none;margin:6px 0 0;padding:0}
.app .main .v4 .notdo li{list-style:none;font-size:13px;color:var(--ink-soft);font-weight:500;
  padding-left:18px;position:relative;margin-bottom:7px;line-height:1.4}
.app .main .v4 .notdo li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:2px;
  background:var(--red);border-radius:2px}

/* ── ZONE SENSIBLE « Retirer ce renfort » (.danger-zone + modale .rb-modal) ─── */
.app .main .v4 .danger-zone{margin-top:18px;border:1px solid var(--red-soft);border-radius:var(--r-md);
  padding:18px 20px;background:var(--card)}
.app .main .v4 .danger-zone h2{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--red-ink);margin:0 0 7px;display:flex;align-items:center;gap:7px;font-family:inherit}
.app .main .v4 .danger-zone h2 .icon{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.app .main .v4 .danger-zone p{font-size:13px;color:var(--ink-soft);line-height:1.5}
.app .main .v4 .danger-zone p b{color:var(--ink);font-weight:700}
.app .main .v4 .danger-zone .dz-btn{margin-top:13px;border:1px solid var(--red-soft);background:var(--red-soft);
  color:var(--red-ink);font-family:inherit;font-weight:700;font-size:13px;padding:11px 17px;border-radius:999px;
  cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.app .main .v4 .danger-zone .dz-btn .icon{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.app .main .v4 .danger-zone .dz-btn:hover{background:var(--red);color:#fff}
/* modale de confirmation (scrim + boîte) — porte le look v4, garde le DOM/hooks */
.app .main .v4 .rb-modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px}
.app .main .v4 .rb-modal[hidden]{display:none}
.app .main .v4 .rb-modal-scrim{position:absolute;inset:0;background:rgba(15,17,23,.5);backdrop-filter:blur(2px)}
.app .main .v4 .rb-modal-box{position:relative;background:var(--card);border-radius:var(--r-lg);
  box-shadow:var(--pop);padding:26px 26px 22px;max-width:440px;width:100%}
.app .main .v4 .rb-modal-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:var(--red-soft);color:var(--red-ink);margin-bottom:14px}
.app .main .v4 .rb-modal-ic .icon{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
.app .main .v4 .rb-modal-box h3{font-size:19px;font-weight:800;letter-spacing:-.4px;color:var(--ink);margin:0 0 9px}
.app .main .v4 .rb-modal-box p{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin:0 0 14px}
.app .main .v4 .rb-modal-box p b{color:var(--ink);font-weight:700}
.app .main .v4 .rb-modal-box>label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:7px}
.app .main .v4 .rb-modal-box>label b{color:var(--ink)}
.app .main .v4 .rb-modal-box input{width:100%;background:var(--card-2);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;font-size:14px;color:var(--ink);font-family:inherit;box-sizing:border-box}
.app .main .v4 .rb-modal-box input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.app .main .v4 .rb-modal-box .dz-hint{font-size:12px;color:var(--ink-faint);margin:7px 0 0}
.app .main .v4 .rb-modal-act{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.app .main .v4 .rb-modal-act .btn{border:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:13px;
  padding:11px 18px;border-radius:999px;display:inline-flex;align-items:center;gap:7px}
.app .main .v4 .rb-modal-act .btn .icon{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.app .main .v4 .rb-modal-act .btn.ghost{background:var(--card-2);color:var(--ink-soft);border:1px solid var(--line)}
.app .main .v4 .rb-modal-act .btn.danger{background:var(--red);color:#fff}
.app .main .v4 .rb-modal-act .btn.danger:disabled{opacity:.5;cursor:default}
.app .main .v4 .rb-modal .status{margin-top:12px}

/* ── « Sa mission » (FP-2) re-stylée au calme v4 (le style inline _FP_MISSION_STYLE reste un repli) ── */
.app .main .v4 .fp-mission{background:var(--card-2);border:1px solid var(--line);
  border-left:3px solid var(--green);border-radius:var(--r-sm);padding:16px 18px;margin:0 2px 18px}
.app .main .v4 .fp-mission .fpm-head h2{color:var(--ink)}
.app .main .v4 .fp-mission .fpm-ic{color:var(--green)}
.app .main .v4 .fp-mission .fpm-chip{background:var(--card);border:1px solid var(--line);color:var(--ink-faint)}
.app .main .v4 .fp-mission .fpm-intro{color:var(--ink-faint)}
.app .main .v4 .fp-mission .fpm-role{color:var(--ink)}
.app .main .v4 .fp-mission .fpm-tag{color:var(--ink-soft)}
.app .main .v4 .fp-mission .fpm-axes li{color:var(--ink-soft)}
.app .main .v4 .fp-mission .fpm-axes li::before{background:var(--green)}

/* ── MOBILE : la fiche empile ses rangées de champs et passe les boutons en pleine largeur ── */
@media(max-width:760px){
  .app .main .v4 .frow{grid-template-columns:1fr}
}
@media(max-width:480px){
  .app .main .v4 .phd .cta.save{width:100%;justify-content:center}
  .app .main .v4 .form .btn.primary{width:100%;justify-content:center}
  .app .main .v4 .rb-modal-act .btn{flex:1;justify-content:center}
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  S — ÉCRAN « VALIDATION » (mise en service · « rien sans votre clic »)      ║
   ║  Classes propres à 99_Workspace/…validation v4.html, portées FIDÈLEMENT     ║
   ║  (valeurs EXACTES), scopées `.app .main .v4`. Réutilise la biblio S1/S2     ║
   ║  (.hd/.sub/.crumb/.banner/.card/.ch/.meta/.status) ; AJOUTE le propre :     ║
   ║  .vsplit/.vbox (le périmètre), .cgv (acceptation conditions), .ago (CTA     ║
   ║  de mise en service pleine largeur), variantes .banner.ok (déjà essayé /    ║
   ║  déjà validé). Tokens sémantiques → clair/sombre/375 (maquette light-only). ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── BANDEAU « banc d'essai » : info (.banner S2) ; variante .ok = vert calme ── */
.app .main .v4 .banner.ok{background:var(--green-soft);color:var(--green-ink)}
.app .main .v4 .banner .vb-go{margin-left:auto;flex:none;font-size:12.5px;font-weight:700;
  color:var(--accent);text-decoration:none;white-space:nowrap;padding:7px 14px;border-radius:999px;
  background:var(--card);box-shadow:var(--shadow-sm)}
.app .main .v4 .banner .vb-go:hover{color:var(--accent-ink)}

/* ── CARTE de cadre : .card + .ch + .meta (biblio) — la « citation » 1ʳᵉ phrase ── */
.app .main .v4 .card .meta .v.quote{font-weight:500;color:var(--ink-soft);line-height:1.5}
.app .main .v4 .card .meta .v .editlink{color:var(--accent);font-weight:600}
.app .main .v4 .card .meta .v .editlink:hover{text-decoration:underline}

/* ── PÉRIMÈTRE : 2 colonnes « ce qu'il fait » (vert) / « relais » (corail) ───── */
.app .main .v4 .vsplit{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px}
.app .main .v4 .vbox{background:var(--card-2);border-radius:var(--r-md);padding:18px}
.app .main .v4 .vbox.does .k{color:var(--green-ink)}
.app .main .v4 .vbox.relais .k{color:var(--red-ink)}
.app .main .v4 .vbox .k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  margin-bottom:10px}
.app .main .v4 .vbox ul{list-style:none;margin:0;padding:0}
.app .main .v4 .vbox li{list-style:none;font-size:13px;color:var(--ink-soft);font-weight:500;
  padding-left:18px;position:relative;margin-bottom:8px;line-height:1.4}
.app .main .v4 .vbox li:last-child{margin-bottom:0}
.app .main .v4 .vbox.does li::before{content:"";position:absolute;left:0;top:6px;width:8px;height:8px;
  border-radius:50%;background:var(--green)}
.app .main .v4 .vbox.relais li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:2px;
  background:var(--red);border-radius:2px}

/* ── ACCEPTATION des conditions : case verte cochable + libellé (.cgv) ───────── */
.app .main .v4 .cgv{display:flex;align-items:flex-start;gap:12px;background:var(--card-2);border-radius:14px;
  padding:15px 18px;font-size:13.5px;color:var(--ink-soft);font-weight:500;margin-top:4px;cursor:pointer;
  line-height:1.45}
.app .main .v4 .cgv input{position:absolute;opacity:0;width:0;height:0;margin:0}
.app .main .v4 .cgv .bx{width:22px;height:22px;border-radius:7px;background:var(--card);
  border:1.5px solid var(--line);display:grid;place-items:center;color:transparent;flex:none;
  margin-top:1px;transition:.12s}
.app .main .v4 .cgv .bx .icon{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.6}
.app .main .v4 .cgv input:checked+.bx{background:var(--accent);border-color:var(--accent);color:#fff}
.app .main .v4 .cgv input:focus-visible+.bx{box-shadow:0 0 0 3px var(--accent-soft)}
.app .main .v4 .cgv a{color:var(--accent);font-weight:600}
.app .main .v4 .cgv a:hover{text-decoration:underline}

/* ── CTA « Je valide la mise en service » : accent pleine largeur (.ago) ─────── */
.app .main .v4 .ago{width:100%;margin-top:16px;background:var(--accent);color:#fff;border:none;
  border-radius:16px;padding:17px;font-family:inherit;font-weight:700;font-size:15px;cursor:pointer;
  box-shadow:0 14px 30px -10px rgba(47,95,255,.6)}
.app .main .v4 .ago:hover{box-shadow:0 18px 34px -10px rgba(47,95,255,.7)}
.app .main .v4 .ago:disabled{opacity:.5;cursor:default;box-shadow:none}

/* ── pied de page de l'écran (note « aucun prix ») ───────────────────────────── */
.app .main .v4 .vfoot{font-size:12px;color:var(--ink-faint);font-weight:500;margin-top:14px;line-height:1.5}

@media(max-width:760px){
  .app .main .v4 .vsplit{grid-template-columns:1fr}
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  S6 — ÉCRAN « BRANCHEMENTS » (la panoplie d'outils du renfort)             ║
   ║  ───────────────────────────────────────────────────────────────────────  ║
   ║  PORT STRUCTUREL de 99_Workspace/…branchements v4.html — tout DANS         ║
   ║  `.app .main .v4`. Réutilise la biblio S1/S2/S5 (.phd/.tabs/.crumb/.card/  ║
   ║  .pill/.banner) ; AJOUTE le propre : .seclbl/.tag/.cgrid/.conn/.ci/.cf.    ║
   ║  Maquette light-only → sombre dérivé via jetons (cartes .card-2, icône     ║
   ║  fond .card, statut = couleur). Logos de marque BORNÉS dans .ci (lesson    ║
   ║  S2 : sinon ils rendent en pleine taille). Valeurs exactes du mockup.      ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── libellé de section (+ tag « à brancher pour X ») ───────────────────────── */
.app .main .v4 .seclbl{font-size:12px;font-weight:700;color:var(--ink-soft);margin:6px 2px 12px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.app .main .v4 .seclbl .tag{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-faint);background:var(--card);padding:4px 9px;border-radius:999px;box-shadow:var(--shadow-sm)}

/* ── grille de connecteurs (3 colonnes calmes) ──────────────────────────────── */
.app .main .v4 .cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.app .main .v4 .conn{background:var(--card-2);border-radius:var(--r-md);padding:18px;
  box-shadow:var(--shadow-sm);min-width:0}
.app .main .v4 .conn .ci{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:var(--card);box-shadow:var(--shadow-sm);color:var(--ink-soft);margin-bottom:13px;overflow:hidden}
/* icônes mono : courant stroke ; logos de marque BORNÉS (svg ou img ≤ 22px) — lesson S2 */
.app .main .v4 .conn .ci svg{width:19px;height:19px;display:block;stroke:currentColor;fill:none}
.app .main .v4 .conn .ci.logo{background:var(--card);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),var(--shadow-sm)}
.app .main .v4 .conn .ci.logo svg,.app .main .v4 .conn .ci.logo img{width:22px;height:22px;display:block;
  stroke:none}
[data-theme="dark"] .app .main .v4 .conn .ci.logo,
:root:not([data-theme="light"]) .app .main .v4 .conn .ci.logo{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),var(--shadow-sm)}
.app .main .v4 .conn b{font-size:14px;font-weight:700;display:block;color:var(--ink)}
.app .main .v4 .conn span{font-size:12px;color:var(--ink-faint);line-height:1.4;display:block;margin-top:3px}
.app .main .v4 .conn .cf{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
/* statut « bientôt / avec votre référent » = pill neutre (gris calme) */
.app .main .v4 .conn .pill.soon{background:var(--card);color:var(--ink-faint)}
/* bouton d'action de carte (Brancher / Reconnecter / Retirer) — pill sombre, ghost variant */
.app .main .v4 .conn .cf .btn{border:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:12.5px;
  padding:8px 14px;border-radius:999px;background:var(--ink);color:#fff;box-shadow:var(--shadow-sm);white-space:nowrap}
.app .main .v4 .conn .cf .btn.accent{background:var(--accent);color:#fff}
.app .main .v4 .conn .cf .btn.ghost{background:var(--card);color:var(--ink-soft)}
.app .main .v4 .conn .cf .btn:disabled{opacity:.55;cursor:default;box-shadow:none}
[data-theme="dark"] .app .main .v4 .conn .cf .btn,
:root:not([data-theme="light"]) .app .main .v4 .conn .cf .btn{background:var(--card-2);color:var(--ink)}
[data-theme="dark"] .app .main .v4 .conn .cf .btn.accent,
:root:not([data-theme="light"]) .app .main .v4 .conn .cf .btn.accent{background:var(--accent);color:#fff}
/* lien-note dans la carte (« commun à tous · gérer ») — discret, pas un bouton */
.app .main .v4 .conn .cf .cx-note{font-size:11.5px;color:var(--ink-faint);font-weight:600;text-decoration:none}
.app .main .v4 .conn .cf a.cx-note:hover{color:var(--ink-soft);text-decoration:underline}

/* bande « Recommandés » — léger liseré accent pour distinguer du catalogue (anti-vent : descriptif) */
.app .main .v4 .cx-reco-band{border:1px solid var(--accent-soft);background:var(--accent-soft);
  border-radius:var(--r-lg);padding:6px 16px 18px;margin-bottom:18px}
.app .main .v4 .cx-reco-band .seclbl{margin-top:14px}
.app .main .v4 .cx-reco-intro{font-size:12.5px;color:var(--ink-soft);margin:2px 2px 12px;line-height:1.5}
/* carte d'OUTIL métier (descriptif, pas self-service) : en retrait (pointillé) */
.app .main .v4 .conn.cx-tool{border:1px dashed var(--line);box-shadow:none}
.app .main .v4 .conn.cx-tool .cx-note{font-style:italic}

/* responsive : 2 colonnes ≤ 980, 1 colonne + action pleine largeur ≤ 560 (lesson 375) */
@media(max-width:980px){.app .main .v4 .cgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
  .app .main .v4 .cgrid{grid-template-columns:1fr}
  .app .main .v4 .conn .cf{flex-wrap:wrap}
  .app .main .v4 .conn .cf .btn{width:100%}
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  S6 — ÉCRAN « BANC D'ESSAI » (voix) & « BANC D'ESSAI ÉCRIT »               ║
   ║  Port fidèle de 99_Workspace/…banc-essai v4.html (valeurs EXACTES),        ║
   ║  scopé `.app .main .v4`. Réutilise la biblio S1/S2/S3 (.crumb/.hd/.sub/    ║
   ║  .grid2/.card/.ch/.note). AJOUTE le propre de l'écran : carte d'essai       ║
   ║  vocal centrée (.bench-av avatar + .btn.accent « Appeler ») et le panneau   ║
   ║  écrit en bulles (.msgs/.bub/.composer de la maquette). Light-only maquette ║
   ║  → sombre dérivé des tokens sémantiques (toutes les valeurs passent par les ║
   ║  variables → bascule auto). Panoplie conservée : le JS Vapi (banc voix) et  ║
   ║  le POST /ecrit/{aid}/message (banc écrit) gardent TOUS leurs ids/hooks.    ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── BTN générique (la maquette : `.btn` sombre, `.btn.accent` bleu) ─────────── */
.app .main .v4 .btn{border:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:12.5px;
  padding:10px 17px;border-radius:999px;background:var(--ink);color:#fff;box-shadow:var(--shadow-sm);
  display:inline-flex;align-items:center;gap:7px}
[data-theme="dark"] .app .main .v4 .btn,
:root:not([data-theme="light"]) .app .main .v4 .btn{background:var(--card-2);color:var(--ink)}
.app .main .v4 .btn.accent{background:var(--accent);color:#fff}
[data-theme="dark"] .app .main .v4 .btn.accent,
:root:not([data-theme="light"]) .app .main .v4 .btn.accent{background:var(--accent);color:#fff}
.app .main .v4 .btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.app .main .v4 .btn:disabled{opacity:.55;cursor:default;box-shadow:none}
/* RÉGLAGES — actions secondaires (neutre #eef0f3 maquette) + action sensible (coral).
   Couleur RÉSERVÉE au statut/risque : .soft = neutre, .danger = effacement RGPD. */
.app .main .v4 .btn.soft{background:#eef0f3;color:var(--ink-soft);box-shadow:none}
[data-theme="dark"] .app .main .v4 .btn.soft,
:root:not([data-theme="light"]) .app .main .v4 .btn.soft{background:var(--card-2);color:var(--ink-soft)}
.app .main .v4 .btn.danger{background:var(--red-soft);color:var(--red-ink);box-shadow:none}
.app .main .v4 .btn.danger:hover{background:var(--red);color:#fff}
.app .main .v4 .btnrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* ── CARTE « Essai vocal » : centrée, gros avatar arrondi, CTA « Appeler » ──── */
.app .main .v4 .benchvox{text-align:center;padding:34px 24px;display:flex;flex-direction:column;
  align-items:center;justify-content:center}
.app .main .v4 .benchvox .bench-av{width:96px;height:96px;border-radius:32px;margin:0 auto 18px;
  box-shadow:var(--shadow-sm);border:3px solid var(--card);display:grid;place-items:center;
  font-weight:700;font-size:30px;color:#fff}
.app .main .v4 .benchvox .bench-av.av-photo{background-size:cover;background-position:center 24%;
  color:transparent}
.app .main .v4 .benchvox h3{font-size:18px;font-weight:800;letter-spacing:-.3px;color:var(--ink)}
.app .main .v4 .benchvox p{font-size:13.5px;color:var(--ink-faint);margin:8px auto 20px;max-width:34ch;
  line-height:1.5}
.app .main .v4 .benchvox .bench-call{padding:14px 26px;font-size:14px}
.app .main .v4 .benchvox .bench-call.hangup{background:var(--red);color:#fff}
/* transcript live de l'essai vocal (rempli par Vapi) — pile de bulles dans la carte */
.app .main .v4 .benchvox .transcript{width:100%;display:flex;flex-direction:column;gap:13px;
  margin:4px 0 4px;max-height:38vh;overflow-y:auto;text-align:left}
.app .main .v4 .benchvox .transcript:empty{display:none}
.app .main .v4 .benchvox .bench-status{font-size:11.5px;font-weight:600;color:var(--ink-faint);
  margin:14px 0 12px;letter-spacing:.01em}

/* ── CARTE « Essai écrit » : en-tête + fil `.msgs` + composer (maquette) ─────── */
.app .main .v4 .benchcrit{display:flex;flex-direction:column}
.app .main .v4 .msgs{flex:1;display:flex;flex-direction:column;gap:13px;padding:2px;
  max-height:46vh;overflow-y:auto;margin-bottom:14px}
.app .main .v4 .msgs .bench-idle{text-align:center;color:var(--ink-faint);margin:auto;padding:24px 8px}
.app .main .v4 .msgs .bench-idle h3{font-size:14.5px;font-weight:800;color:var(--ink-soft);margin-bottom:6px}
.app .main .v4 .msgs .bench-idle p{font-size:13px;color:var(--ink-faint);line-height:1.5}
.app .main .v4 .msgs .bench-idle .orb{width:48px;height:48px;border-radius:50%;background:var(--card-2);
  display:grid;place-items:center;color:var(--ink-faint);margin:0 auto 12px}
.app .main .v4 .msgs .bench-idle .orb svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8}

/* BULLE `.bub` (maquette) — agent gauche / patron (`.me`) droite */
.app .main .v4 .bub{display:flex;gap:11px;max-width:84%;width:fit-content;align-self:flex-start;
  align-items:flex-start}
.app .main .v4 .bub .ba{width:30px;height:30px;border-radius:50%;flex:none;box-shadow:var(--shadow-sm);
  display:grid;place-items:center;font-weight:700;font-size:12px;color:#fff;background:var(--accent)}
.app .main .v4 .bub .ba.av-photo{background-size:cover;background-position:center 24%;color:transparent}
.app .main .v4 .bub .bx{padding:11px 15px;border-radius:18px;border-top-left-radius:6px;font-size:13.5px;
  line-height:1.5;background:var(--card-2);color:var(--ink);overflow-wrap:anywhere}
.app .main .v4 .bub .bx .tag{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--accent-soft);padding:2px 8px;border-radius:999px;margin-left:8px;
  white-space:nowrap}
.app .main .v4 .bub.me{align-self:flex-end;flex-direction:row-reverse}
.app .main .v4 .bub.me .ba{background:linear-gradient(140deg,#f0c8a0,#e8a877);color:#7a3b12}
.app .main .v4 .bub.me .bx{background:var(--accent);color:#fff;border-top-left-radius:18px;
  border-top-right-radius:6px}

/* COMPOSER `.composer` (maquette) : barre arrondie, champ + bouton rond `.send` */
.app .main .v4 .composer{display:flex;align-items:center;gap:11px;background:var(--card-2);
  border-radius:999px;padding:9px 9px 9px 20px;margin-top:auto}
.app .main .v4 .composer input{flex:1;border:none;background:none;font-family:inherit;font-size:14px;
  color:var(--ink);outline:none;min-width:0}
.app .main .v4 .composer input::placeholder{color:var(--ink-faint)}
.app .main .v4 .composer .send{width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;
  border:none;display:grid;place-items:center;cursor:pointer;flex:none;box-shadow:var(--shadow-sm);padding:0}
.app .main .v4 .composer .send:disabled{opacity:.5;cursor:default}
.app .main .v4 .composer .send svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2}

/* statut a11y (aria-live) sous le banc — discret, jamais un mur */
.app .main .v4 .bench-foot-st{font-size:12.5px;color:var(--ink-faint);margin-top:12px;min-height:18px}

/* responsive : la grille passe en 1 colonne ≤ 720 ; carte vocale garde l'air ── */
@media(max-width:720px){
  .app .main .v4 .grid2.bench-grid{grid-template-columns:1fr}
  .app .main .v4 .benchvox{padding:28px 18px}
}
@media(max-width:480px){
  .app .main .v4 .benchvox .bench-av{width:80px;height:80px;border-radius:26px}
  .app .main .v4 .composer{padding:8px 8px 8px 16px;gap:9px}
  .app .main .v4 .bub{max-width:92%}
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  S7 — ÉCRAN « DOCUMENTS / LIVRABLES »                                       ║
   ║  Port fidèle de 99_Workspace/…livrables v4.html (valeurs EXACTES), scopé   ║
   ║  `.app .main .v4`. Réutilise la biblio S1 (.hd/.kick/h1/.sub/.chips/.chip/  ║
   ║  .card/.ch/.note) + les pills S1 (.pill.val/.urg/.ok/.wait). AJOUTE le      ║
   ║  PROPRE de l'écran : la table `.tbl` (en-têtes maj. muets · lignes filets   ║
   ║  · cellule b en encre forte), le `.tchip` neutre (types non-statut : RDV,   ║
   ║  Message) et le bouton de téléchargement rond `.dl`. Light-only maquette →  ║
   ║  sombre dérivé des tokens sémantiques (toutes les valeurs passent par les   ║
   ║  variables → bascule auto). Panoplie conservée : export CSV/Imprimer/Bilan  ║
   ║  + le téléchargement `…/deliv/{did}/download` gardent TOUS leurs liens.     ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* sous-titre d'en-tête : la maquette met le résumé de tête en `.sub` (déjà porté S1) */
.app .main .v4 .tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.app .main .v4 .tbl{width:100%;border-collapse:collapse;min-width:520px}
.app .main .v4 .tbl th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--ink-faint);padding:0 12px 14px}
.app .main .v4 .tbl td{padding:15px 12px;border-top:1px solid var(--line);font-size:13.5px;
  font-weight:500;color:var(--ink-soft);vertical-align:middle}
.app .main .v4 .tbl td b{color:var(--ink);font-weight:700}
.app .main .v4 .tbl td.tright{text-align:right}
/* type non-statut (RDV, Message) : pastille neutre — distincte des `.pill` de statut */
.app .main .v4 .tchip{display:inline-block;font-size:11px;font-weight:700;padding:6px 12px;
  border-radius:999px;background:var(--chip-n);color:var(--ink-soft);white-space:nowrap}
/* bouton de téléchargement rond (maquette : `.dl`) → ici un <a> vers …/download.
   Pas d'ombre (la maquette n'en a pas). */
.app .main .v4 .dl{width:34px;height:34px;border-radius:50%;background:var(--chip-n);
  display:inline-grid;place-items:center;color:var(--ink-soft);cursor:pointer;text-decoration:none;
  transition:.15s}
.app .main .v4 .dl:hover{transform:translateY(-1px);color:var(--ink)}
.app .main .v4 .dl svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
/* état vide HONNÊTE de la table (jamais du vent : aucune ligne fictive) */
.app .main .v4 .tbl-empty{font-size:14px;color:var(--ink-soft);line-height:1.55;padding:8px 2px 4px}
.app .main .v4 .tbl-empty b{color:var(--ink);font-weight:700}
/* note de pied (rétention / envoi à venir) sous la carte */
.app .main .v4 .lvfoot{color:var(--ink-faint);font-size:12.5px;font-weight:500;margin-top:16px;
  line-height:1.5;padding:0 2px}
.app .main .v4 .lvfoot b{color:var(--ink-soft);font-weight:700}
.app .main .v4 .lvfoot a{color:var(--accent);font-weight:600;text-decoration:none}
.app .main .v4 .lvfoot a:hover{text-decoration:underline}

@media(max-width:560px){
  .app .main .v4 .card{padding:18px 16px}
  .app .main .v4 .tbl{min-width:480px}
}
@media print{
  .app .main .v4 .dl,.app .main .v4 .chips,.app .main .v4 .ph-act{display:none}
  /* IMPRESSION du Bilan : on retire le chrome de la dalle (rail/top-bar/cloche/foot) pour
     produire une feuille de FAITS propre — le contenu `.v4` reste tel quel. La maquette est
     light-only ; on force fond blanc + suppression des ombres pour l'économie d'encre. */
  .app .top,.app .rail,.app .foot,.app .main .v4 .screen-only{display:none!important}
  body{background:#fff!important;padding:0!important}
  .app{box-shadow:none!important;border-radius:0!important;background:#fff!important}
  .app .body{padding:0!important}
  .app .main .v4 .card,.app .main .v4 .stat{box-shadow:none!important;border:1px solid #e6e8ed}
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  S7 — ÉCRAN « RÉFÉRENTIEL » (les données que vos renforts consultent)      ║
   ║  ───────────────────────────────────────────────────────────────────────  ║
   ║  PORT STRUCTUREL de 99_Workspace/…referentiel v4.html — tout DANS          ║
   ║  `.app .main .v4`. Réutilise la biblio S1/S2/S6 (.hd/.kick/.chips/.chip.ue/ ║
   ║  .card/.ch/.cgrid/.conn/.ci/.cf/.pill.ok/.form/.field/.status). AJOUTE le   ║
   ║  propre : bouton d'en-tête de carte (.ch .btn), pill amber « en cours de    ║
   ║  lecture » (.pill.read) et carte d'ajout pointillée (.conn.add). Maquette   ║
   ║  light-only → sombre dérivé via jetons. « Données, jamais des instructions »║
   ║  (sûreté) reste affiché. Valeurs exactes du mockup.                         ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
/* token amber doux (absent du :root global) — dérivé clair/sombre cohérent */
:root{--amber-soft:#fbf0db}
[data-theme="dark"],:root:not([data-theme="light"]){--amber-soft:#3a2f16}

/* bouton d'en-tête de carte (« + Ajouter un document ») = pill sombre de la maquette */
.app .main .v4 .ch .btn{border:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:12.5px;
  padding:10px 17px;border-radius:999px;background:var(--ink);color:#fff;box-shadow:var(--shadow-sm);
  white-space:nowrap;display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.app .main .v4 .ch .btn .icon{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.app .main .v4 .ch .btn:hover{transform:translateY(-1px)}
[data-theme="dark"] .app .main .v4 .ch .btn,
:root:not([data-theme="light"]) .app .main .v4 .ch .btn{background:var(--card-2);color:var(--ink)}

/* pill statut de lecture du document (maquette : amber doux « En cours de lecture ») */
.app .main .v4 .pill.read{background:var(--amber-soft);color:var(--amber-ink)}

/* carte « Ajouter » pointillée en fin de grille (texte, fichier ou import Drive) */
.app .main .v4 .conn.add{border:1.5px dashed var(--line);background:transparent;box-shadow:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  color:var(--ink-faint);cursor:pointer;text-decoration:none}
.app .main .v4 .conn.add .ci{background:var(--card-2);margin-bottom:13px}
.app .main .v4 .conn.add b{color:var(--ink-soft)}
.app .main .v4 .conn.add:hover{border-color:var(--accent)}

/* le formulaire d'ajout (texte / fichier) réutilise `.form`/`.field` ; on borne juste
   le champ fichier pour qu'il tienne dans la carte (sans casser le look `.form input`) */
.app .main .v4 .form input[type=file]{padding:11px 14px;font-weight:500;color:var(--ink-soft)}
.app .main .v4 .form input[type=file]::file-selector-button{font-family:inherit;font-weight:700;
  font-size:12px;border:none;border-radius:999px;padding:7px 13px;margin-right:11px;cursor:pointer;
  background:var(--ink);color:#fff}
[data-theme="dark"] .app .main .v4 .form input[type=file]::file-selector-button,
:root:not([data-theme="light"]) .app .main .v4 .form input[type=file]::file-selector-button{
  background:var(--card);color:var(--ink)}
/* note de sûreté / RGPD sous les cartes (pied du référentiel) */
.app .main .v4 .reffoot{color:var(--ink-faint);font-size:12.5px;font-weight:500;margin-top:18px;
  line-height:1.5;padding:0 2px}
.app .main .v4 .reffoot b{color:var(--ink-soft);font-weight:700}
.app .main .v4 .reffoot a{color:var(--accent);font-weight:600;text-decoration:none}
.app .main .v4 .reffoot a:hover{text-decoration:underline}

/* ===== MON RÉFÉRENT — demande = ligne `.att` + fil dépliable (panoplie, pas couloir) =====
   La ligne reste pixel-fidèle à la maquette (pill + titre + sous-ligne) ; le `<details>`
   garde le fil COMPLET (votre message + réponse du référent) sans alourdir le défaut. */
.app .main .v4 .dmd{border-top:1px solid var(--line)}
.app .main .v4 .dmd:first-of-type{border-top:0}
.app .main .v4 .dmd>summary{list-style:none;cursor:pointer}
.app .main .v4 .dmd>summary::-webkit-details-marker{display:none}
.app .main .v4 .dmd>summary .att{border-top:0}
.app .main .v4 .dmd>summary .chev{flex:none;color:var(--ink-faint);transition:.15s;display:inline-grid;place-items:center}
.app .main .v4 .dmd[open]>summary .chev{transform:rotate(90deg)}
.app .main .v4 .dmd>summary:hover .att .tx b{color:var(--accent-ink)}
/* Le pill de statut ne doit pas ÉCRASER le titre de la demande au 375 : il peut rétrécir et
   passer en casse-phrase sur plusieurs lignes plutôt que de voler la largeur (« En cours chez
   Renfora » est long). `.tx` garde flex:1/min-width:0 → le titre reste lisible. */
.app .main .v4 .dmd .att .dmd-pill{flex:0 1 auto;white-space:normal;min-width:0}
.app .main .v4 .dthread{display:flex;flex-direction:column;gap:11px;padding:2px 2px 16px 4px}
.app .main .v4 .dmsg{display:flex;gap:10px;max-width:88%;width:fit-content}
.app .main .v4 .dmsg .da{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:11px;font-weight:700;box-shadow:var(--shadow-sm)}
.app .main .v4 .dmsg .db{padding:10px 14px;border-radius:16px;font-size:13px;line-height:1.5;color:var(--ink)}
.app .main .v4 .dmsg .db .who{display:block;font-size:11px;font-weight:700;color:var(--ink-faint);margin-bottom:3px}
.app .main .v4 .dmsg.you{align-self:flex-end;flex-direction:row-reverse}
.app .main .v4 .dmsg.you .da{background:linear-gradient(140deg,#f0c8a0,#e8a877);color:#7a3b12}
.app .main .v4 .dmsg.you .db{background:var(--accent);color:#fff;border-top-right-radius:5px}
.app .main .v4 .dmsg.you .db .who{color:rgba(255,255,255,.8)}
.app .main .v4 .dmsg.ref .da{background:var(--card-2);color:var(--ink-soft)}
.app .main .v4 .dmsg.ref .db{background:var(--card-2);border-top-left-radius:5px}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  EMBAUCHE (catalogue) — « Embaucher un renfort »                           ║
   ║  Classes propres au mockup 99_Workspace/…embauche v4.html, portées         ║
   ║  FIDÈLEMENT (valeurs EXACTES), scopées `.app .main .v4`. Réutilise la       ║
   ║  biblio S1 (.hd/.sub/.mini). Tokens sémantiques → clair/sombre/375 gratuits ║
   ║  (mockup light-only). « FAÇON ≠ LIVE » : la couleur du badge est RÉSERVÉE   ║
   ║  au statut RÉEL — vert SEULEMENT pour « live », neutre/accent par défaut.   ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── BARRE : recherche (pilule) + segmenteur de canal + compteur ───────────── */
.app .main .v4 .hire-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:2px 2px 0}
.app .main .v4 .searchbar{flex:1;min-width:240px;max-width:460px;display:flex;align-items:center;gap:11px;
  background:var(--card);border-radius:999px;padding:0 20px;box-shadow:var(--shadow-sm);
  color:var(--ink-faint);font-size:14px;transition:box-shadow .15s}
.app .main .v4 .searchbar:focus-within{box-shadow:var(--shadow)}
.app .main .v4 .searchbar input{flex:1;border:0;background:transparent;font:inherit;font-size:14px;
  color:var(--ink);padding:13px 0;outline:none}
.app .main .v4 .searchbar input::placeholder{color:var(--ink-faint)}
.app .main .v4 .searchbar svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:2}
/* segmenteur de canal — pilules sur fond carte (look v4) */
.app .main .v4 .hire-seg{display:inline-flex;gap:4px;background:var(--card-2);border-radius:999px;
  padding:5px;box-shadow:var(--shadow-sm)}
.app .main .v4 .hire-seg button{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;
  border-radius:999px;padding:9px 15px;font:inherit;font-weight:600;font-size:13px;color:var(--ink-soft);
  cursor:pointer;transition:.14s}
.app .main .v4 .hire-seg button svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.app .main .v4 .hire-seg button.on{background:var(--ink);color:#fff;box-shadow:var(--shadow-sm)}
[data-theme="dark"] .app .main .v4 .hire-seg button.on,
:root:not([data-theme="light"]) .app .main .v4 .hire-seg button.on{background:var(--card);color:var(--ink)}
.app .main .v4 .hire-count{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--ink-faint);white-space:nowrap}
.app .main .v4 .hire-count b{color:var(--ink)}

/* ── CHIPS d'univers (filtre) ──────────────────────────────────────────────── */
.app .main .v4 .unis{display:flex;gap:9px;flex-wrap:wrap;margin:18px 2px 22px}
.app .main .v4 .unis .chip{font-size:13px;font-weight:600;color:var(--ink-soft);padding:9px 16px;
  border-radius:999px;background:var(--card);box-shadow:var(--shadow-sm);cursor:pointer;border:0;
  font-family:inherit;transition:.13s}
.app .main .v4 .unis .chip:hover{color:var(--ink)}
.app .main .v4 .unis .chip.on{background:var(--ink);color:#fff}
[data-theme="dark"] .app .main .v4 .unis .chip.on,
:root:not([data-theme="light"]) .app .main .v4 .unis .chip.on{background:var(--card-2);color:var(--ink)}

/* ── GROUPE d'univers (titre + ligne) ──────────────────────────────────────── */
.app .main .v4 .hire-group{margin-bottom:30px}
.app .main .v4 .hire-group-h{display:flex;align-items:baseline;gap:12px;margin:0 0 14px}
.app .main .v4 .hire-group-h h2{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft)}
.app .main .v4 .hire-group-h .c{font-size:11px;font-weight:700;color:var(--ink-faint)}
.app .main .v4 .hire-group-h .line{flex:1;height:1px;background:var(--line)}

/* ── GRILLE de cartes (mockup : 4 colonnes, photo en tête) ─────────────────── */
.app .main .v4 .cat{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.app .main .v4 .ccard{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);
  overflow:hidden;cursor:pointer;text-decoration:none;color:inherit;display:flex;flex-direction:column;
  transition:transform .15s,box-shadow .15s}
.app .main .v4 a.ccard:hover{transform:translateY(-2px);box-shadow:var(--pop)}
/* carte VISIBLE non-serve (Immo réglementé) : pas de lien → pas d'affordance cliquable */
.app .main .v4 .ccard.nas{cursor:default}
.app .main .v4 .ccard .cph{height:148px;background-size:cover;background-position:center 25%;flex:none;
  background-color:var(--card-2);position:relative;display:grid;place-items:center}
/* dégradé+initiale quand pas de photo casting (déterministe, style inline) */
.app .main .v4 .ccard .cph .ini{font-size:46px;font-weight:800;color:#fff;letter-spacing:.5px}
.app .main .v4 .ccard .cbb{padding:15px 17px;flex:1;display:flex;flex-direction:column}
.app .main .v4 .ccard .cbb b{font-size:15px;font-weight:800;display:block;color:var(--ink)}
.app .main .v4 .ccard .cbb .ro{font-size:12.5px;color:var(--ink-faint);margin-top:2px}
.app .main .v4 .ccard .cbb .cc{margin-top:13px;display:flex;align-items:center;justify-content:space-between;
  gap:8px;font-size:12px;color:var(--ink-faint);font-weight:600}
.app .main .v4 .ccard .cbb .canal{display:inline-flex;align-items:center;gap:6px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app .main .v4 .ccard .cbb .canal svg{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;stroke-width:2;color:var(--accent)}

/* ── BADGE de statut — COULEUR RÉSERVÉE au statut RÉEL (« façon ≠ live ») ───── */
/* live : VERT (réellement en service) ; soon/à-façonner : ACCENT calme ; activé-avec-vous : neutre */
.app .main .v4 .badge-live,.app .main .v4 .badge-soon,.app .main .v4 .badge-acc{
  display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;
  padding:5px 10px;border-radius:999px;white-space:nowrap;flex:none}
.app .main .v4 .badge-live{background:var(--green-soft);color:var(--green-ink)}
.app .main .v4 .badge-soon{background:var(--accent-soft);color:var(--accent-ink)}
.app .main .v4 .badge-acc{background:var(--card-2);color:var(--ink-soft)}
.app .main .v4 .badge-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}

/* carte « Un autre besoin ? » — dashed, neutre (mockup) */
.app .main .v4 .ccard.more{display:flex;align-items:center;justify-content:center;text-align:center;
  border:1.5px dashed var(--slab-brd);box-shadow:none;background:transparent;padding:24px;cursor:pointer}
.app .main .v4 .ccard.more:hover{transform:none;box-shadow:none;border-color:var(--accent)}
.app .main .v4 .ccard.more .mini{margin:0 auto 10px}
.app .main .v4 .ccard.more .mini .icon{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.app .main .v4 .ccard.more b{color:var(--ink)}
.app .main .v4 .ccard.more .ro{font-size:12.5px;color:var(--ink-faint);margin-top:2px}

/* état vide honnête (aucun renfort ne matche la recherche) */
.app .main .v4 .hire-empty{display:none;text-align:center;color:var(--ink-soft);font-size:15px;padding:50px 0}
.app .main .v4 .hire-empty.on{display:block}

/* ── responsive : 4 → 2 → 1 colonnes (jamais de débord au 375) ─────────────── */
@media (max-width:1100px){.app .main .v4 .cat{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .app .main .v4 .cat{grid-template-columns:1fr}
  .app .main .v4 .hire-bar{flex-direction:column;align-items:stretch}
  .app .main .v4 .searchbar{max-width:none}
  .app .main .v4 .hire-count{margin-left:0}
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  AUTH v4 (connexion · bienvenue · reset · oubli) — PORT STRUCTUREL S3.     ║
   ║  Maquette : 99_Workspace/Le-Bureau-Renfora — connexion v4.html.           ║
   ║  Écran HORS coquille .app/.main (split-screen plein écran) → scopé         ║
   ║  `body.auth-v4` (0,1,1) — bat `.esp` de cockpit.css, indépendant de .v4    ║
   ║  des pages-app. Valeurs EXACTES de la maquette CSS. Clair/sombre via       ║
   ║  [data-theme] (maquette light-only → sombre dérivé des jetons v4 comme la  ║
   ║  coquille). Le panneau de marque (.authmk) garde son fond bleu signature   ║
   ║  dans les deux thèmes (c'est une surface accent, pas une carte de contenu).║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
body.auth-v4{font-family:var(--font);background:linear-gradient(160deg,var(--bg),var(--card-2));
  color:var(--ink);-webkit-font-smoothing:antialiased;min-height:100vh;
  display:flex;justify-content:center;align-items:center;padding:34px}
body.auth-v4 .authwrap{width:1080px;max-width:100%;display:grid;grid-template-columns:1fr 1fr;
  background:var(--card);border-radius:var(--r-xl);box-shadow:var(--shadow);overflow:hidden;
  min-height:580px;align-self:center}
/* — colonne formulaire — */
body.auth-v4 .authform{padding:56px 54px;display:flex;flex-direction:column;justify-content:center}
body.auth-v4 .authform .alogo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:20px;
  letter-spacing:-.5px;margin-bottom:36px;text-decoration:none;color:var(--ink)}
body.auth-v4 .authform .alogo .mk{width:36px;height:36px;border-radius:11px;flex:none;
  background:linear-gradient(140deg,#2f5fff,#6a3bff);display:grid;place-items:center;color:#fff;
  box-shadow:0 9px 20px -7px rgba(47,95,255,.55)}
body.auth-v4 .authform .alogo small{display:block;font-weight:500;font-size:10px;color:var(--ink-faint);margin-top:-3px}
body.auth-v4 .authform h1{font-size:32px;font-weight:800;letter-spacing:-1px;margin-bottom:8px;color:var(--ink)}
body.auth-v4 .authform .as{color:var(--ink-soft);font-size:14.5px;margin-bottom:28px;line-height:1.5}
body.auth-v4 .authform form{display:contents}
body.auth-v4 .authform .field{margin-bottom:14px}
body.auth-v4 .authform label{display:block;font-size:13px;font-weight:700;color:var(--ink-soft);margin-bottom:7px}
body.auth-v4 .authform label .hint{display:block;font-size:12px;font-weight:500;color:var(--ink-faint);margin-top:2px;line-height:1.45}
body.auth-v4 .authform .ain{width:100%;background:var(--card-2);border:1px solid var(--line);border-radius:14px;
  padding:15px 18px;font-family:inherit;font-size:14.5px;color:var(--ink);outline:none;transition:.15s}
body.auth-v4 .authform .ain::placeholder{color:var(--ink-faint)}
body.auth-v4 .authform .ain:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
body.auth-v4 .authform .ago{width:100%;background:var(--accent);color:#fff;border:none;border-radius:14px;
  padding:16px;font-family:inherit;font-weight:700;font-size:15px;cursor:pointer;margin-top:6px;
  box-shadow:0 12px 26px -10px rgba(47,95,255,.6);transition:.15s}
body.auth-v4 .authform .ago:hover{box-shadow:0 16px 32px -10px rgba(47,95,255,.7)}
body.auth-v4 .authform .ago:disabled{opacity:.55;cursor:default;box-shadow:none}
body.auth-v4 .authform .forgot{font-size:13px;color:var(--ink-soft);margin:2px 0 4px}
body.auth-v4 .authform .forgot a,body.auth-v4 .authform .forgot b{color:var(--accent);text-decoration:none;font-weight:600}
body.auth-v4 .authform .alink{font-size:13px;color:var(--ink-soft);margin-top:18px;text-align:center}
body.auth-v4 .authform .alink a,body.auth-v4 .authform .alink b{color:var(--accent);text-decoration:none;font-weight:600}
/* notice d'arrivée (email déjà connu) + statut d'envoi/erreur — états honnêtes, jamais un placeholder vide */
body.auth-v4 .authform .anote{margin-bottom:18px;padding:13px 16px;border-radius:14px;background:var(--accent-soft);
  color:var(--accent-ink);font-size:13.5px;line-height:1.5}
body.auth-v4 .authform .status{display:none;margin-top:14px;padding:12px 15px;border-radius:13px;
  font-size:13.5px;line-height:1.5}
body.auth-v4 .authform .status.show{display:block}
body.auth-v4 .authform .status.err{background:var(--red-soft);color:var(--red-ink)}
body.auth-v4 .authform .status.ok{background:var(--green-soft);color:var(--green-ink)}
/* — panneau de marque (bleu signature, identique en clair/sombre) — */
body.auth-v4 .authmk{padding:54px;background:linear-gradient(165deg,#21337a,#2f5fff);color:#fff;
  display:flex;flex-direction:column;justify-content:center}
body.auth-v4 .authmk h2{font-size:30px;font-weight:800;letter-spacing:-1px;line-height:1.15;color:#fff}
body.auth-v4 .authmk>p{font-size:15px;color:#f3f6ff;margin-top:14px;line-height:1.6}
body.auth-v4 .authmk .feat{display:flex;align-items:center;gap:11px;margin-top:18px;font-size:14px;
  color:#f3f6ff;font-weight:500}
body.auth-v4 .authmk .feat .fi{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.15);
  display:grid;place-items:center;flex:none}
/* aperçu produit honnête (l'astreinte, seul agent réellement live) — carte translucide sur le bleu */
body.auth-v4 .authmk .apeek{margin-top:26px;background:rgba(13,20,56,.24);border:1px solid rgba(255,255,255,.16);
  border-radius:18px;padding:16px 18px}
body.auth-v4 .authmk .apeek .ph{display:flex;align-items:center;gap:12px}
body.auth-v4 .authmk .apeek .pav{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.2);font-weight:800;font-size:15px;color:#fff}
body.auth-v4 .authmk .apeek .pid b{font-size:14px;font-weight:800;display:block;color:#fff}
body.auth-v4 .authmk .apeek .pid span{font-size:12px;color:#f3f6ff}
body.auth-v4 .authmk .apeek .pst{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;
  font-weight:700;color:#bff3d8;background:rgba(57,208,140,.18);padding:5px 10px;border-radius:999px;white-space:nowrap}
body.auth-v4 .authmk .apeek .pst i{width:6px;height:6px;border-radius:50%;background:#39d08c;flex:none}
body.auth-v4 .authmk .apeek .prow{display:flex;justify-content:space-between;font-size:13px;margin-top:11px;color:#f3f6ff}
body.auth-v4 .authmk .apeek .prow b{color:#fff;font-weight:700}
body.auth-v4 .authmk .acast{display:flex;margin-top:30px}
body.auth-v4 .authmk .acast .ca{width:46px;height:46px;border-radius:50%;border:3px solid #2f5fff;margin-left:-12px;
  background-size:cover;background-position:center 24%;box-shadow:var(--shadow-sm)}
body.auth-v4 .authmk .acast .ca:first-child{margin-left:0}
body.auth-v4 .authmk .acast .ca.more{background:rgba(255,255,255,.2);display:grid;place-items:center;
  font-weight:700;font-size:13px;color:#fff;border-color:#2f5fff}
/* — responsive : sous 760 la marque passe SOUS le formulaire ; 375 sans débord — */
@media (max-width:760px){
  body.auth-v4{padding:0;align-items:stretch}
  body.auth-v4 .authwrap{grid-template-columns:1fr;border-radius:0;min-height:100vh;box-shadow:none}
  body.auth-v4 .authform{padding:40px 24px;order:1}
  body.auth-v4 .authmk{padding:36px 24px;order:2}
  body.auth-v4 .authform h1{font-size:27px}
  body.auth-v4 .authmk h2{font-size:24px}
}