/* ============================================================================
   LES STYLES DE FLOW RH

   Deux parties, dans l'ordre où elles vivaient dans index.html (découpé le
   12 octobre 2026, sans rien changer) :
   1. la charte et les vues : variables, barre, accueil, formulaire, suivi,
      canvas, profil, et les paliers d'écran étroit ;
   2. les retouches : le workflow vertical, les surfaces sombres, le
      « reskin » sous le style Flow, le board de l'accueil.
   mobile.html et enquete.html ont leurs propres styles.
   ========================================================================== */

/* ======================= 1. la charte et les vues ======================= */
:root{
  --primary:#0046FE; --info:#0046FE;
  --success:#4CAF50; --warning:#F9A825; --error:#F44336;

  --violet:#5A3FD6; --green:#2E7D32; --blue2:#1565C0; --orange:#E64F2C;

  --surface:#FFFFFF;
  --text-primary:#1A1D21;
  --text-secondary:#5B6270;
  --hairline:#E7EAF0;
  --page:#F4F6FA;

  --r-card:3px; --r-ctrl:3px; --r-pill:999px;
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px;

  --shadow-sm:0 1px 2px rgba(20,25,35,.06), 0 1px 3px rgba(20,25,35,.04);
  --shadow-md:0 4px 14px rgba(20,25,35,.06), 0 2px 6px rgba(20,25,35,.05);
  --shadow-lg:0 18px 50px rgba(20,25,35,.14), 0 6px 16px rgba(20,25,35,.08);
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{
  height:100%;
  font-family:'Inter',system-ui,sans-serif;
  color:var(--text-primary);
  background:var(--page);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{overflow:hidden;}
.material-symbols-outlined{font-variation-settings:'opsz' 20,'wght' 400,'FILL' 0,'GRAD' 0; user-select:none;}

/* ============================ APP BAR ============================ */
/* ============================ LOADER — identité FLOW ============================ */
#loader{position:fixed; inset:0; z-index:9999; background:#0046FE; display:grid; place-items:center; cursor:pointer;
  transition:opacity .55s ease, visibility .55s;}
#loader.done{opacity:0; visibility:hidden; pointer-events:none;}
#loader svg{width:min(544px, 84vw); overflow:visible; display:block;}
#loader .ld-line{fill:none; stroke:#fff; stroke-miterlimit:10; stroke-width:5.96;}
#loader .ld-fill{fill:#fff; opacity:0;}
#loader .ld-tag{position:absolute; bottom:36px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.55);
  font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; animation:ldTag 1.2s .9s both;}
@keyframes ldTag{from{opacity:0; transform:translate(-50%,8px);} to{opacity:1; transform:translate(-50%,0);}}
/* la phrase sous le logo, un demi-temps apres le debut du trace */
/* le logo reste exactement au centre : la phrase est posee en absolu sous lui,
   donc elle ne le decale plus. --ld-w commande la taille du sigle, et la position
   de la phrase en decoule : le trace fait 1189.18 x 574.54, soit un rapport de
   0.4831, dont la moitie (0.2416) donne la demi-hauteur rendue.
   544 px de large donne au O la meme taille a l'ecran que dans l'ancien sigle,
   qui faisait 400 px pour une boite 2.38 fois plus petite. */
#loader{--ld-w:min(544px,84vw)}
#loader svg{width:var(--ld-w)}
#loader .ld-base{position:absolute; left:50%; top:calc(50% + var(--ld-w) * 0.2416 + 12px);
  transform:translate(-50%,0); font-family:'Inter',system-ui,sans-serif;
  font-size:clamp(10px,1.5vw,15px); font-weight:500; letter-spacing:.055em;
  color:rgba(255,255,255,.88); white-space:nowrap; animation:ldBase .75s .5s both;}
@keyframes ldBase{from{opacity:0; transform:translate(-50%,9px);} to{opacity:1; transform:translate(-50%,0);}}

/* ============================ SQUELETTE — la trame reelle de l'app ============================ */
#skel{position:fixed; inset:0; z-index:9000; background:var(--page);
  transition:opacity .4s ease, visibility .4s;}
#skel.done{opacity:0; visibility:hidden; pointer-events:none;}
#skel .skl-bar{position:absolute; left:0; right:0; top:0; height:60px;
  background:var(--surface); border-bottom:1px solid var(--hairline);}
/* squelette : chaque bloc est pose par skeleton.js aux coordonnees exactes
   de l'element qu'il represente */
#skel .sklb{position:absolute; background:rgba(16,24,40,.10);
  animation:sklPulse 1.15s ease-in-out infinite;}
#skel.on-dark .sklb{background:rgba(255,255,255,.13);}
@keyframes sklPulse{0%,100%{opacity:.45} 50%{opacity:1}}
@media(prefers-reduced-motion:reduce){ #skel .sklb{animation:none; opacity:.7;} }
:root[data-theme="dark"] #skel .sklb{background:rgba(255,255,255,.11);}

#appbar{
  position:fixed; top:0; left:0; right:0; height:60px; z-index:200;
  display:flex; align-items:center; gap:var(--s4);
  padding:0 var(--s4);
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--hairline);
}
#appbar.on-dark{
  background:rgba(22,24,29,.7);
  border-bottom-color:rgba(255,255,255,.08);
}
.wordmark{
  font-weight:700; font-size:20px; letter-spacing:-.6px; color:var(--primary);
  display:flex; align-items:center; gap:7px; cursor:pointer;
}
/* le RH qualifie la marque, il ne la double pas : plus petit, moins
   contrasté, collé au mot. Le .nom regroupe le tout, sinon le flex du
   .wordmark sépare « Flow » et « RH » par son gap. */
.wordmark .nom{display:inline-flex; align-items:baseline;}
.wordmark .rh{
  font-size:.62em; font-weight:700; letter-spacing:0; margin-left:3px; opacity:.55;
}
.wordmark svg{height:26px; width:26px; display:block; flex:0 0 26px; transition:opacity .15s;}
.wordmark:hover svg{opacity:.85;}
#appbar.on-dark .wordmark{color:#5096FF;}
.wordmark .dot{
  width:9px;height:9px;border-radius:50%;background:var(--primary);
  box-shadow:0 0 10px 1px rgba(0,70,254,.6);
}
.nav{display:flex; align-items:center; gap:2px; margin-left:var(--s2);}
.nav a{
  position:relative; font-size:13.5px; font-weight:500; color:var(--text-secondary);
  padding:8px 14px; border-radius:var(--r-ctrl); cursor:pointer; text-decoration:none;
  transition:color .18s, background .18s;
}
.nav a .material-symbols-outlined{font-size:18px; vertical-align:-4px; margin-right:6px;}
.nav a:hover{color:var(--text-primary); background:rgba(0,70,254,.05);}
.nav a.active{color:var(--primary); font-weight:600; background:rgba(0,70,254,.08);}
#appbar.on-dark .nav a{color:rgba(255,255,255,.6);}
#appbar.on-dark .nav a:hover{color:#fff; background:rgba(255,255,255,.07);}
#appbar.on-dark .nav a.active{color:#fff; background:rgba(0,70,254,.9);}
/* la barre se lit par groupes d'usage : un filet ouvre chaque groupe, pose au
   milieu de l'ecart. il est en absolu, il ne coute donc aucune largeur — la
   barre est deja pleine a 1440px. */
.nav a.nav-sep{margin-left:16px;}
.nav a.nav-sep::before{
  content:""; position:absolute; left:-8px; top:50%; transform:translateY(-50%);
  width:1px; height:18px; background:var(--hairline);
}
#appbar.on-dark .nav a.nav-sep::before{background:rgba(255,255,255,.18);}

/* bac a sable : en retrait, avec une pastille qui ne prend pas de place */
.nav a.nav-lab{color:var(--text-tertiary);}
.nav a.nav-lab::after{
  content:""; position:absolute; top:6px; right:7px;
  width:5px; height:5px; border-radius:50%; background:var(--warning);
}
.nav a.nav-lab:hover{color:var(--text-secondary);}
#appbar.on-dark .nav a.nav-lab{color:rgba(255,255,255,.42);}

/* lien hors application : meme retrait que le bac a sable */
.nav a.nav-ext{color:var(--text-tertiary);}
.nav a.nav-ext:hover{color:var(--text-secondary);}
#appbar.on-dark .nav a.nav-ext{color:rgba(255,255,255,.42);}
.bar-right{margin-left:auto; display:flex; align-items:center; gap:var(--s2);}
.bar-sep{width:1px; height:24px; background:var(--hairline);}
.icon-btn.busy{opacity:.5; pointer-events:none;}
.search{
  display:flex; align-items:center; gap:8px; height:38px; padding:0 14px;
  background:var(--page); border:1px solid var(--hairline); border-radius:var(--r-ctrl);
  color:var(--text-secondary); width:240px; transition:border-color .18s, box-shadow .18s;
}
.search:focus-within{border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,70,254,.12);}
.search .material-symbols-outlined{font-size:18px;}
/* liste de valeurs d'un filtre du tableau, batie depuis les donnees */
.prog-pop{position:fixed; z-index:450; min-width:190px; max-height:280px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-card);
  box-shadow:0 14px 38px rgba(16,24,40,.18); padding:5px;}
.prog-pop .pp-it{padding:7px 10px; font-size:12.5px; border-radius:var(--r-ctrl); cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.prog-pop .pp-it:hover{background:rgba(0,70,254,.07);}
.prog-pop .pp-it.on{color:var(--primary); font-weight:600;}
/* ---- couleur d'etat dans l'assistant et la recherche ----
   Le gris uniforme oblige a lire chaque ligne pour savoir ce qu'elle dit.
   Une reference prend la couleur de son type, un etat celle de son statut :
   l'oeil trie avant de lire. */
.as-ref{color:var(--c); font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em;}
.as-et{font-style:normal; font-weight:600; padding:1px 5px; border-radius:var(--r-ctrl); font-size:.94em;}
.as-et.t-ok{color:var(--success); background:rgba(76,175,80,.14);}
.as-et.t-wait{color:var(--warning); background:rgba(249,168,37,.16);}
.as-et.t-no{color:var(--error); background:rgba(244,67,54,.12);}
.as-et.t-go{color:var(--primary); background:rgba(0,70,254,.10);}
.as-it.t-ok .material-symbols-outlined{color:var(--success);}
.as-it.t-wait .material-symbols-outlined{color:var(--warning);}
.as-it.t-no .material-symbols-outlined{color:var(--error);}
.as-it.t-go .material-symbols-outlined{color:var(--primary);}
/* un refus se voit sans etre lu */
.as-rep.as-refus{border-left:3px solid var(--error); background:#FDF7F5;}
:root[data-theme="dark"] .as-rep.as-refus{background:rgba(216,80,58,.10);}

/* la recherche globale : meme code couleur */
#gsearch-pop .gs-cat{color:var(--primary); opacity:.85;}
#gsearch-pop .gs-it b .as-ref{font-weight:700;}

/* ============================ ASSISTANT — l'ile flottante ============================ */
/* Repliee : une pastille de la largeur d'une carte du hub. Ouverte : un
   panneau court. Elle n'apparait que sur la vue qui l'heberge. */
#as-ile{position:fixed; right:24px; bottom:24px; z-index:320; width:264px;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .28s ease, visibility .28s, transform .28s cubic-bezier(.2,.9,.3,1.1);}
#as-ile.show{opacity:1; visibility:visible; transform:none;}

.as-pill{display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px;
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-card);
  box-shadow:0 8px 26px rgba(16,24,40,.14); cursor:pointer; text-align:left;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s;}
.as-pill:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(16,24,40,.18); border-color:var(--primary);}
#as-ile.open .as-pill{display:none;}
.as-dot{width:30px; height:30px; flex:none; border-radius:var(--r-ctrl); background:#E6F0FF;
  color:var(--primary); display:grid; place-items:center;}
.as-dot.sm{width:26px; height:26px;}
.as-dot .material-symbols-outlined{font-size:18px;}
.as-pill-t{flex:1; min-width:0;}
.as-pill-t b{font-size:12.5px; display:block; line-height:1.3;}
.as-pill-t small{font-size:10.8px; color:var(--text-secondary); display:block;}
.as-chev{font-size:18px; color:var(--text-tertiary); flex:none;}

.as-panel{display:none; flex-direction:column; width:340px; margin-left:-76px;
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-card);
  box-shadow:0 18px 48px rgba(16,24,40,.22); overflow:hidden;}
#as-ile.open .as-panel{display:flex; animation:asIn .26s cubic-bezier(.2,.9,.3,1.1);}
@keyframes asIn{from{opacity:0; transform:translateY(8px) scale(.97);} to{opacity:1; transform:none;}}
.as-top{display:flex; align-items:center; gap:9px; padding:10px 12px; border-bottom:1px solid var(--hairline);}
.as-top-t{flex:1; min-width:0;}
.as-top-t b{font-size:12.5px; display:block; line-height:1.3;}
.as-top-t small{font-size:10.5px; color:var(--text-secondary); display:block;}
.as-x{width:24px; height:24px; flex:none; border:none; background:none; color:var(--text-tertiary);
  cursor:pointer; border-radius:var(--r-ctrl); display:grid; place-items:center;}
.as-x:hover{background:rgba(0,0,0,.06); color:var(--text-primary);}
.as-x .material-symbols-outlined{font-size:17px;}

.as-flux{max-height:300px; overflow-y:auto; padding:11px 12px; display:flex; flex-direction:column;
  gap:9px; background:var(--page);}
.as-dem{align-self:flex-end; max-width:82%; background:var(--primary); color:#fff; font-size:11.8px;
  padding:6px 10px; border-radius:var(--r-ctrl); line-height:1.4;}
.as-rep{align-self:flex-start; max-width:95%; background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r-ctrl); padding:9px 11px;}
.as-txt{font-size:12px; line-height:1.45;}
.as-bloc{margin-top:7px; background:var(--page); border:1px solid var(--hairline); border-radius:var(--r-ctrl);
  padding:8px 9px; font:11px/1.5 ui-monospace,Menlo,Consolas,monospace; white-space:pre-wrap; max-height:150px; overflow:auto;}
.as-liste{margin-top:8px; display:flex; flex-direction:column; gap:7px;}
.as-it{display:flex; align-items:flex-start; gap:7px;}
.as-it .material-symbols-outlined{font-size:16px; color:var(--text-secondary); flex:none; margin-top:1px;}
.as-it b{font-size:11.6px; font-weight:600; display:block; line-height:1.35;}
.as-it small{font-size:10.8px; color:var(--text-secondary); display:block; line-height:1.4;}
.as-mini{margin-left:auto; flex:none; border:1px solid var(--hairline); background:var(--surface);
  border-radius:var(--r-ctrl); font:600 10px Inter,sans-serif; color:var(--text-secondary);
  padding:3px 6px; cursor:pointer; white-space:nowrap;}
.as-mini:hover{color:var(--primary); border-color:var(--primary);}
.as-files{margin-top:8px; display:flex; flex-direction:column; gap:6px;}
.as-file{display:flex; align-items:center; gap:8px; padding:7px 9px; text-decoration:none;
  border:1px solid var(--hairline); border-radius:var(--r-ctrl); background:var(--page); color:var(--text-primary);}
.as-file:hover{border-color:var(--primary);}
.as-file .material-symbols-outlined{font-size:17px; color:var(--primary);}
.as-file b{font-size:11.5px; display:block;} .as-file small{font-size:10.3px; color:var(--text-secondary);}
.as-acts{margin-top:8px; display:flex; flex-wrap:wrap; gap:6px;}
.as-act{border:none; background:var(--primary); color:#fff; border-radius:var(--r-ctrl);
  font:600 11px Inter,sans-serif; padding:6px 10px; cursor:pointer;}
.as-sugg{display:flex; flex-wrap:wrap; gap:5px; padding:9px 12px 0;}
.as-s{border:1px solid var(--hairline); background:var(--surface); border-radius:var(--r-ctrl);
  font:500 10.8px Inter,sans-serif; color:var(--text-secondary); padding:5px 8px; cursor:pointer;}
.as-s:hover{color:var(--primary); border-color:var(--primary);}
.as-bar{display:flex; gap:6px; padding:9px 12px 11px;}
.as-bar input{flex:1; height:34px; border:1px solid var(--hairline); border-radius:var(--r-ctrl);
  background:var(--page); font:inherit; font-size:12px; padding:0 10px; outline:none; color:var(--text-primary);}
.as-bar input:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,70,254,.12);}
.as-bar button{width:34px; height:34px; border:none; border-radius:var(--r-ctrl); background:var(--primary);
  color:#fff; cursor:pointer; display:grid; place-items:center;}
.as-bar button .material-symbols-outlined{font-size:18px;}
@media(max-width:700px){ #as-ile{right:12px; bottom:12px; width:auto;} .as-panel{width:min(340px,92vw); margin-left:0;} }

.search{position:relative;}
.search input{border:none; background:none; outline:none; font:inherit; font-size:13px; color:var(--text-primary); width:100%;}
.search input::-webkit-search-cancel-button{cursor:pointer;}
.search:focus-within{border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,70,254,.12);}

/* panneau de resultats, groupé par nature de ce qu'on a trouvé */
#gsearch-pop{display:none; position:absolute; top:44px; right:0; width:400px; max-height:60vh;
  overflow-y:auto; background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r-card); box-shadow:0 18px 44px rgba(16,24,40,.18); z-index:500; padding:5px;}
#gsearch-pop.on{display:block;}
#gsearch-pop .gs-cat{font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-tertiary); padding:9px 10px 5px;}
#gsearch-pop .gs-it{display:flex; align-items:center; gap:10px; padding:7px 10px; cursor:pointer;
  border-radius:var(--r-ctrl); color:var(--text-primary);}
#gsearch-pop .gs-it:hover, #gsearch-pop .gs-it.on{background:rgba(0,70,254,.07);}
#gsearch-pop .gs-it .material-symbols-outlined{font-size:19px; color:var(--text-secondary); flex:none;}
#gsearch-pop .gs-it b{font-size:12.8px; font-weight:600; display:block; line-height:1.3;}
#gsearch-pop .gs-it small{font-size:11px; color:var(--text-secondary); display:block; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#gsearch-pop .gs-txt{min-width:0; flex:1;}
#gsearch-pop mark{background:rgba(0,70,254,.16); color:inherit; border-radius:2px; padding:0 1px;}
#gsearch-pop .gs-empty{padding:16px 12px; font-size:12.5px; color:var(--text-secondary);}
#gsearch-pop .gs-hint{padding:7px 11px 9px; font-size:10.5px; color:var(--text-tertiary);
  border-top:1px solid var(--hairline); margin-top:4px;}
/* ligne du hub mise en evidence quand on y arrive par la recherche */
tr.gs-flash{animation:gsFlash 1.9s ease;}
@keyframes gsFlash{0%,70%{background:rgba(0,70,254,.13);} 100%{background:transparent;}}
#appbar.on-dark .search{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1); color:rgba(255,255,255,.6);}
#appbar.on-dark .search input{color:#fff;}
.icon-btn{
  width:38px;height:38px;border:none;border-radius:var(--r-ctrl); background:transparent;
  color:var(--text-secondary); cursor:pointer; display:grid; place-items:center; transition:background .15s;
}
.icon-btn:hover{background:var(--page);}
#appbar.on-dark .icon-btn{color:rgba(255,255,255,.7);}
#appbar.on-dark .icon-btn:hover{background:rgba(255,255,255,.08);}
.me{
  width:36px;height:36px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(135deg,#286EFF,#0030E5); color:#fff;
  font-size:12px;font-weight:600;display:grid;place-items:center; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,48,229,.35);
}

/* ============================ VIEW SYSTEM ============================ */
.view{position:fixed; inset:60px 0 0 0; overflow:auto; opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .35s ease, visibility 0s .35s, left .38s cubic-bezier(.2,.85,.25,1);}
.view.active{opacity:1; pointer-events:auto; visibility:visible; transition:opacity .35s ease, visibility 0s 0s, left .38s cubic-bezier(.2,.85,.25,1);}
.view.no-scroll{overflow:hidden;}
.wrap{max-width:1180px; margin:0 auto; padding:var(--s6) var(--s5) 80px;}

/* ============================ HUB (VIEW 1) ============================ */
.page-head{margin-bottom:var(--s5);}
.eyebrow{font-size:12px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--primary);}
.page-head h1{font-size:30px; font-weight:700; letter-spacing:-.8px; margin-top:6px;}
.page-head p{font-size:14.5px; color:var(--text-secondary); margin-top:8px; max-width:620px; line-height:1.5;}

.type-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); margin-bottom:var(--s6);}
.type-card{
  position:relative; text-align:left; cursor:pointer; overflow:hidden;
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-card);
  padding:var(--s4) var(--s4) 22px; box-shadow:var(--shadow-sm);
  transition:transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s, border-color .28s;
}
.type-card::before{
  content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--accent);
  transform:scaleY(0); transform-origin:top; transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.type-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:transparent;}
.type-card:hover::before{transform:scaleY(1);}
.type-card .tc-icon{
  width:48px;height:48px;border-radius:var(--r-ctrl); display:grid; place-items:center;
  background:var(--accent-tint); color:var(--accent); margin-bottom:var(--s3);
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.type-card:hover .tc-icon{transform:scale(1.08) rotate(-3deg);}
.type-card .tc-icon .material-symbols-outlined{font-size:26px;}
.type-card h3{font-size:16px; font-weight:600; letter-spacing:-.2px;}
.type-card p{font-size:12.5px; color:var(--text-secondary); margin-top:5px; line-height:1.45; min-height:34px;}
.type-card .tc-go{
  display:inline-flex; align-items:center; gap:5px; margin-top:14px;
  font-size:12.5px; font-weight:600; color:var(--accent);
}
.type-card .tc-go .material-symbols-outlined{font-size:16px; transition:transform .25s;}
.type-card:hover .tc-go .material-symbols-outlined{transform:translateX(4px);}

/* progress section */
.section-head{display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s3);}
.section-head h2{font-size:18px; font-weight:600; letter-spacing:-.3px;}
.section-head .count{
  font-size:12px; font-weight:600; color:var(--primary); background:rgba(0,70,254,.08);
  padding:3px 9px; border-radius:var(--r-pill);
}
.filters{display:flex; gap:var(--s2); margin-left:auto; flex-wrap:wrap;}
.chip{
  display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px;
  font-size:12.5px; font-weight:500; color:var(--text-secondary);
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-pill);
  cursor:pointer; transition:all .18s;
}
.chip .material-symbols-outlined{font-size:16px;}
.chip:hover{border-color:#cfd6e4; color:var(--text-primary);}
.chip.active{background:var(--primary); border-color:var(--primary); color:#fff;}

.table-card{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-sm);}
table{width:100%; border-collapse:collapse; font-size:13px;}
thead th{
  text-align:left; font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase;
  color:var(--text-secondary); padding:13px 16px; background:#FAFBFD; border-bottom:1px solid var(--hairline);
}
tbody td{padding:14px 16px; border-bottom:1px solid var(--hairline); color:var(--text-primary); vertical-align:middle;}
tbody tr{cursor:pointer; transition:background .15s;}
tbody tr:hover{background:#F7F9FD;}
tbody tr:last-child td{border-bottom:none;}
.ref{font-weight:600; font-variant-numeric:tabular-nums; color:var(--text-secondary); font-size:12.5px;}
.type-pill{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--r-pill);
  font-size:11.5px; font-weight:600; background:var(--tp-tint); color:var(--tp-color);
}
.type-pill::before{content:""; width:6px;height:6px;border-radius:50%; background:var(--tp-color);}
.obj b{font-weight:600;}
.obj small{display:block; color:var(--text-secondary); font-size:11.5px; margin-top:2px;}
.badge{
  display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:var(--r-pill);
  font-size:11.5px; font-weight:600; background:var(--b-tint); color:var(--b-color);
}
.badge::before{content:""; width:7px;height:7px;border-radius:50%; background:var(--b-color);}
.badge.dot-pulse::before{animation:pulseDot 1.6s ease-in-out infinite;}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 var(--b-color);opacity:1}50%{box-shadow:0 0 0 4px transparent;opacity:.6}}
.step-cell{color:var(--text-secondary); font-size:12.5px;}
.date-cell{color:var(--text-secondary); font-variant-numeric:tabular-nums; font-size:12.5px;}

/* ============================ WIZARD (VIEW 2) ============================ */
#view-wizard .wrap{max-width:920px;}
.wiz-top{display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s4);}
.back-link{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500;
  color:var(--text-secondary); cursor:pointer; padding:7px 12px 7px 8px; border-radius:var(--r-ctrl);
  border:1px solid var(--hairline); background:var(--surface); transition:all .18s;
}
.back-link:hover{color:var(--text-primary); border-color:#cfd6e4;}
.back-link .material-symbols-outlined{font-size:18px;}
.wiz-title{display:flex; align-items:center; gap:12px;}
.wiz-title .wt-icon{width:40px;height:40px;border-radius:var(--r-ctrl); display:grid;place-items:center; background:var(--accent-tint); color:var(--accent);}
.wiz-title h1{font-size:22px; font-weight:700; letter-spacing:-.5px;}
.wiz-title small{display:block; font-size:12.5px; font-weight:500; color:var(--text-secondary); margin-top:1px;}

/* stepper */
.stepper{display:flex; align-items:flex-start; margin:var(--s3) 0 var(--s5); padding:0 4px;}
.step{display:flex; flex-direction:column; align-items:center; flex:0 0 auto; position:relative; width:120px;}
.step .s-dot{
  width:34px;height:34px;border-radius:50%; display:grid;place-items:center;
  background:var(--surface); border:2px solid var(--hairline); color:var(--text-secondary);
  font-size:13px; font-weight:600; z-index:2; transition:all .35s cubic-bezier(.2,.8,.3,1);
}
.step .s-dot .material-symbols-outlined{font-size:18px;}
.step .s-label{font-size:12px; font-weight:500; color:var(--text-secondary); margin-top:9px; text-align:center; transition:color .3s; line-height:1.3;}
.step.active .s-dot{border-color:var(--primary); background:var(--primary); color:#fff; box-shadow:0 4px 14px rgba(0,70,254,.35); transform:scale(1.06);}
.step.active .s-label{color:var(--primary); font-weight:600;}
.step.done .s-dot{border-color:var(--success); background:var(--success); color:#fff;}
.step.done .s-label{color:var(--text-primary);}
.step-line{flex:1 1 auto; height:2px; background:var(--hairline); margin-top:16px; position:relative; overflow:hidden;}
.step-line::after{content:""; position:absolute; inset:0; background:var(--success); transform:scaleX(0); transform-origin:left; transition:transform .4s ease;}
.step-line.filled::after{transform:scaleX(1);}

/* form panel */
.form-panel{
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-card);
  box-shadow:var(--shadow-md); overflow:hidden; position:relative; min-height:360px;
}
.form-stage{position:relative;}
.form-step{padding:var(--s5); display:none;}
.form-step.show{display:block; animation:stepIn .4s cubic-bezier(.2,.8,.3,1);}
.form-step.out{animation:stepOut .3s ease forwards;}
@keyframes stepIn{from{opacity:0; transform:translateX(28px);} to{opacity:1; transform:translateX(0);}}
@keyframes stepOut{to{opacity:0; transform:translateX(-24px);}}
.step-title{font-size:16px; font-weight:600; letter-spacing:-.2px; margin-bottom:4px;}
.step-sub{font-size:13px; color:var(--text-secondary); margin-bottom:var(--s4);}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3) var(--s4);}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--s3) var(--s4);}
.fld{display:flex; flex-direction:column; gap:6px;}
.fld.col-span-2{grid-column:span 2;}
.fld label{font-size:12px; font-weight:600; color:var(--text-primary); letter-spacing:.1px;}
.fld label .opt{font-weight:400; color:var(--text-secondary);}
.control{
  height:42px; padding:0 12px; font:inherit; font-size:13.5px; color:var(--text-primary);
  background:var(--page); border:1px solid var(--hairline); border-radius:var(--r-ctrl);
  outline:none; transition:border-color .18s, box-shadow .18s, background .18s; width:100%;
}
textarea.control{height:auto; padding:10px 12px; resize:vertical; min-height:74px; line-height:1.5;}
.control::placeholder{color:#9aa2b1;}
.control:focus{border-color:var(--primary); background:var(--surface); box-shadow:0 0 0 3px rgba(0,70,254,.12);}
select.control{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6270' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:34px; cursor:pointer;}
.seg{display:flex; gap:6px;}
.seg .seg-opt{
  flex:1; text-align:center; height:42px; line-height:40px; font-size:13px; font-weight:500;
  background:var(--page); border:1px solid var(--hairline); border-radius:var(--r-ctrl); cursor:pointer;
  color:var(--text-secondary); transition:all .16s; user-select:none;
}
.seg .seg-opt:hover{border-color:#cfd6e4;}
.seg .seg-opt.sel{background:rgba(0,70,254,.08); border-color:var(--primary); color:var(--primary); font-weight:600;}
.group-label{font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--text-secondary); margin:var(--s4) 0 var(--s2);}
.group-label:first-child{margin-top:0;}

/* avant/apres double column */
.ba-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4);}
.ba-col{border:1px solid var(--hairline); border-radius:var(--r-card); overflow:hidden;}
.ba-col.after{border-color:rgba(0,70,254,.35); box-shadow:0 0 0 3px rgba(0,70,254,.06);}
.ba-head{padding:12px 16px; font-size:12.5px; font-weight:700; letter-spacing:.3px; display:flex; align-items:center; gap:8px;}
.ba-col.before .ba-head{background:#F7F9FD; color:var(--text-secondary);}
.ba-col.after .ba-head{background:rgba(0,70,254,.06); color:var(--primary);}
.ba-head .material-symbols-outlined{font-size:18px;}
.ba-body{padding:16px; display:flex; flex-direction:column; gap:var(--s3);}
.ba-body .fld label{font-size:11.5px;}
.ba-body .control{height:38px; font-size:13px;}

/* recap */
.recap-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3) var(--s4);}
.recap-item{padding:12px 14px; background:var(--page); border-radius:var(--r-ctrl); border:1px solid var(--hairline);}
.recap-item .rk{font-size:11px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--text-secondary);}
.recap-item .rv{font-size:14px; font-weight:600; margin-top:3px;}
.recap-note{
  display:flex; gap:12px; align-items:flex-start; margin-top:var(--s4); padding:14px 16px;
  background:rgba(0,70,254,.05); border:1px solid rgba(0,70,254,.15); border-radius:var(--r-ctrl);
  font-size:13px; color:var(--text-primary); line-height:1.5;
}
.recap-note .material-symbols-outlined{color:var(--primary); font-size:20px; flex:0 0 auto;}
.chain-preview{display:flex; align-items:center; gap:8px; margin-top:var(--s3); flex-wrap:wrap;}
.chain-preview .cp-node{display:inline-flex; align-items:center; gap:7px; padding:7px 12px; background:var(--page); border:1px solid var(--hairline); border-radius:var(--r-pill); font-size:12px; font-weight:500;}
.chain-preview .cp-node .material-symbols-outlined{font-size:16px; color:var(--primary);}
.chain-preview .cp-arrow{color:#c4ccda;}

/* footer nav */
.form-foot{display:flex; align-items:center; gap:var(--s2); padding:var(--s4) var(--s5); border-top:1px solid var(--hairline); background:#FAFBFD;}
.step-tally{font-size:12.5px; color:var(--text-secondary); font-weight:500;}
.btn{
  display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 22px; border:none;
  border-radius:var(--r-ctrl); font:inherit; font-size:14px; font-weight:600; cursor:pointer;
  transition:transform .12s, box-shadow .2s, background .2s; user-select:none;
}
.btn:active{transform:scale(.97);}
.btn .material-symbols-outlined{font-size:19px;}
.btn-primary{background:var(--primary); color:#fff; box-shadow:0 4px 14px rgba(0,70,254,.3);}
.btn-primary:hover{box-shadow:0 6px 20px rgba(0,70,254,.42);}
.btn-ghost{background:var(--surface); color:var(--text-secondary); border:1px solid var(--hairline);}
.btn-ghost:hover{color:var(--text-primary); border-color:#cfd6e4;}
.btn-launch{background:linear-gradient(120deg,#0046FE,#0030E5); color:#fff; height:48px; padding:0 28px; font-size:15px; box-shadow:0 8px 26px rgba(0,70,254,.4); position:relative; overflow:hidden;}
.btn-launch::after{content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-20deg); animation:sheen 3.5s ease-in-out infinite;}
@keyframes sheen{0%,60%{left:-60%}100%{left:130%}}
.ml-auto{margin-left:auto;}

/* ============================ FORM CARD (ESPACE) ============================ */
#view-board{background:#FFFFFF;}
#board-space{padding:28px; display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start; align-content:flex-start;}
/* une demande creee a l'instant : on la retrouve sans chercher */
.fcard.tout-neuf{border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,70,254,.12);}
.fc-neuf{display:inline-flex; align-items:center; gap:4px; margin-left:auto; flex:none;
  font:700 9px Inter,sans-serif; letter-spacing:.05em; text-transform:uppercase;
  color:var(--primary); background:rgba(0,70,254,.12); border-radius:999px; padding:2px 7px;}
.fc-neuf .material-symbols-outlined{font-size:12px;}
.fcard{
  width:340px; background:#fff; border:1px solid #E9ECF2; border-radius:var(--r-card);
  box-shadow:0 2px 6px rgba(16,24,40,.04), 0 12px 32px rgba(16,24,40,.07);
  padding:14px; display:flex; flex-direction:column; font-family:'Inter',sans-serif;
  transition:padding .3s ease;
}
.fcard.collapsed{padding:10px; cursor:pointer;}
.fc-head{display:flex; align-items:center; gap:10px; cursor:pointer;}
.fc-headbox{display:flex; align-items:center; gap:10px; flex:1; min-width:0; border-radius:var(--r-ctrl); padding:2px; background:transparent; transition:background .3s ease, padding .3s ease;}
.fcard.collapsed .fc-headbox{background:#F3F5F8; padding:5px 12px 5px 5px;}
.fc-icon{width:42px;height:42px;flex:0 0 auto; border:1.5px solid #E3E6EC; border-radius:var(--r-ctrl); background:#fff; display:grid; place-items:center; color:#1A1D21; transition:width .3s ease, height .3s ease, border-color .3s ease, border-radius .3s ease, box-shadow .3s ease;}
.fc-icon .material-symbols-outlined{font-size:22px; transition:font-size .3s ease;}
.fcard.collapsed .fc-icon{width:30px;height:30px;border-radius:var(--r-ctrl);border-color:transparent; box-shadow:0 1px 3px rgba(16,24,40,.12);}
.fcard.collapsed .fc-icon .material-symbols-outlined{font-size:17px;}
.fc-title{flex:1; min-width:0; font-size:17px; font-weight:700; letter-spacing:-.3px; color:#1A1D21; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:font-size .3s ease;}
.fc-title small{display:block; font-size:11px; font-weight:600; color:#8A93A3; letter-spacing:.2px; margin-top:1px; transition:font-size .3s ease;}
.fcard.collapsed .fc-title{font-size:13.5px;}
.fcard.collapsed .fc-title small{font-size:9.5px;}
.fc-mini{display:flex; align-items:center; gap:7px; max-width:0; opacity:0; overflow:hidden; transition:max-width .35s ease, opacity .3s ease .06s;}
.fcard.collapsed .fc-mini{max-width:150px; opacity:1;}
.fc-mini .fc-bar{width:66px;}
.fc-menu{width:26px;height:26px;flex:0 0 26px; border:1px solid #E7EAF0; border-radius:var(--r-ctrl); background:#fff; color:#1A1D21; cursor:pointer; display:grid; place-items:center; overflow:hidden; transition:background .15s, opacity .25s, width .3s, flex-basis .3s, border-width .3s;}
.fc-menu:hover{background:#F6F8FB;}
.fc-menu .material-symbols-outlined{font-size:19px; font-variation-settings:'opsz' 20,'wght' 700,'FILL' 0,'GRAD' 0;}
.fcard.collapsed .fc-menu{width:0; height:0; flex-basis:0; opacity:0; border-width:0; overflow:hidden; pointer-events:none;}
.fc-progress{
  margin-top:12px; display:inline-flex; align-self:flex-start; align-items:center; gap:8px;
  border:1px solid #E7EAF0; border-radius:999px; padding:6px 12px 6px 9px;
  position:relative; max-height:38px; opacity:1;
  transition:max-height .3s ease, opacity .25s ease, margin .3s ease, padding .3s ease, border-width .3s;
}
.fc-progress::after{content:""; position:absolute; left:16px; top:100%; width:1.5px; height:13px; background:#E7EAF0;}
.fcard.collapsed .fc-progress{max-height:0; opacity:0; margin-top:0; padding-top:0; padding-bottom:0; border-width:0; overflow:hidden;}
.fc-progress .fc-check{width:18px;height:18px;flex:0 0 18px;border-radius:50%; display:grid; place-items:center; font-size:18px; color:#9AA2B1; transition:background .2s, color .2s;}
.fc-progress .fc-check.full{background:#4CAF50; color:#fff; font-size:12px; font-variation-settings:'opsz' 20,'wght' 700,'FILL' 0,'GRAD' 0;}
.fc-count{font-size:12.5px; font-weight:600; color:#1A1D21; white-space:nowrap;}
.fc-bar{width:92px; flex:0 0 auto; height:8px; border-radius:999px; background:#EEF1F5; overflow:hidden;}
.fc-fill{height:100%; border-radius:999px; background:#4CAF50; transition:width .35s ease;}
.fc-pct{font-size:12px; font-weight:500; color:#8A93A3; white-space:nowrap;}
.fc-steps{margin-top:11px; max-height:224px; overflow-y:auto; transition:max-height .35s ease, opacity .25s ease, margin .3s ease;}
.fcard.collapsed .fc-steps{max-height:0; opacity:0; margin-top:0; overflow:hidden;}
.fc-tree{position:relative; padding-left:26px;}
.fc-tree::before{content:""; position:absolute; left:17px; top:0; bottom:8px; width:1.5px; background:#E7EAF0;}
.fc-steps::-webkit-scrollbar{width:6px;}
.fc-steps::-webkit-scrollbar-thumb{background:#E3E6EC; border-radius:3px;}
.fc-step{display:flex; align-items:center; gap:10px; padding:6px 6px; position:relative;}
.fc-step::before{content:""; position:absolute; left:-8.5px; top:50%; transform:translateY(-50%); width:13px; height:1.5px; background:#E7EAF0;}
.fc-step .st-ic{width:20px;height:20px;flex:0 0 20px;border-radius:50%; display:grid; place-items:center; font-size:20px; color:#C6CBD6; transition:background .2s, color .2s;}
.fc-step.done .st-ic{background:#4CAF50; color:#fff; font-size:13px; font-variation-settings:'opsz' 20,'wght' 700,'FILL' 0,'GRAD' 0;}
.fc-step.issue .st-ic{background:#F44336; color:#fff; font-size:13px; font-variation-settings:'opsz' 20,'wght' 700,'FILL' 0,'GRAD' 0;}
.fc-step.issue .st-title{color:#D6455D;}
.fc-step.contact .st-ic{background:#F59E0B; color:#fff; font-size:13px;}
.fc-step.contact .st-title{color:#C4710B;}
.fc-step .st-title{font-size:13.5px; font-weight:500; color:#3A4150; cursor:pointer; transition:color .15s;}
.fc-step .st-title:hover{color:var(--primary);}
.fc-step-panel{display:none; padding:2px 6px 10px 36px; flex-flow:row wrap; gap:6px; align-items:flex-start;}
.fc-step-panel.open{display:flex;}
.fpill{display:inline-flex; align-items:center; gap:5px; background:#fff; border:1.4px solid #C6CBD6; padding:3px 10px; border-radius:8px; font:inherit; font-size:11px; font-weight:600; color:#1A1D21; cursor:pointer; transition:border-color .15s, background .15s, transform .1s;}
.fpill:hover{background:#F6F8FB;}
.fpill:active{transform:scale(.96);}
.fpill .fp-ic{font-size:13px;}
.fpill .fp-t{max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.fpill.empty{border-color:#F9A825;} .fpill.empty .fp-ic{color:#F9A825;}
.fpill.filled{border-color:#4CAF50;} .fpill.filled .fp-ic{color:#4CAF50;}
.fpill.issue{border-color:#F44336;} .fpill.issue .fp-ic{color:#F44336;}
.fpill.contact{border-color:#F59E0B; background:#FFF8EC;} .fpill.contact .fp-ic{color:#C4710B;}
#ctxmenu{position:fixed; z-index:300; display:none; flex-direction:column; min-width:222px; padding:6px; background:#fff; border:1px solid var(--hairline); border-radius:11px; box-shadow:0 14px 38px rgba(16,24,40,.20); font-family:'Inter',sans-serif;}
#ctxmenu.show{display:flex;}
#ctxmenu button{display:flex; align-items:center; gap:10px; padding:9px 10px; border:none; background:transparent; border-radius:7px; font:inherit; font-size:12.5px; font-weight:500; color:#1A1D21; cursor:pointer; text-align:left; transition:background .12s;}
#ctxmenu button:hover{background:#F6F8FB;}
#ctxmenu button .material-symbols-outlined{font-size:18px;}
#ctxmenu button[data-act=problem] .material-symbols-outlined{color:#F44336;}
#ctxmenu button[data-act=contact] .material-symbols-outlined{color:#F59E0B;}
#ctxmenu button[data-act=reset] .material-symbols-outlined{color:#8A93A3;}
.fp-fld label{display:block; font-size:10px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:#8A93A3; margin-bottom:3px;}
.fp-in{width:100%; height:30px; font:inherit; font-size:12.5px; color:#1A1D21; border:1px solid #E3E6EC; border-radius:8px; padding:0 9px; outline:none; background:#fff; transition:border-color .15s, box-shadow .15s;}
.fp-in:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,70,254,.1);}
.fp-in.empty{background:#FAFBFD;}
.fc-foot{margin-top:10px; display:flex; flex-direction:column; gap:9px; max-height:640px; opacity:1; transition:max-height .35s ease, opacity .25s ease, margin .3s ease;}
.fc-send{display:none; align-items:center; justify-content:center; gap:7px; width:100%; height:36px; border:none; border-radius:var(--r-ctrl); background:#0046FE; color:#fff; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; transition:background .15s, transform .1s;}
.fc-send:hover{background:#0038d6;} .fc-send:active{transform:scale(.98);}
.fc-send .material-symbols-outlined{font-size:17px;}
.fcard.can-send .fc-send{display:flex; animation:sendIn .3s cubic-bezier(.2,.9,.3,1.15);}
@keyframes sendIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}
.fcard.collapsed .fc-foot{max-height:0; opacity:0; margin-top:0; overflow:hidden;}
.pill-select{display:inline-flex; align-self:flex-start; align-items:center; gap:7px; padding:5px 13px; border-radius:999px; border:none; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; transition:filter .15s, background .25s, color .25s;}
.pill-select:hover{filter:brightness(.97);}
.pill-select .dash{font-weight:700; opacity:.55;}
.pill-select .plwrap{display:inline-block; overflow:hidden;}
.pill-select .pl{display:inline-block; will-change:transform;}
.pill-select.p-red{background:#FCE7E9; color:#D6455D;}
.pill-select.p-yellow{background:#FBF3D9; color:#B7860B;}
.pill-select.p-green{background:#E8F5E9; color:#2F9E44;}
.pill-select.p-blue{background:#E6F0FF; color:#0046FE;}
.pill-select.p-orange{background:#FFF1E2; color:#C4710B;}
.pill-select.p-gray{background:#EEF1F5; color:#5B6270;}
.fc-people{display:flex; flex-flow:row wrap; gap:6px;}
.pp{display:inline-flex; flex:0 0 auto; align-items:center; gap:7px; padding:3px 12px 3px 4px; border:1px solid #E7EAF0; border-radius:999px; background:#fff;}
.pp .pav{width:24px;height:24px;border-radius:50%; display:grid; place-items:center; font-size:9.5px; font-weight:700; color:#fff;}
.pp .pnm{font-size:12.5px; font-weight:600; color:#3A4150;}
.fc-cfoot{display:flex; align-items:center; gap:7px; max-height:0; opacity:0; overflow:hidden; margin-top:0; transition:max-height .35s ease, opacity .3s ease .08s, margin .3s ease;}
.fcard.collapsed .fc-cfoot{max-height:34px; opacity:1; margin-top:8px;}
.fc-cfoot .material-symbols-outlined{font-size:16px; color:#8A93A3;}
.fc-cfoot .cf-label{font-size:12.5px; font-weight:600; color:#8A93A3;}
.cf-avs{display:flex; margin-left:auto; padding-left:8px;}
.cf-avs .pav{width:26px;height:26px;border-radius:50%; display:grid; place-items:center; font-size:9px; font-weight:700; color:#fff; border:2px solid #fff; margin-left:-8px;}
.cf-avs .pav:first-child{margin-left:0;}

/* ============================ FORM OVERLAY (ÉDITION GAUCHE) ============================ */
#fov{position:fixed; top:60px; bottom:0; left:0; width:400px; background:#fff; border-right:1px solid var(--hairline);
  box-shadow:12px 0 34px rgba(16,24,40,.07); transform:translateX(-105%); transition:transform .38s cubic-bezier(.2,.85,.25,1);
  z-index:185; display:flex; flex-direction:column; font-family:'Inter',sans-serif;}
#fov.open{transform:translateX(0);}
body.fov-open #view-timeline, body.fov-open #view-board, body.fov-open #view-hub, body.fov-open #view-wizard, body.fov-open #view-canvas{left:400px;}
.fov-head{display:flex; align-items:center; gap:10px; padding:14px 14px 10px;}
.fov-ic{width:38px;height:38px;flex:0 0 38px; border:1.5px solid #E3E6EC; border-radius:10px; display:grid; place-items:center; color:#1A1D21; background:#fff;}
.fov-ic .material-symbols-outlined{font-size:20px;}
.fov-title{flex:1; min-width:0; font-size:15px; font-weight:700; letter-spacing:-.3px; color:#1A1D21; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fov-title small{display:block; font-size:10.5px; font-weight:600; color:#8A93A3; margin-top:1px;}
.fov-pillrow{display:flex; align-items:center; gap:8px; border:1px solid #E7EAF0; border-radius:999px; padding:6px 12px 6px 9px; margin:0 14px 6px; align-self:flex-start;}
.fov-check{font-size:18px; color:#9AA2B1;}
.fov-count{font-size:12px; font-weight:600; color:#1A1D21; white-space:nowrap;}
.fov-bar{width:84px; height:8px; border-radius:999px; background:#EEF1F5; overflow:hidden;}
.fov-fill{height:100%; background:#4CAF50; border-radius:999px; transition:width .3s;}
.fov-pct{font-size:11.5px; color:#8A93A3; font-weight:500;}
.fov-body{flex:1; overflow-y:auto; padding:4px 14px 16px;}
.fov-sec{padding:12px 0 4px;}
.fov-sec-head{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:#1A1D21; margin-bottom:10px;}
.fov-sec-head .material-symbols-outlined{font-size:17px; color:var(--primary); background:#E6F0FF; border-radius:7px; padding:4px;}
.fov-flds{position:relative; margin-left:12px; padding-left:16px; display:flex; flex-direction:column; gap:9px;}
.fov-flds::before{content:""; position:absolute; left:0; top:2px; bottom:6px; width:1.5px; background:#E7EAF0;}
.fov-fld{position:relative;}
.fov-fld::before{content:""; position:absolute; left:-16px; top:14px; width:12px; height:1.5px; background:#E7EAF0;}
.fov-row{display:flex; align-items:center; gap:10px;}
.fov-lab{font-size:11px; font-weight:600; color:#5B6270; flex:1; min-width:0;}
.fov-val{display:inline-flex; align-items:center; gap:8px; max-width:230px; border:1px solid #E7EAF0; background:#fff; font:inherit; font-size:12px; font-weight:600; color:#1A1D21; padding:4px 12px 4px 4px; border-radius:9px; cursor:pointer; transition:border-color .15s, box-shadow .15s;}
.fov-val:hover{border-color:#cfd6e4;}
.fov-val .fv-sq{width:24px;height:24px;flex:0 0 24px;border-radius:7px; display:grid; place-items:center; color:#fff;}
.fov-val .fv-sq .material-symbols-outlined{font-size:15px;}
.fov-val.empty .fv-sq{background:#F9A825;}
.fov-val.filled .fv-sq{background:#4CAF50;}
.fov-val.issue .fv-sq{background:#F44336;}
.fov-val.contact .fv-sq{background:#F59E0B;}
.fov-val.contact{border-color:#F59E0B;}
.fov-val .fv-txt{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fov-opts{position:relative; margin:0 0 0 14px; padding-left:16px; max-height:0; opacity:0; overflow:hidden; display:flex; flex-direction:column; gap:5px; transition:max-height .32s cubic-bezier(.2,.85,.25,1), opacity .25s, margin .3s;}
.fov-fld.open .fov-opts{max-height:440px; opacity:1; margin:8px 0 4px 14px;}
.fov-opts::before{content:""; position:absolute; left:0; top:2px; bottom:9px; width:1.5px; background:#E7EAF0;}
.fov-opt{position:relative; display:inline-flex; align-items:center; gap:8px; align-self:flex-start; border:1px solid var(--hairline); background:#fff; border-radius:8px; font:inherit; font-size:12px; font-weight:600; color:#3A4150; padding:5px 11px; cursor:pointer; transition:all .15s;}
.fov-opt::before{content:""; position:absolute; left:-16px; top:50%; width:12px; height:1.5px; background:#E7EAF0;}
.fov-opt:hover{border-color:var(--primary); color:var(--primary); background:#F5F8FF;}
.fov-opt.cur{border-color:var(--primary); color:var(--primary); background:#E6F0FF;}
.fov-opt .material-symbols-outlined{font-size:15px;}
.fov-opt.lvl2{margin-left:24px;}
.fov-opt .oav{width:20px;height:20px;flex:0 0 20px;border-radius:50%; display:grid; place-items:center; font-size:8px; font-weight:700; color:#fff;}
.fov-date,.fov-txt{height:32px; border:1px solid #E3E6EC; border-radius:8px; font:inherit; font-size:12px; padding:0 9px; outline:none; width:210px; transition:border-color .15s, box-shadow .15s;}
.fov-date:focus,.fov-txt:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,70,254,.1);}
.fov-opt.sugg{border-color:rgba(0,70,254,.35); background:#F0F5FF; color:var(--primary);}
.fov-opt.sugg:hover{background:#E6F0FF;}
.fov-opt.sugg .material-symbols-outlined{color:var(--primary);}
.fov-price{position:relative; display:inline-flex; align-items:center;}
.fov-price .fov-txt{width:150px; padding-right:26px;}
.fov-price .pu{position:absolute; right:10px; font-size:12px; font-weight:600; color:#8A93A3;}
.fov-val.invalid{border-color:#F44336; box-shadow:0 0 0 3px rgba(244,67,54,.14);}
/* les gestes venus du formulaire : une pièce se dépose ou se glisse */
.fov-note{font-size:11px; color:#8A93A3; padding:4px 2px;}
.fov-opt.fov-pj{border-style:dashed; color:#5B6270;}
.fov-opt.fov-pj.on{border-style:solid; border-color:#4CAF50; color:#1A1D21;}
.fov-opt.fov-pj.survol{border-color:var(--primary); background:#F0F5FF; color:var(--primary);}
.fov-val.k-piece{border-style:dashed;}
.fov-val.k-piece.filled{border-style:solid; border-color:#4CAF50;}
.fov-foot{padding:12px 14px; border-top:1px solid var(--hairline);}
#fov-invalid{display:none; align-items:center; gap:7px; margin-bottom:10px; padding:8px 11px; border:1px solid rgba(244,67,54,.3); background:#FCEBEB; border-radius:8px; font-size:12px; font-weight:600; color:#C4362B;}
#fov-invalid .material-symbols-outlined{font-size:17px;}
#fov-save:disabled{background:#C6CBD6; cursor:not-allowed; box-shadow:none;}

/* ============================ PROFIL FLOW ============================ */
#view-profile{background:#F7F9FC;}

/* ---- pilotage : l'activité du service, pas la fiche d'une personne ---- */
#view-stats{background:#F7F9FC;}
:root[data-theme="dark"] #view-stats{background:var(--page);}
.pil-wrap{max-width:1380px; margin:0 auto; padding:24px 28px 70px; font-family:'Inter',sans-serif;}
.pil-h{display:flex; align-items:flex-end; gap:14px; margin-bottom:20px; flex-wrap:wrap;}
.pil-h h1{font-size:23px; letter-spacing:-.02em;}
.pil-h p{font-size:12.5px; color:var(--text-secondary); margin-top:3px; max-width:62ch; line-height:1.5;}
.pil-per{margin-left:auto; display:inline-flex; border:1px solid var(--hairline);
  border-radius:var(--r-ctrl); overflow:hidden; background:var(--surface);}
.pil-per button{border:none; background:none; font:600 11.5px Inter,sans-serif;
  color:var(--text-secondary); padding:7px 13px; cursor:pointer;}
.pil-per button.on{background:var(--primary); color:#fff;}

.pil-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:18px;}
@media(max-width:1000px){ .pil-kpis{grid-template-columns:1fr 1fr;} }
.pil-kpi{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-card);
  box-shadow:var(--shadow-sm); padding:14px 16px 15px;}
.pil-kpi .v{font-size:29px; font-weight:600; letter-spacing:-.03em; line-height:1;}
.pil-kpi .l{font-size:11.5px; color:var(--text-secondary); margin-top:6px; line-height:1.4;}
.pil-kpi .d{font-size:10.5px; margin-top:6px; font-weight:600;}
.pil-kpi .d.up{color:var(--success);} .pil-kpi .d.down{color:#D8503A;}
.pil-kpi .d.flat{color:var(--text-tertiary);}

.pil-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:14px; margin-bottom:14px;}
@media(max-width:1000px){ .pil-grid{grid-template-columns:1fr;} }
.pil-c{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-card);
  box-shadow:var(--shadow-sm); padding:16px 18px 18px;}
.pil-c h2{font-size:13.5px; font-weight:700; letter-spacing:-.01em;}
.pil-c .sub{font-size:11.3px; color:var(--text-secondary); margin-top:3px; line-height:1.45;}
.pil-leg{display:flex; gap:13px; flex-wrap:wrap; margin-top:11px; font-size:10.8px;
  color:var(--text-secondary);}
.pil-leg span{display:inline-flex; align-items:center; gap:6px;}
.pil-leg i{width:9px; height:9px; border-radius:2px;}

/* les barres : dessinées à la main, pas de bibliothèque pour six colonnes */
.pil-bars{display:flex; align-items:flex-end; gap:10px; height:190px; margin-top:16px;}
.pil-bar{flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:3px;
  height:100%; position:relative;}
.pil-bar .seg{border-radius:3px; min-height:2px; transition:opacity .15s;}
.pil-bar:hover .seg{opacity:.82;}
.pil-bar .tot{position:absolute; top:-17px; left:0; right:0; text-align:center;
  font-size:10.5px; font-weight:600; color:var(--text-secondary);}
.pil-xs{display:flex; gap:10px; margin-top:8px;}
.pil-xs span{flex:1; text-align:center; font-size:10px; color:var(--text-tertiary);}

.pil-rangs{display:flex; flex-direction:column; gap:9px; margin-top:14px;}
.pil-rang{display:flex; align-items:center; gap:11px;}
.pil-rang .nm{flex:0 0 148px; font-size:11.8px; font-weight:600; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;}
.pil-rang .pi{flex:1; height:9px; border-radius:5px; background:var(--surface-2); overflow:hidden;}
.pil-rang .pi i{display:block; height:100%; border-radius:5px;}
.pil-rang .n{flex:0 0 44px; text-align:right; font-size:11.5px; font-weight:600;
  font-variant-numeric:tabular-nums;}
.pil-rang small{flex:0 0 auto; font-size:10.3px; color:var(--text-tertiary);}

.pil-tbl{width:100%; border-collapse:collapse; margin-top:12px;}
.pil-tbl th{text-align:left; font-size:9.6px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-tertiary); padding:0 10px 7px 0;
  border-bottom:1px solid var(--hairline); white-space:nowrap;}
.pil-tbl td{font-size:12px; padding:9px 10px 9px 0; border-bottom:1px solid var(--hairline);
  vertical-align:middle;}
.pil-tbl td:first-child{font-weight:600;}
.pil-tbl .num{font-variant-numeric:tabular-nums; text-align:right; padding-right:14px;}
.pil-pt{display:inline-flex; align-items:center; gap:6px;}
.pil-pt i{width:9px; height:9px; border-radius:2px; flex:none;}
.pil-vide{font-size:12.5px; color:var(--text-secondary); padding:26px 0;}
.pf-wrap{max-width:1380px; margin:0 auto; padding:22px 28px 70px; font-family:'Inter',sans-serif;}
.pf-head{display:flex; align-items:center; gap:14px; margin-bottom:18px;}
.pf-head h1{font-size:22px; font-weight:700; letter-spacing:-.5px;}
.pf-head .pf-sub{font-size:12.5px; color:#8A93A3; font-weight:500;}
.pf-grid{display:grid; grid-template-columns:300px minmax(0,1fr) 330px; gap:16px; align-items:start;}
.pf-card{background:#fff; border:1px solid #E9ECF2; border-radius:14px; padding:18px;}
.pf-card h3{font-size:13px; font-weight:700; letter-spacing:-.2px; margin-bottom:14px; display:flex; align-items:center; gap:8px;}
.pf-card h3 .material-symbols-outlined{font-size:17px; color:var(--primary);}
.pf-col{display:flex; flex-direction:column; gap:16px; min-width:0;}
/* identité */
.pf-ava{width:92px; height:92px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:28px; font-weight:700; margin:6px auto 12px;}
.pf-name{text-align:center; font-size:19px; font-weight:700; letter-spacing:-.4px;}
.pf-role{text-align:center; font-size:12.5px; color:#5B6270; font-weight:500; margin-top:3px;}
.pf-badges{display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin:12px 0 14px;}
.pf-badge{padding:4px 11px; border-radius:999px; font-size:11px; font-weight:600; background:#EEF3FF; color:#0046FE;}
.pf-badge.grey{background:#F1F3F7; color:#5B6270;}
.pf-badge.green{background:#E7F4E8; color:#2F9E44;}
.pf-meta{border-top:1px solid #EEF1F5; padding-top:12px; display:flex; flex-direction:column; gap:9px;}
.pf-meta .m{display:flex; align-items:center; gap:9px; font-size:12px;}
.pf-meta .m .material-symbols-outlined{font-size:16px; color:#8A93A3;}
.pf-meta .m .ml{color:#8A93A3; flex:1;}
.pf-meta .m .mv{font-weight:600; color:#1A1D21; text-align:right;}
/* sources */
.pf-src{display:flex; flex-direction:column; gap:10px;}
.pf-src .s{display:flex; align-items:center; gap:9px; font-size:12px;}
.pf-src .s .sd{width:8px; height:8px; border-radius:50%;}
.pf-src .s b{font-weight:600;}
.pf-src .s small{margin-left:auto; color:#8A93A3; font-size:11px;}
/* kpis */
.pf-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.pf-kpi{background:#fff; border:1px solid #E9ECF2; border-radius:14px; padding:14px 16px;}
.pf-kpi .kl{font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:#8A93A3; display:flex; align-items:center; gap:6px;}
.pf-kpi .kl .material-symbols-outlined{font-size:15px; color:var(--primary);}
.pf-kpi .kv{font-size:24px; font-weight:700; letter-spacing:-.6px; margin-top:6px;}
.pf-kpi .ks{font-size:11px; color:#8A93A3; margin-top:2px;}
/* source chips */
.src-chip{display:inline-flex; align-items:center; padding:2px 9px; border-radius:999px; font-size:10px; font-weight:700; letter-spacing:.2px;}
.src-FLOW{background:#E6F0FF; color:#0046FE;}
.src-ATS{background:#FBE7F2; color:#C2337E;}
.src-PeopleNet{background:#FCEAE4; color:#D14B24;}
.src-Learn{background:#E7F4E8; color:#2F9E44;}
.src-Grille{background:#EEEBFB; color:#5A3FD6;}
/* rang salarial */
.pf-band{position:relative; height:14px; border-radius:999px; background:linear-gradient(90deg,#E6F0FF,#B9D7FF); margin:22px 4px 8px;}
.pf-band .seg{position:absolute; top:-5px; bottom:-5px; width:1.5px; background:#fff;}
.pf-band .mk{position:absolute; top:50%; transform:translate(-50%,-50%); width:22px; height:22px; border-radius:50%; background:#0046FE; border:4px solid #fff; box-shadow:0 3px 10px rgba(0,70,254,.4);}
.pf-band-lbl{display:flex; justify-content:space-between; font-size:10.5px; color:#8A93A3; font-weight:600; padding:0 2px;}
.pf-band-niv{display:flex; justify-content:space-between; font-size:10px; color:#B6BCC9; font-weight:600; padding:0 2px; margin-top:2px;}
.pf-fact{display:flex; flex-direction:column; gap:8px; margin-top:16px; border-top:1px solid #EEF1F5; padding-top:12px;}
.pf-fact .f{display:flex; align-items:center; gap:9px; font-size:12px;}
.pf-fact .f .material-symbols-outlined{font-size:16px; color:#8A93A3;}
.pf-fact .f .fv{margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums;}
.pf-fact .f .fv.up{color:#2F9E44;}
/* compétences */
.pf-skill{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid #F4F6FA;}
.pf-skill:last-child{border-bottom:none;}
.pf-skill .sn{font-size:12.5px; font-weight:600; flex:1; min-width:0;}
.pf-skill .sc{font-size:10px; font-weight:600; color:#8A93A3; background:#F1F3F7; border-radius:999px; padding:2px 8px;}
.pf-dots{display:flex; gap:4px;}
.pf-dots i{width:9px; height:9px; border-radius:50%; background:#E7EAF0;}
.pf-dots i.on{background:#0046FE;}
.pf-skill .sv{width:76px; text-align:right; font-size:12px; font-weight:700; color:#2F9E44; font-variant-numeric:tabular-nums;}
/* historique */
.pf-hist{position:relative; padding-left:20px; display:flex; flex-direction:column; gap:14px;}
.pf-hist::before{content:""; position:absolute; left:5px; top:6px; bottom:8px; width:1.5px; background:#E7EAF0;}
.pf-ev{position:relative;}
.pf-ev::before{content:""; position:absolute; left:-19px; top:4px; width:9px; height:9px; border-radius:50%; background:#fff; border:2.5px solid var(--ev,#0046FE);}
.pf-ev .ed{font-size:10.5px; color:#8A93A3; font-weight:600;}
.pf-ev .et{font-size:12.5px; font-weight:600; margin:2px 0 3px; line-height:1.35;}
/* rému (carte sombre) */
.pf-remu{background:#16181D; color:#fff; border:none;}
.pf-remu h3{color:#fff;}
.pf-remu h3 .material-symbols-outlined{color:#5096FF;}
.pf-remu .r{display:flex; align-items:center; font-size:12.5px; padding:7px 0; color:rgba(255,255,255,.8);}
.pf-remu .r .rv{margin-left:auto; font-weight:700; color:#fff; font-variant-numeric:tabular-nums;}
.pf-remu .total{border-top:1px solid rgba(255,255,255,.14); margin-top:8px; padding-top:12px; display:flex; align-items:baseline;}
.pf-remu .total .tl{font-size:12px; color:rgba(255,255,255,.7);}
.pf-remu .total .tv{margin-left:auto; font-size:26px; font-weight:700; letter-spacing:-.6px;}
.pf-remu .note{font-size:10.5px; color:rgba(255,255,255,.45); margin-top:8px;}
/* bannière espace */
.pf-banner{flex-basis:100%; display:flex; align-items:center; gap:14px; background:#fff; border:1px solid #E9ECF2; border-radius:14px; padding:12px 18px; cursor:pointer; transition:box-shadow .2s, border-color .2s, transform .15s;}
.pf-banner:hover{border-color:rgba(0,70,254,.35); box-shadow:0 8px 24px rgba(16,24,40,.08); transform:translateY(-1px);}
.pf-banner .ba{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:14px; font-weight:700; flex:0 0 44px;}
.pf-banner .bn{font-size:14px; font-weight:700; letter-spacing:-.2px;}
.pf-banner .br{font-size:11.5px; color:#8A93A3; font-weight:500; margin-top:1px;}
.pf-banner .bsep{width:1px; height:30px; background:#EEF1F5; margin:0 6px;}
.pf-banner .bs{font-size:11px; color:#8A93A3;}
.pf-banner .bs b{display:block; font-size:14px; color:#1A1D21; font-weight:700; margin-bottom:1px;}
.pf-banner .bgo{margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--primary);}
.pf-banner .bgo .material-symbols-outlined{font-size:18px; transition:transform .2s;}
.pf-banner:hover .bgo .material-symbols-outlined{transform:translateX(4px);}

/* ============================ PROFIL FLOW v2 — BENTO ============================ */
.pf-topbar{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
.pf-topbar h1{font-size:22px; font-weight:700; letter-spacing:-.5px;}
.pf-lens{margin-left:auto; display:flex; gap:2px; padding:4px; background:#fff; border:1px solid var(--hairline); border-radius:999px; box-shadow:var(--shadow-sm);}
.pf-lens button{display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border:none; border-radius:999px; background:transparent; font:inherit; font-size:12px; font-weight:600; color:var(--text-secondary); cursor:pointer; transition:all .18s;}
.pf-lens button .material-symbols-outlined{font-size:15px;}
.pf-lens button.active{background:#16181D; color:#fff;}
.pf-lens-tag{font-size:11px; color:#8A93A3; font-weight:600; margin-right:2px;}
/* bandeau de navigation entre profils */
.pf-nav{display:flex; align-items:center; gap:8px; margin-bottom:16px;}
.pf-nav .arr{width:32px; height:32px; flex:0 0 32px; border:1px solid var(--hairline); border-radius:50%; background:#fff; color:#5B6270; cursor:pointer; display:grid; place-items:center; transition:all .15s;}
.pf-nav .arr:hover{border-color:var(--primary); color:var(--primary);}
.pf-nav .arr .material-symbols-outlined{font-size:18px;}
.pf-chips{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:2px;}
.pf-chips::-webkit-scrollbar{display:none;}
.pf-chip{display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 13px 0 5px; border:1px solid var(--hairline); border-radius:999px; background:#fff; font:inherit; font-size:12px; font-weight:600; color:#3A4150; cursor:pointer; white-space:nowrap; transition:all .15s;}
.pf-chip .ca{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:9.5px; font-weight:700;}
.pf-chip:hover{border-color:#cfd6e4;}
.pf-chip.active{border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,70,254,.10);}
.pf-chip.pending{border-style:dashed; border-color:#F59E0B;}
.pf-chip.pending .ca{background:#FFF4E0 !important; color:#C4710B; border:1.5px dashed #F59E0B;}
.pf-chip.pending small{color:#C4710B; font-weight:700; font-size:10px;}
/* bandeau profil en attente */
.pf-pending-bar{display:flex; align-items:center; gap:10px; padding:11px 16px; margin-bottom:14px; background:#FFF8EC; border:1px dashed #F59E0B; border-radius:12px; font-size:12.5px; font-weight:500; color:#8a6a2b;}
.pf-pending-bar .material-symbols-outlined{font-size:18px; color:#C4710B;}
.pf-pending-bar b{color:#C4710B;}
.pf-pending-bar .act{margin-left:auto; display:flex; gap:8px;}
.pf-pending-bar button{height:30px; padding:0 13px; border:1px solid #F59E0B; border-radius:999px; background:#fff; font:inherit; font-size:11.5px; font-weight:600; color:#C4710B; cursor:pointer; transition:background .15s;}
.pf-pending-bar button:hover{background:#FFF1DC;}
/* grille bento */
.bento{display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:92px; gap:14px; grid-auto-flow:dense;}
.bt{background:#fff; border:1px solid #E9ECF2; border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; position:relative;}
.bt.dark{background:#16181D; border-color:#16181D; color:#fff;}
.bt-h{display:flex; align-items:center; gap:8px; margin-bottom:8px; flex:0 0 auto;}
.bt-h .t{font-size:12px; font-weight:700; letter-spacing:-.1px; display:flex; align-items:center; gap:7px;}
.bt-h .t .material-symbols-outlined{font-size:16px; color:var(--primary);}
.bt.dark .bt-h .t{color:#fff;}
.bt.dark .bt-h .t .material-symbols-outlined{color:#5096FF;}
.bt-h .sp{margin-left:auto; display:flex; gap:5px;}
.bt-b{flex:1; min-height:0; display:flex; flex-direction:column;}
.bt-b.scroll{overflow-y:auto; scrollbar-width:thin;}
.bt-big{font-size:26px; font-weight:700; letter-spacing:-.7px; line-height:1;}
.bt-sub{font-size:11px; color:#8A93A3; margin-top:3px;}
.bt-delta{display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:999px; font-size:10.5px; font-weight:700;}
.bt-delta.up{background:#E7F4E8; color:#2F9E44;}
.bt-delta.down{background:#FCE9E9; color:#C4362B;}
/* empreinte */
.emp-wrap{display:flex; flex-direction:column; align-items:center; gap:4px;}
.emp-name{font-size:17px; font-weight:700; letter-spacing:-.4px; text-align:center;}
.emp-role{font-size:12px; color:#5B6270; font-weight:500; text-align:center;}
/* squelettes (profils en attente) */
@keyframes skSh{0%{background-position:-200px 0;}100%{background-position:200px 0;}}
.sk{border-radius:6px; background:linear-gradient(90deg,#EEF1F5 25%,#F7F9FC 50%,#EEF1F5 75%); background-size:400px 100%; animation:skSh 1.6s infinite linear;}
.sk-note{font-size:11px; color:#A8AFBE; font-weight:500; margin-top:8px; display:flex; align-items:center; gap:6px;}
.sk-note .material-symbols-outlined{font-size:14px;}
@keyframes atsPulse{0%,100%{opacity:1;}50%{opacity:.45;}}
.ats-wait{animation:atsPulse 2s ease-in-out infinite;}
/* barres de compétences */
.skb{display:flex; align-items:center; gap:9px; padding:5px 0;}
.skb .n{font-size:12px; font-weight:600; width:132px; flex:0 0 132px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.skb .bar{flex:1; height:8px; border-radius:999px; background:#EEF1F5; overflow:hidden;}
.skb .bar i{display:block; height:100%; border-radius:999px; background:var(--primary);}
.skb .lv{font-size:10.5px; color:#8A93A3; font-weight:700; width:26px; text-align:right;}
.skb .val{font-size:11px; font-weight:700; color:#2F9E44; width:66px; text-align:right; font-variant-numeric:tabular-nums;}
.skb .tag{font-size:9px; font-weight:700; color:#8A93A3; background:#F1F3F7; border-radius:999px; padding:2px 7px;}
.skb .aval{font-size:9.5px; font-weight:700; color:#C4710B; background:#FFF4E0; border-radius:999px; padding:2px 8px;}
/* anneaux de complétude */
.rings{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; flex:1; align-items:center;}
.ring{display:flex; flex-direction:column; align-items:center; gap:5px;}
.ring .rl{font-size:10px; font-weight:700; color:#5B6270;}
.ring .rs{font-size:9.5px; color:#8A93A3;}
/* heatmap */
.heat{display:grid; grid-auto-flow:column; grid-template-rows:repeat(3,1fr); gap:4px; flex:1; align-content:center;}
.heat i{border-radius:4px; min-height:14px;}
.heat-lbl{display:flex; justify-content:space-between; font-size:9.5px; color:#A8AFBE; font-weight:600; margin-top:6px;}
/* lignes de dossiers */
.req{display:flex; align-items:center; gap:9px; padding:7px 0; border-bottom:1px solid #F4F6FA; font-size:12px;}
.req:last-child{border-bottom:none;}
.req .rref{font-weight:700; font-variant-numeric:tabular-nums; color:#5B6270; font-size:11px;}
.req .rlbl{flex:1; font-weight:600; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.req .rb{padding:3px 9px; border-radius:999px; font-size:10px; font-weight:700; background:var(--b-tint); color:var(--b-color);}
/* rému empilée */
.stackbar{display:flex; height:12px; border-radius:999px; overflow:hidden; margin:8px 0 6px;}
.stackbar i{height:100%;}
.stack-leg{display:flex; gap:14px; font-size:10.5px; color:rgba(255,255,255,.75);}
.stack-leg .d{width:8px; height:8px; border-radius:2px; display:inline-block; margin-right:5px;}

/* ============================ TIMELINE (SUIVI) ============================ */
#view-timeline{background:#fff; overflow:hidden;}
.tl-wrap{padding:20px 20px 0 16px; margin:0; height:100%; box-sizing:border-box; display:flex; flex-direction:column;}
.tl-topbar{display:flex; align-items:center; gap:16px; margin-bottom:18px; padding:0 6px 12px; position:relative; z-index:10; background:#fff; flex:0 0 auto;}
.tl-stage{display:flex; align-items:stretch; justify-content:center; flex:1 1 auto; min-height:0;}
.tl-side{position:relative; width:146px; flex:0 0 146px; padding-right:8px; align-self:stretch; overflow:hidden; z-index:3;}
.tl-types{position:relative; transition:transform .46s cubic-bezier(.2,.85,.25,1);}
.tl-type{height:46px; display:flex; align-items:center; justify-content:space-between; gap:9px; font-size:12px; font-weight:700; letter-spacing:.3px; color:#B6BCC9; cursor:pointer; opacity:.5; transition:color .3s, opacity .3s, font-size .3s;}
.tl-type .ttdot{width:11px;height:11px;flex:0 0 11px;border-radius:50%; background:currentColor; transition:transform .3s;}
.tl-type.active{opacity:1; color:var(--tt-color); font-size:13.5px;}
.tl-type.active .ttdot{transform:scale(1.3);}
.tl-type:hover{opacity:.85;}
/* barre de scroll horizontale — n'apparaît qu'en dernier recours, stylisée DA */
.tl-scroll{flex:1 1 auto; min-width:0; min-height:0; overflow-x:auto; overflow-y:hidden; padding-bottom:0;
  scrollbar-width:thin; scrollbar-color:#C9D2E4 transparent;}
.tl-scroll::-webkit-scrollbar{height:9px;}
.tl-scroll::-webkit-scrollbar-track{background:transparent; border-radius:999px; margin:0 24px;}
.tl-scroll::-webkit-scrollbar-thumb{background:#D5DBE7; border-radius:999px; border:2px solid #fff;}
.tl-scroll::-webkit-scrollbar-thumb:hover{background:var(--primary);}
.tl-grid{position:relative; display:flex; align-items:stretch; height:100%; min-height:100%;}
.tl-col{position:relative; padding:0 4px; display:flex; flex-direction:column; align-items:flex-start; flex:1 1 250px; min-width:248px; max-width:360px;
  transition:flex-basis .32s cubic-bezier(.2,.85,.25,1), min-width .32s cubic-bezier(.2,.85,.25,1), max-width .32s cubic-bezier(.2,.85,.25,1);}
/* une card est dépliée dans cette colonne → on pousse les étapes suivantes à droite */
.tl-col.has-open{flex:0 0 396px; min-width:396px; max-width:396px; z-index:4;}
.tl-col.folded{flex:0 0 42px; min-width:42px; padding:0 2px; cursor:pointer; transition:background .15s; border-radius:var(--r-card);}
.tl-col.folded:hover{background:#F6F8FB;}
.tl-col.folded .tl-label{visibility:hidden; margin-left:0; width:0; max-width:0; overflow:hidden;}
.tl-col.folded .tl-dotwrap{margin-left:0;}
.tl-col.folded .tl-dot{margin-left:10px; width:26px; height:26px; font-size:11px;}
.tl-col.folded::before{left:22px;}
.tl-col.folded:first-child::after{left:23px;}
.tl-col.folded .tl-body{padding:24px 0 34px 9px; gap:12px; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 30px, #000 calc(100% - 14px), transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 30px, #000 calc(100% - 14px), transparent 100%);}
.tl-mini{width:28px; height:28px; flex:0 0 28px; border-radius:50%; background:#fff; border:1.5px solid #C6CBD6;
  display:grid; place-items:center; color:#3A4150; position:relative; z-index:1;}
.tl-mini .material-symbols-outlined{font-size:15px;}
.tl-mini-empty{border-style:dashed; opacity:.5;}
.tl-col::after{content:""; position:absolute; top:53px; left:0; right:0; height:2px; background:#E3E6EC;}
.tl-col:last-child::after{right:calc(100% - 33px);}
.tl-col.folded:last-child::after{right:calc(100% - 23px);}
.tl-label{height:40px; display:flex; align-items:flex-end; margin-left:26px; text-align:left; font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:#3A4150; padding-bottom:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
.tl-dotwrap{position:relative; margin-left:14px; margin-bottom:2px;}
.tl-dot{width:30px;height:30px;border-radius:50%; background:#1A1D21; color:#fff; display:grid; place-items:center; font-size:13px; font-weight:700; position:relative; z-index:2; border:3px solid #fff; box-shadow:0 0 0 1.5px #E3E6EC;}
.tl-count{position:absolute; left:42px; bottom:20px; z-index:2; display:flex; gap:12px; white-space:nowrap; font-size:11px; font-weight:500; color:#8A93A3;}
.tl-count .tc-item b{font-weight:700; margin-right:3px;}
.tl-count .tc-none{color:#C6CBD6;}
.tl-body{position:relative; width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding:24px 0 26px 36px; flex:1 1 auto; min-height:0;
  overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 36px, #000 calc(100% - 14px), transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 36px, #000 calc(100% - 14px), transparent 100%);}
.tl-body::-webkit-scrollbar{display:none;}
.tl-col::before{content:""; position:absolute; top:74px; bottom:0; left:32px; border-left:2px dashed #E3E6EC;}
.tl-body>*{position:relative; z-index:1;}
@keyframes tlCardIn{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);}}
.fcard.moving{z-index:50; box-shadow:0 12px 30px rgba(16,24,40,.18), 0 4px 10px rgba(16,24,40,.10);}
.tl-empty{font-size:11.5px; color:#B6BCC9; font-weight:500; background:#fff; padding:3px 9px; margin-top:6px;}
/* timeline card variant */
.fcard.tl{width:320px; position:relative; transition:padding .3s ease, width .3s ease;}
.fcard.tl::after{content:""; position:absolute; left:-8px; top:26px; width:8px; height:2px; background:#E3E6EC;}
.fcard.tl.collapsed{width:206px;}
.fcard.tl.collapsed .fc-head{flex-wrap:wrap;}
.fcard.tl.collapsed .fc-headbox{flex:1 1 100%;}
.fcard.tl.collapsed .fc-mini{flex:1 1 100%; max-width:none; margin-top:5px;}
.fcard.tl.collapsed .fc-mini .fc-bar{flex:0 0 auto; width:120px;}
.fcard.tl.collapsed .fc-cfoot{margin-top:-1px;}
.fcard.tl:not(.collapsed) .fc-steps{max-height:none; overflow:visible;}
.fc-live{display:none; align-items:center; gap:6px; margin-top:10px; margin-left:16px; position:relative;}
.fcard.tl.collapsed .fc-live{display:flex;}
.fc-live::before{content:""; position:absolute; left:-11px; bottom:50%; width:10px; height:24px; border-left:1.5px solid #E7EAF0; border-bottom:1.5px solid #E7EAF0;}
.lv-dot{width:7px;height:7px;flex:0 0 7px;border-radius:50%; background:#0046FE; animation:lvPulse 1.6s ease-in-out infinite;}
@keyframes lvPulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.lv-wrap{overflow:hidden;}
.lv-txt{display:inline-block; font-size:11px; font-weight:600; color:#8A93A3; white-space:nowrap;}

/* ============================ CANVAS (VIEW 3) — FLOW SCHEMA EDITOR ============================ */
#view-canvas{background:#FAFBFC; inset:60px 0 0 0;}
#stage{position:absolute; inset:0; overflow:hidden; cursor:default;}
#stage.panning{cursor:grabbing;}
#cv-grid{position:absolute; inset:0; display:block; z-index:0;}
#cv-world{position:absolute; top:0; left:0; width:0; height:0; transform-origin:0 0; z-index:1;}
#cv-svg{position:absolute; top:0; left:0; width:10px; height:10px; overflow:visible; pointer-events:none;}
.rb-main{fill:none; stroke:#16181D; stroke-width:22; stroke-linecap:round;}
.rb-notify{fill:none; stroke:#B9E7C9; stroke-width:20; stroke-linecap:round;}
.rb-data{fill:none; stroke:#C6CBD6; stroke-width:6; stroke-linecap:round; stroke-dasharray:1 13;}
.rb-temp{fill:none; stroke:#16181D; stroke-width:22; stroke-linecap:round; opacity:.28;}
.rb-dot{fill:#fff;}
.rb-chev{fill:none; stroke:#fff; stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round;}

/* ---- la vie du canvas -------------------------------------------------------
   Tout petit, et seulement ce qui a un sens : ce qui circule circule, dans le
   sens du circuit ; l'alerte que vous avez posee veille. Une branche eteinte
   par une condition s'arrete de couler — le mouvement dit aussi quel chemin
   est actif. Rien de tout cela pour qui a demande moins de mouvement. */
@media (prefers-reduced-motion: no-preference){
  /* les chevrons des rubans avancent, l'un apres l'autre */
  .rb-chev{animation:rb-avance 1.6s ease-in-out infinite; animation-delay:calc(var(--i, 0) * .2s);}
  /* la source bat doucement */
  .rb-dot{transform-box:fill-box; transform-origin:center; animation:rb-battement 3.2s ease-in-out infinite;}
  /* les donnees coulent vers le formulaire */
  .rb-data{animation:rb-flux 1.3s linear infinite;}
  /* une branche inactive ne coule plus */
  .rb-off .rb-chev, .rb-dot.rb-off, .rb-data.rb-off{animation:none;}
  /* l'alerte personnelle : le pointille tourne, la cloche sonne de temps en temps */
  .cv-node.notify.personal::before{animation:cv-tourne 16s linear infinite;}
  .cv-node.notify.personal .nd-ic{animation:cv-sonne 5.5s ease-in-out infinite; transform-origin:50% 12%;}
  /* au survol, l'icone d'un noeud se leve a peine */
  .cv-node .nd-ic, .cv-node .nd-badge{transition:transform .28s cubic-bezier(.2,.9,.3,1.35);}
  .cv-node.collab:hover .nd-ic, .cv-node.connector:hover .nd-ic,
  .cv-node.notify:not(.personal):hover .nd-ic{transform:translateY(-3px) scale(1.1);}
  .cv-square:hover .nd-badge{transform:rotate(-14deg) scale(1.15);}
  .cv-cond:hover .nd-ic{transform:rotate(-18deg) scale(1.1);}
  .cv-node.dragging .nd-ic, .cv-node.dragging .nd-badge{transform:none;}
}
@keyframes rb-avance{
  0%, 100%{ opacity:.35; transform:translateX(-1.6px); }
  45%     { opacity:1;   transform:translateX(2px); }
}
@keyframes rb-battement{ 0%, 100%{ transform:scale(1); } 50%{ transform:scale(1.3); } }
@keyframes rb-flux{ to{ stroke-dashoffset:-28; } }
@keyframes cv-tourne{ to{ transform:rotate(360deg); } }
@keyframes cv-sonne{
  0%, 82%, 100%{ transform:rotate(0); }
  85%{ transform:rotate(15deg); }  88%{ transform:rotate(-12deg); }
  91%{ transform:rotate(8deg); }   94%{ transform:rotate(-4deg); }
}

/* nodes — magnetized to the grid */
.cv-node{position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:2px;
  cursor:grab; user-select:none; z-index:2; font-family:'Inter',sans-serif; box-shadow:0 6px 20px rgba(16,24,40,.07);}
.cv-node.dragging, .fcard.cv.dragging{cursor:grabbing; z-index:40; box-shadow:0 18px 44px rgba(16,24,40,.18);}
.cv-node .nd-ic, .cv-node .nd-badge, .cv-node b, .cv-node small{pointer-events:none; line-height:1.25;}
.cv-circle{width:110px; height:110px; border-radius:50%; background:#fff;}
.cv-node.collab{border:3px solid #16181D; color:#16181D;}
.cv-node.collab .nd-ic{font-size:26px;}
.cv-node.collab b{font-size:12px; letter-spacing:-.1px; margin-top:2px;}
.cv-node.collab small{font-size:10px; font-weight:500; color:#8A93A3;}
.cv-node.connector{border:2px solid #C6CBD6; color:#3A4150;}
.cv-node.connector .nd-ic{font-size:24px; color:#16181D;}
.cv-node.connector b{font-size:11px; padding:0 10px;}
.cv-node.notify{background:#3DBE71; color:#fff;}
.cv-node.notify .nd-ic{font-size:24px;}
.cv-node.notify b{font-size:11px;}
.cv-node.notify small{font-size:10px; font-weight:500; color:rgba(255,255,255,.8); padding:0 8px;}
/* une etape au meme rang que la precedente : elle le dit */
.cv-node.decider.parallele::after{content:"= même étape"; position:absolute; left:50%; bottom:-16px;
  transform:translateX(-50%); font:700 8.5px Inter,sans-serif; letter-spacing:.05em; text-transform:uppercase;
  color:#0046FE; background:#E6F0FF; border-radius:999px; padding:2px 7px; white-space:nowrap;}
/* personal alert node: dashed circle, white inside. Le pointille est dessine
   par un pseudo-element, pas par la bordure : c'est lui qui tourne, le texte
   et la cloche restent immobiles au centre. */
.cv-node.notify.personal{background:#fff; border:none; color:#2F9E44; box-shadow:none;}
.cv-node.notify.personal::before{content:""; position:absolute; inset:0; border-radius:50%;
  border:2.5px dashed #3DBE71; pointer-events:none;}
.cv-node.notify.personal .nd-ic{color:#3DBE71;}
.cv-node.notify.personal small{color:#8A93A3;}
.cv-square{width:110px; height:110px; border-radius:10px; background:#3355E8; color:#fff; align-items:flex-start; justify-content:flex-end; text-align:left; padding:12px; gap:0;}
.cv-square .nd-badge{position:absolute; top:10px; right:10px; font-size:20px; color:rgba(255,255,255,.92);}
.cv-square b{font-size:14px; letter-spacing:-.2px;}
.cv-square small{font-size:11px; color:rgba(255,255,255,.75); margin-top:2px;}
.cv-square.dark{background:#16181D;}
/* l'étape qui informe sans bloquer : le vert des notifications, dans le circuit */
.cv-square.info{background:#3DBE71;}
.cv-square.info small{color:rgba(255,255,255,.88);}
/* condition node (diamond) */
.cv-cond{width:110px; height:110px; background:transparent; box-shadow:none;}
.cv-cond::before{content:""; position:absolute; inset:15px; transform:rotate(45deg); background:#fff; border:3px solid #7A5AF8; border-radius:16px; box-shadow:0 6px 20px rgba(16,24,40,.10);}
.cv-cond .nd-ic{position:relative; font-size:21px; color:#7A5AF8;}
.cv-cond b{position:relative; font-size:10px; color:#3A4150; padding:0 20px; line-height:1.2;}
/* branch labels riding the ribbons */
.rb-label{position:absolute; z-index:3; transform:translate(-50%,-50%); padding:3px 11px; background:#fff; border:1.5px solid #7A5AF8; color:#5B3FD8; font-size:10.5px; font-weight:700; border-radius:999px; white-space:nowrap; cursor:text; font-family:'Inter',sans-serif; box-shadow:0 2px 8px rgba(16,24,40,.10); transition:box-shadow .15s;}
.rb-label:hover{box-shadow:0 0 0 3px rgba(122,90,248,.18);}
#view-canvas.mode-collab .rb-label{pointer-events:none;}
/* inline edit popover (condition / branch labels) */
#cv-edit{position:fixed; z-index:310; display:none; align-items:center; gap:6px; padding:7px; background:#fff; border:1px solid var(--hairline); border-radius:11px; box-shadow:0 14px 38px rgba(16,24,40,.22); font-family:'Inter',sans-serif;}
#cv-edit.show{display:flex;}
#cv-edit input{height:32px; width:210px; border:1px solid #E3E6EC; border-radius:8px; font:inherit; font-size:12.5px; padding:0 10px; outline:none;}
#cv-edit input:focus{border-color:#7A5AF8; box-shadow:0 0 0 3px rgba(122,90,248,.14);}
#cv-edit button{height:32px; padding:0 12px; border:none; border-radius:8px; background:#7A5AF8; color:#fff; font:inherit; font-size:12px; font-weight:600; cursor:pointer;}
#cv-edit .cve-branch{display:none; align-items:center; gap:5px; background:#F1EDFF; color:#5B3FD8;}
#cv-edit .cve-branch .material-symbols-outlined{font-size:15px;}
#cv-edit.branch .cve-branch{display:inline-flex;}
#cv-edit .cve-branch.is-active{background:#E7F7EC; color:#2F9E44; cursor:default;}
/* type switcher (left, under context chip) — même composant que le Suivi */
#cv-types{position:fixed; top:128px; left:var(--s4); z-index:120; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--hairline); border-radius:14px; padding:4px 14px; box-shadow:var(--shadow-sm); min-width:150px;}
#cv-types .tl-type{height:38px; width:100%;}
/* grade toggle (admin / collaborateur) — top right */
#cv-mode{position:fixed; top:76px; right:var(--s4); z-index:130; display:flex; gap:2px; padding:4px;
  background:#fff; border:1px solid var(--hairline); border-radius:999px; box-shadow:var(--shadow-sm);}
#cv-mode button{display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 13px; border:none; border-radius:999px;
  background:transparent; font:inherit; font-size:12px; font-weight:600; color:var(--text-secondary); cursor:pointer; transition:all .18s;}
#cv-mode button .material-symbols-outlined{font-size:16px;}
#cv-mode button.active{background:#16181D; color:#fff;}
/* personal watch badge on a step */
.nd-watch{position:absolute; top:-8px; left:-8px; width:26px; height:26px; border-radius:50%; background:#fff; border:2px solid #F59E0B;
  color:#C4710B; display:grid; place-items:center; box-shadow:0 3px 8px rgba(16,24,40,.15); z-index:5; pointer-events:none;}
.nd-watch .material-symbols-outlined{font-size:14px;}
/* post-it / note sur le workflow (admin comme collaborateur) */
.cv-note{position:absolute; width:172px; min-height:92px; background:#FFF3BF; border:1px solid #EFD98A; border-radius:2px;
  box-shadow:0 6px 16px rgba(16,24,40,.18); z-index:3; transform:rotate(-1.3deg); transition:box-shadow .15s, transform .12s; cursor:grab; font-family:'Inter',sans-serif;}
.cv-note:hover{box-shadow:0 12px 26px rgba(16,24,40,.24);}
.cv-note.dragging{cursor:grabbing; transform:rotate(0); z-index:40; box-shadow:0 18px 40px rgba(16,24,40,.28);}
.cv-note .note-top{display:flex; align-items:center; gap:6px; padding:6px 8px 3px;}
.cv-note .note-who{display:inline-flex; align-items:center; gap:4px; font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:2px 8px; border-radius:999px; background:rgba(120,90,0,.14); color:#7A5B00;}
.cv-note .note-who .material-symbols-outlined{font-size:11px;}
.cv-note.by-admin{background:#E7EFFF; border-color:#BFD3FF;}
.cv-note.by-admin .note-who{background:var(--primary); color:#fff;}
.cv-note.by-admin .note-body{color:#1A2A55;} .cv-note.by-admin .note-body:empty::before{color:#8FA6D8;}
.cv-note .note-del{margin-left:auto; border:none; background:none; cursor:pointer; color:#B08A2A; font-size:17px; line-height:1; width:19px; height:19px; border-radius:5px; display:grid; place-items:center; opacity:0; transition:opacity .15s, background .12s;}
.cv-note.by-admin .note-del{color:#5B7BC7;}
.cv-note:hover .note-del{opacity:1;} .cv-note .note-del:hover{background:rgba(0,0,0,.09);}
.cv-note .note-body{padding:1px 11px 12px; font-size:12.5px; line-height:1.45; color:#4A3B10; outline:none; min-height:42px; cursor:text; word-break:break-word; white-space:pre-wrap;}
.cv-note .note-body:empty::before{content:attr(data-ph); color:#B7975A;}
:root[data-theme="dark"] .cv-note{background:#3A3320; border-color:#584B25;} :root[data-theme="dark"] .cv-note .note-body{color:#F0E4B8;}
:root[data-theme="dark"] .cv-note.by-admin{background:#1D2540; border-color:#33427A;} :root[data-theme="dark"] .cv-note.by-admin .note-body{color:#CDD9F5;}
#view-canvas.mode-collab .cv-note{cursor:grab;} #view-canvas.mode-collab .cv-note .note-body{cursor:text;}
/* collaborateur mode: structural editing hidden */
#view-canvas.mode-collab .cvt[data-add]{display:none;}
#view-canvas.mode-collab #cv-toolbar .cvt-sep{display:none;}
#view-canvas.mode-collab .cv-handle{display:none !important;}
#view-canvas.mode-collab .cv-node, #view-canvas.mode-collab .fcard.cv{cursor:default;}

/* link handle (drag to connect) */
.cv-handle{position:absolute; right:-7px; top:50%; transform:translateY(-50%); width:15px; height:15px; border-radius:50%;
  background:#fff; border:3.5px solid #16181D; opacity:0; cursor:crosshair; z-index:6;
  transition:opacity .15s, transform .12s; box-shadow:0 2px 6px rgba(16,24,40,.2);}
.cv-node:hover .cv-handle, .fcard.cv:hover .cv-handle{opacity:1;}
.cv-handle:hover{transform:translateY(-50%) scale(1.25);}
/* input port (back of the node) — click to detach an incoming path without deleting the node */
.cv-handle-in{position:absolute; left:-7px; top:50%; transform:translateY(-50%); width:15px; height:15px; border-radius:50%;
  background:#fff; border:3px dashed #A8AFBE; opacity:0; cursor:pointer; z-index:6;
  transition:opacity .15s, transform .12s, border-color .15s; box-shadow:0 2px 6px rgba(16,24,40,.15);}
.cv-node:hover .cv-handle-in, .fcard.cv:hover .cv-handle-in{opacity:1;}
.cv-handle-in:hover{transform:translateY(-50%) scale(1.25); border-color:#D6455D; border-style:solid;}
#view-canvas.mode-collab .cv-handle-in{display:none !important;}
/* condition branches — chemin actif / branches écartées */
.rb-off{opacity:.16; transition:opacity .25s;}
.rb-label.on{background:#7A5AF8; border-color:#7A5AF8; color:#fff;}
.rb-label.off{border-color:#C6CBD6; color:#8A93A3; opacity:.55;}
.cv-node.off-path, .fcard.cv.off-path{opacity:.35; filter:saturate(.35);}

/* form card — canvas variant (composed, not filled) */
.fcard.cv{position:absolute; width:260px; z-index:2; cursor:grab; box-shadow:0 3px 8px rgba(16,24,40,.05), 0 16px 40px rgba(16,24,40,.10);}
.fcard.cv .fc-steps{max-height:440px;}

/* floating context chip */
#cv-context{position:fixed; top:76px; left:var(--s4); z-index:120; display:inline-flex; align-items:center; gap:9px; padding:9px 14px;
  background:#fff; border:1px solid var(--hairline); border-radius:12px; box-shadow:var(--shadow-sm);
  font-size:12.5px; font-weight:600; color:#16181D;}
#cv-context .material-symbols-outlined{font-size:17px; color:var(--primary);}

/* dark pill toolbar — top center */
#cv-toolbar{position:fixed; top:76px; left:50%; transform:translateX(-50%); z-index:130; display:flex; align-items:stretch;
  padding:7px 9px; background:#16181D; border-radius:18px;
  box-shadow:0 14px 40px rgba(16,24,29,.30), 0 3px 10px rgba(16,24,29,.18);}
.cvt{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-width:64px; padding:7px 9px 6px;
  border:none; background:transparent; color:#fff; font:inherit; font-size:11px; font-weight:500; letter-spacing:.1px;
  border-radius:12px; cursor:pointer; transition:background .15s; white-space:nowrap;}
.cvt:hover{background:rgba(255,255,255,.09);}
.cvt:active{transform:scale(.95);}
.cvt .material-symbols-outlined{font-size:22px;}
.cvt-sep{width:1px; background:rgba(255,255,255,.12); margin:5px 8px;}

/* zoom pill — bottom center */
#cv-zoom{position:fixed; bottom:var(--s4); left:50%; transform:translateX(-50%); z-index:130; display:flex; align-items:center; gap:6px;
  padding:5px; background:#fff; border:1px solid var(--hairline); border-radius:999px; box-shadow:var(--shadow-md);}
#cv-zoom button{border:none; background:transparent; font:inherit; cursor:pointer; color:#3A4150; display:grid; place-items:center; transition:background .15s;}
#cv-zoom button[data-z="in"], #cv-zoom button[data-z="out"]{width:34px; height:34px; border-radius:50%; border:1px solid var(--hairline); background:#fff;}
#cv-zoom button[data-z="in"]:hover, #cv-zoom button[data-z="out"]:hover{background:#F4F6FA;}
#cv-zoom button[data-z="reset"]{min-width:52px; height:34px; padding:0 6px; border-radius:999px; font-size:12.5px; font-weight:600;}
#cv-zoom button[data-z="reset"]:hover{background:#F4F6FA;}
#cv-zoom .material-symbols-outlined{font-size:19px;}

/* canvas popover (node pickers) + node context menu */
#cv-pop, #cvmenu{position:fixed; z-index:300; display:none; flex-direction:column; min-width:210px; padding:6px; background:#fff;
  border:1px solid var(--hairline); border-radius:11px; box-shadow:0 14px 38px rgba(16,24,40,.20); font-family:'Inter',sans-serif;}
#cv-pop.show, #cvmenu.show{display:flex;}
#cv-pop button, #cvmenu button{display:flex; align-items:center; gap:10px; padding:9px 10px; border:none; background:transparent;
  border-radius:7px; font:inherit; font-size:12.5px; font-weight:500; color:#1A1D21; cursor:pointer; text-align:left; transition:background .12s;}
#cv-pop button:hover, #cvmenu button:hover{background:#F6F8FB;}
#cv-pop button .material-symbols-outlined, #cvmenu button .material-symbols-outlined{font-size:18px;}
#cvmenu button[data-act="del"] .material-symbols-outlined{color:#F44336;}
/* un bouton d'historique sans rien à faire se voit, mais ne ment pas */
.cvt.eteint{opacity:.35; pointer-events:none;}

/* compose overlay (composition du formulaire) — mirrors #fov */
#cov{position:fixed; top:60px; bottom:0; left:0; width:400px; background:#fff; border-right:1px solid var(--hairline);
  box-shadow:12px 0 34px rgba(16,24,40,.07); transform:translateX(-105%); transition:transform .38s cubic-bezier(.2,.85,.25,1);
  z-index:185; display:flex; flex-direction:column; font-family:'Inter',sans-serif;}
#cov.open{transform:translateX(0);}
body.cov-open #view-timeline, body.cov-open #view-board, body.cov-open #view-hub, body.cov-open #view-wizard, body.cov-open #view-canvas{left:400px;}
#cov .fov-body{padding-top:10px;}
.fov-val.off{color:#8A93A3; border-style:dashed;}
.fov-val.off .fv-sq{background:#EEF1F5; color:#9AA2B1;}

#toast{
  position:fixed; bottom:92px; left:50%; transform:translateX(-50%) translateY(10px); z-index:140;
  padding:10px 18px; background:var(--primary); color:#fff; border-radius:var(--r-pill);
  font-size:12.5px; font-weight:500; box-shadow:0 8px 30px rgba(0,70,254,.5); opacity:0; pointer-events:none;
  transition:opacity .3s, transform .3s;
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* launch overlay flash */
#launch-flash{position:fixed; inset:0; z-index:400; background:radial-gradient(circle at 50% 45%, rgba(0,70,254,.9), rgba(10,12,20,.98)); display:grid; place-items:center; opacity:0; pointer-events:none; transition:opacity .4s;}
#launch-flash.show{opacity:1;}
.lf-inner{text-align:center; color:#fff; transform:scale(.9); transition:transform .5s cubic-bezier(.2,.9,.3,1.2);}
#launch-flash.show .lf-inner{transform:scale(1);}
.lf-ring{width:76px;height:76px;margin:0 auto 20px; border-radius:50%; border:3px solid rgba(255,255,255,.25); border-top-color:#fff; animation:spin .9s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.lf-inner h2{font-size:22px; font-weight:700; letter-spacing:-.4px;}
.lf-inner p{font-size:13.5px; opacity:.75; margin-top:6px;}

@media (max-width:900px){
  .type-grid{grid-template-columns:1fr 1fr;}
  .grid3{grid-template-columns:1fr;}
  .ba-grid{grid-template-columns:1fr;}
}
/* ============================================================================
   ADAPTATION AUX ECRANS ETROITS

   Les grilles de contenu s'adaptaient deja (type-grid, ATS, labo, suivi, hub
   flow, profil). Ce qui ne s'adaptait pas : la barre d'application, pleine des
   1440px, et les tableaux larges, qui debordaient sans jamais pouvoir defiler.

   La barre se degrade par paliers plutot que de casser d'un coup : on resserre,
   puis on ne garde que les icones (chaque lien porte deja son title), puis on
   laisse la rangee defiler. Les tableaux passent en defilement horizontal, ce
   qui vaut mieux que d'ecraser des colonnes de donnees.
   ========================================================================== */

/* 1. on resserre : la barre tient encore ses libelles */
@media (max-width:1400px){
  #appbar{gap:var(--s3); padding:0 var(--s3);}
  .nav a{padding:8px 10px; font-size:13px;}
  .nav a.nav-sep{margin-left:11px;}
  .search{width:196px;}
}

/* 2. les libelles s'effacent, les icones parlent (le title reste au survol) */
@media (max-width:1230px){
  .nav a{font-size:0; padding:9px 9px;}
  .nav a .material-symbols-outlined{font-size:20px; margin-right:0; vertical-align:-5px;}
  .nav a.nav-sep{margin-left:9px;}
  .nav a.nav-sep::before{left:-5px;}
  .nav a.nav-lab::after{top:3px; right:3px;}
  .nav a.nav-paie[data-n]::after{top:-1px; right:-3px;}
  .tuto-btn{font-size:0; gap:0; padding:0 9px;}
  .tuto-btn .material-symbols-outlined{font-size:19px;}
  .search{width:168px;}
}

/* 3. la rangee de navigation defile, la recherche se reduit a son icone */
@media (max-width:980px){
  #appbar{gap:var(--s2); padding:0 var(--s2);}
  .nav{overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
       margin-left:var(--s1); flex:1; min-width:0;}
  .nav::-webkit-scrollbar{display:none;}
  .nav a{flex:none;}
  .bar-right{gap:var(--s1);}
  .search{width:38px; padding:0 9px; overflow:hidden;}
  .search:focus-within{width:min(280px,46vw); padding:0 14px;}
  .search input{width:0; padding:0;}
  .search:focus-within input{width:100%;}
  #db-export, #db-import, .bar-sep{display:none;}
}

/* 4. le plus etroit : le mot-marque garde son seul symbole */
@media (max-width:640px){
  .wordmark{font-size:0; gap:0;}
  .wordmark svg{height:24px; width:24px; flex:0 0 24px;}
  .wrap{padding:var(--s5) var(--s3) 60px;}
  .page-head h1{font-size:23px; letter-spacing:-.5px;}
  .page-head p{font-size:13.5px;}
}

/* 5. un tableau de donnees ne s'ecrase pas : il defile */
@media (max-width:980px){
  .table-card{overflow-x:auto; overflow-y:visible;}
  .table-card table{min-width:680px;}
}

/* 6. l'espace ADP : la ligne se plie quand la largeur ne suffit plus */
@media (max-width:1080px){
  #pa-wrap .pa-lb{width:158px;}
  #pa-wrap .pa-saisie{width:166px;}
  #pa-wrap .pa-ind{width:88px;}
}
@media (max-width:860px){
  #pa-wrap .pa-ligne{flex-wrap:wrap; padding:10px 12px; row-gap:6px;}
  #pa-wrap .pa-lb{width:100%; flex:none;}
  #pa-wrap .pa-saisie{width:auto; flex:1 1 180px;}
  #pa-wrap .pa-ref{flex:1 1 130px;}
  #pa-wrap .pa-ind{width:auto; flex:none; border-left:none; padding-left:0; margin-left:auto;}
  #pa-wrap .pa-tete{gap:10px;}
  #pa-wrap .pa-tete .pa-id{flex:1 1 100%; order:-1;}
  #pa-wrap .pa-carte{flex-wrap:wrap; row-gap:8px;}
  #pa-wrap .pa-carte .pa-pg{text-align:left; margin-left:52px;}
}

/* ============================================================================
   PROFIL — remise en accord avec le reste de Flow

   La page s'etait construite a part : arrondis de 14px quand tout Flow tient
   sur des cartes nettes de 3px, blancs et gris ecrits en dur au lieu des
   jetons (donc invisibles en theme sombre), et un en-tete sur une seule ligne
   qui coupait la lentille « vu en tant que » des 1280px.

   On ne touche pas a la structure — le rail de sections, le bento et les
   lentilles fonctionnent. On remet la forme dans la meme langue que le reste.
   ========================================================================== */

/* l'en-tete respire et se plie plutot que de se couper */
.pf-topbar{flex-wrap:wrap; row-gap:12px; align-items:center; margin-bottom:18px;}
.pf-topbar h1{font-size:24px;}
.pf-topbar .pf-sub{font-size:12.5px; color:var(--text-secondary); margin-top:3px;}
.pf-lens{border-radius:var(--r-ctrl); background:var(--surface); border-color:var(--hairline);
  padding:3px; box-shadow:none; flex-wrap:wrap;}
.pf-lens button{border-radius:var(--r-ctrl); height:28px; padding:0 11px; font-size:11.5px;}
.pf-lens button.active{background:var(--primary); color:#fff;}
.pf-lens-tag{color:var(--text-tertiary); align-self:center;}

/* le bandeau de fiches : plus bas, moins bavard */
.pf-nav{gap:7px; margin-bottom:18px;}
.pf-nav .arr{width:30px; height:30px; flex:0 0 30px; border-radius:var(--r-ctrl);
  background:var(--surface); color:var(--text-secondary);}
.pf-chip{height:34px; border-radius:var(--r-ctrl); background:var(--surface);
  color:var(--text-primary); font-size:11.5px; padding:0 12px 0 5px;}
.pf-chip .ca{width:24px; height:24px; font-size:9px;}
.pf-chip:hover{border-color:var(--primary);}
.pf-chip.active{border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,70,254,.10);}

/* les cartes du bento, comme partout ailleurs */
.bt{background:var(--surface); border-color:var(--hairline); border-radius:var(--r-card);
  box-shadow:var(--shadow-sm);}
.bt.dark{background:#16181D; border-color:#16181D;}
.pf-side{background:var(--surface); border-color:var(--hairline); border-radius:var(--r-card);
  box-shadow:var(--shadow-sm);}
.pf-side button{border-radius:var(--r-ctrl);}
.pf-side button:hover{background:var(--page);}
.pf-side button .n{background:var(--page); color:var(--text-tertiary);}
.pf-side button.active .n{background:var(--surface);}
.pf-pending-bar{border-radius:var(--r-card);}

/* l'avatar tenait la moitie de sa carte */
.pf-ava{width:66px; height:66px; font-size:21px; margin:2px auto 10px;}

/* les outils de la base, poses dans l'en-tete du profil */
.pf-outils{display:flex; gap:7px; flex-wrap:wrap;}
.pf-outils button{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--hairline);
  background:var(--surface); border-radius:var(--r-ctrl); font:600 11.5px Inter,sans-serif;
  color:var(--text-secondary); padding:8px 12px; cursor:pointer;}
.pf-outils button:hover{color:var(--primary); border-color:var(--primary);}
.pf-outils button .material-symbols-outlined{font-size:16px;}

@media (max-width:900px){
  .pf-topbar h1{font-size:20px;}
  .pf-lens, .pf-outils{width:100%;}
}

/* ============================================================================
   LA BARRE DE DEFILEMENT

   Celle du systeme n'appartient a personne et change d'un poste a l'autre.
   Celle-ci est a Flow : un rectangle bleu sur fond blanc, dont la hauteur dit
   d'elle-meme quelle part du contenu tient a l'ecran. Les endroits qui la
   masquent volontairement (rangees de pastilles, colonnes du suivi) gardent
   leur reglage : leurs regles sont plus precises que celles-ci.
   ========================================================================== */
/* Le bleu de marque, plein, etait trop dur pour un element qu'on cotoie en
   permanence : on le pose adouci, et il ne reprend sa force qu'au survol.
   Le rectangle est franc — un arrondi d'un pixel, juste pour ne pas piquer. */
:root{ --scroll:#93AEEF; --scroll-fort:#5D82E6; }
:root[data-theme="dark"]{ --scroll:#3E5590; --scroll-fort:#5C82D6; }
*{scrollbar-width:auto; scrollbar-color:var(--scroll) var(--surface);}
::-webkit-scrollbar{width:14px; height:14px;}
::-webkit-scrollbar-track{background:var(--surface);}
::-webkit-scrollbar-corner{background:var(--surface);}
::-webkit-scrollbar-thumb{background:var(--scroll); border-radius:1px;
  border:3px solid var(--surface); min-height:40px;}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-fort);}
::-webkit-scrollbar-thumb:active{background:var(--primary);}

/* ============================ 2. les retouches ============================ */
/* ============ Tutoriel (bouton appbar) ============ */
.tuto-btn{display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 13px; border:1px solid var(--hairline);
  background:#fff; border-radius:var(--r-pill); font:inherit; font-size:12.5px; font-weight:600; color:var(--text-primary); cursor:pointer;
  box-shadow:var(--shadow-sm); transition:border-color .2s, box-shadow .2s;}
.tuto-btn:hover{border-color:var(--primary); color:var(--primary);}
.tuto-btn .material-symbols-outlined{font-size:17px; color:var(--primary);}

/* ============ Journal des mises à jour ============ */
.log-card{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-card); box-shadow:var(--shadow-sm); padding:6px 22px;}
.log-row{display:grid; grid-template-columns:120px 92px 1fr; gap:16px; align-items:start; padding:15px 0; border-bottom:1px solid var(--hairline);}
.log-row:last-child{border-bottom:none;}
.log-date{font-size:12px; color:var(--text-secondary); font-weight:600; padding-top:2px;}
.log-tag{justify-self:start; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:var(--r-pill);}
.log-tag.nouveau{color:var(--primary); background:#E6F0FF;} .log-tag.amelioration{color:#2E7D32; background:#E7F4E8;} .log-tag.correctif{color:#E64F2C; background:#FCEAE4;}
.log-body b{display:block; font-size:13.5px; margin-bottom:3px;}
.log-body p{font-size:12.5px; color:var(--text-secondary); line-height:1.55;}
.log-row.hid{display:none;}

/* ============ ATS ============ */
.ats-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px;}
.kpi{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-card); box-shadow:var(--shadow-sm); padding:14px 16px; display:flex; align-items:center; gap:12px;}
.kpi .ic{width:36px; height:36px; border-radius:var(--r-card); display:grid; place-items:center; flex:0 0 36px;}
.kpi .ic .material-symbols-outlined{font-size:20px;}
.kpi b{font-size:20px; display:block; line-height:1.1;}
.kpi small{font-size:11.5px; color:var(--text-secondary); font-weight:600;}
.ats-cols{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; align-items:start;}
.ats-col{background:#EEF1F7; border:1px solid var(--hairline); border-radius:var(--r-card); padding:10px;}
.ats-col-h{display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-secondary); padding:4px 6px 10px;}
.ats-col-h .dot{width:8px; height:8px; border-radius:50%;}
.ats-col-h .n{margin-left:auto; background:#fff; border:1px solid var(--hairline); border-radius:var(--r-pill); font-size:11px; padding:1px 8px;}
.postit{background:var(--surface); border:1px solid var(--hairline); border-left:3px solid var(--pc,#0046FE); border-radius:var(--r-card);
  box-shadow:var(--shadow-sm); padding:12px 13px; margin-bottom:10px; cursor:pointer; transition:transform .16s, box-shadow .16s;}
.postit:hover{transform:translateY(-2px) rotate(-.35deg); box-shadow:var(--shadow-md);}
.postit .p-top{display:flex; align-items:center; gap:7px; margin-bottom:6px;}
.postit .ref{font-size:11px; font-weight:700; color:var(--text-secondary); letter-spacing:.03em;}
.postit b{display:block; font-size:13.5px; margin-bottom:2px;}
.postit small{font-size:11.5px; color:var(--text-secondary);}
.p-bar{height:5px; background:#EDF0F5; border-radius:var(--r-pill); margin:10px 0 6px; overflow:hidden;}
.p-bar i{display:block; height:100%; border-radius:var(--r-pill); background:var(--primary); transition:width .4s;}
.p-foot{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--text-secondary);}
.p-foot .material-symbols-outlined{font-size:14px;}
.p-foot .pct{margin-left:auto; font-weight:700; color:var(--text-primary);}
.type-mini{font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:2px 7px; border-radius:var(--r-pill); color:var(--tp-color); background:var(--tp-tint);}

/* ---- détail fiche ---- */
.ats-back{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--text-secondary); cursor:pointer; border:none; background:none; padding:0; margin-bottom:14px; font-family:inherit;}
.ats-back:hover{color:var(--primary);}
.ats-head{display:flex; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap;}
.ats-head h1{font-size:22px; letter-spacing:-.01em;}
.ats-grid{display:grid; grid-template-columns:1fr 340px; gap:18px; align-items:start;}
.nb-card{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-card); box-shadow:var(--shadow-sm); margin-bottom:14px;}
.nb-h{display:flex; align-items:center; gap:9px; padding:13px 16px; border-bottom:1px solid var(--hairline); font-size:13px; font-weight:700;}
.nb-h .material-symbols-outlined{font-size:18px; color:var(--primary);}
.nb-h .done{margin-left:auto; font-size:11px; font-weight:600; color:var(--text-secondary);}
.nb-b{padding:14px 16px; display:grid; grid-template-columns:1fr 1fr; gap:11px 14px;}
.nb-b .fld label{display:block; font-size:11px; font-weight:600; color:var(--text-secondary); margin-bottom:4px;}
.nb-b textarea.control{min-height:74px; resize:vertical;}
.side-card{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-card); box-shadow:var(--shadow-sm); padding:16px; margin-bottom:14px;}
.side-card h4{font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:12px;}
.ring-wrap{display:flex; align-items:center; gap:16px;}
.ring-wrap svg{flex:0 0 84px;}
.sec-bars{flex:1; display:flex; flex-direction:column; gap:8px;}
.sec-bar{font-size:11px; color:var(--text-secondary);}
.sec-bar .b{height:4px; background:#EDF0F5; border-radius:var(--r-pill); margin-top:3px; overflow:hidden;}
.sec-bar .b i{display:block; height:100%; background:var(--primary);}
.cand-item{display:flex; align-items:center; gap:10px; padding:9px 10px; border:1px solid var(--hairline); border-radius:var(--r-card); margin-bottom:8px;}
.cand-item .av{width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-size:11.5px; font-weight:700; color:#fff; flex:0 0 32px;}
.cand-item b{font-size:12.5px; display:block;}
.cand-item small{font-size:11px; color:var(--text-secondary);}
.cand-item .edit{margin-left:auto; border:none; background:none; cursor:pointer; color:var(--text-secondary); padding:4px;}
.cand-item .edit:hover{color:var(--primary);}
.add-cand{width:100%; border:1px dashed #C9D2E0; background:#F8FAFD; color:var(--text-secondary); border-radius:var(--r-card); padding:10px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;}
.add-cand:hover{color:var(--primary); border-color:var(--primary);}
.btn-pri{display:inline-flex; align-items:center; justify-content:center; gap:7px; border:none; background:var(--primary); color:#fff; font:inherit; font-size:13px; font-weight:600; padding:11px 18px; border-radius:var(--r-card); cursor:pointer; box-shadow:0 6px 18px rgba(0,70,254,.25);}
.btn-pri:hover{filter:brightness(.96);}
.btn-pri:disabled{opacity:.45; cursor:not-allowed; box-shadow:none;}
.btn-gh{display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--hairline); background:#fff; color:var(--text-primary); font:inherit; font-size:13px; font-weight:600; padding:10px 16px; border-radius:var(--r-card); cursor:pointer;}
.btn-gh:hover{border-color:var(--primary); color:var(--primary);}

/* ---- overlay générique ---- */
.xov{position:fixed; inset:0; z-index:600; background:rgba(12,18,30,.45); display:none; place-items:center; padding:24px;}
.xov.on{display:grid;}
.xov-panel{background:var(--surface); border-radius:var(--r-card); box-shadow:var(--shadow-lg); width:min(680px, 94vw); max-height:88vh; overflow:auto; padding:24px;}
.xov-panel h3{font-size:17px; margin-bottom:4px;}
.xov-panel .sub{font-size:12.5px; color:var(--text-secondary); margin-bottom:16px;}
.xov-grid{display:grid; grid-template-columns:1fr 1fr; gap:11px 14px;}
.xov-grid .fld label{display:block; font-size:11px; font-weight:600; color:var(--text-secondary); margin-bottom:4px;}
.xov-act{display:flex; justify-content:flex-end; gap:10px; margin-top:18px;}
.slider-row{display:flex; align-items:center; gap:10px; font-size:12px; margin-bottom:8px;}
.slider-row label{flex:0 0 110px; color:var(--text-secondary); font-weight:600; font-size:11.5px;}
.slider-row input[type=range]{flex:1; accent-color:var(--primary);}
.slider-row .v{flex:0 0 18px; text-align:right; font-weight:700;}
.miss-list{font-size:12px; color:var(--text-secondary); line-height:1.7;}
.miss-list .material-symbols-outlined{font-size:14px; vertical-align:-2px; color:var(--warning);}

/* ============ CHOIX ============ */
.prop-card{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-card); box-shadow:var(--shadow-sm); padding:18px; display:flex; align-items:center; gap:16px; margin-bottom:12px; cursor:pointer; transition:box-shadow .16s, transform .16s;}
.prop-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.prop-card .ic{width:42px; height:42px; border-radius:var(--r-card); display:grid; place-items:center; background:#EEEBFB; color:#5A3FD6;}
.prop-card b{font-size:14.5px; display:block;}
.prop-card small{font-size:12px; color:var(--text-secondary);}
.prop-card .avs{margin-left:auto; display:flex;}
.prop-card .avs .av{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:10.5px; font-weight:700; border:2px solid #fff; margin-left:-8px;}
.cmp-scroll{overflow-x:auto; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-card); box-shadow:var(--shadow-sm);}
.cmp{display:grid; min-width:760px;}
.cmp .cell{padding:12px 14px; border-bottom:1px solid var(--hairline); border-left:1px solid var(--hairline); font-size:12.5px;}
.cmp .cell:first-child{border-left:none;}
.cmp .lab{font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-secondary); display:flex; align-items:center; gap:7px; background:#FAFBFD;}
.cmp .lab .material-symbols-outlined{font-size:16px; color:var(--primary);}
.cmp .best{background:#F0FAF1; box-shadow:inset 3px 0 0 #4CAF50;}
.cmp .c-head{display:flex; flex-direction:column; align-items:flex-start; gap:8px; border-bottom-width:2px;}
.cmp .c-head .av{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; font-size:13px;}
.cmp .c-head b{font-size:13.5px;}
.cmp .c-head small{font-size:11px; color:var(--text-secondary);}
.skill-line{display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12px;}
.skill-line:last-child{margin-bottom:0;}
.skill-line span{flex:0 0 92px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.skill-line .lv{flex:1; height:4px; background:#EDF0F5; border-radius:var(--r-pill); overflow:hidden;}
.skill-line .lv i{display:block; height:100%; background:var(--primary);}
.chips-mini{display:flex; flex-wrap:wrap; gap:5px;}
.chips-mini em{font-style:normal; font-size:11px; font-weight:600; background:#F0F3F9; border-radius:var(--r-pill); padding:3px 9px;}
.comp-dots{display:flex; flex-direction:column; gap:5px;}
.comp-dots .cd{display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--text-secondary);}
.comp-dots .cd b{flex:0 0 96px; font-weight:600; color:var(--text-primary); font-size:11.5px;}
.comp-dots .cd i{width:7px; height:7px; border-radius:50%; background:#E3E8F0;}
.comp-dots .cd i.on{background:var(--primary);}

/* ============ ANNUAIRE ============ */
.ann-tools{display:flex; align-items:center; gap:10px; margin:18px 0; flex-wrap:wrap;}
.ann-search{flex:1; min-width:220px; display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--hairline); border-radius:var(--r-card); padding:9px 13px;}
.ann-search input{border:none; outline:none; font:inherit; font-size:13px; width:100%; background:none;}
.ann-search .material-symbols-outlined{font-size:18px; color:var(--text-secondary);}
.ann-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:14px;}
.ann-card{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-card); box-shadow:var(--shadow-sm); padding:16px; cursor:pointer; transition:box-shadow .16s, transform .16s;}
.ann-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.ann-card .top{display:flex; align-items:center; gap:11px; margin-bottom:10px;}
.ann-card .av{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; font-size:13px; flex:0 0 40px;}
.ann-card b{font-size:13.5px; display:block;}
.ann-card .top small{font-size:11.5px; color:var(--text-secondary);}
.ann-card p{font-size:12px; color:var(--text-secondary); line-height:1.55; margin-bottom:10px; min-height:37px;}
.ann-card .meta{display:flex; flex-wrap:wrap; gap:5px;}
.ann-card .meta em{font-style:normal; font-size:10.5px; font-weight:600; background:#F0F3F9; border-radius:var(--r-pill); padding:3px 8px; color:var(--text-secondary);}

/* ============ Pré-remplissage wizard ============ */
.pref-banner{display:flex; align-items:center; gap:10px; background:#E6F0FF; border:1px solid #C9DCFF; border-radius:var(--r-card); padding:11px 14px; font-size:12.5px; margin-bottom:16px;}
.pref-banner .material-symbols-outlined{color:var(--primary); font-size:19px;}
.pref-banner b{color:var(--primary);}
.fld.pref .control{border-color:#9DBEFF; background:#F5F9FF;}
.fld.pref label::after{content:"auto"; margin-left:7px; font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--primary); background:#E6F0FF; border-radius:var(--r-pill); padding:1px 6px; vertical-align:1px;}

/* ============ Tutoriel overlay ============ */
#tuto{position:fixed; inset:0; z-index:800; display:none;}
#tuto.on{display:block;}
.tuto-spot{position:fixed; border-radius:6px; box-shadow:0 0 0 9999px rgba(8,14,26,.62), 0 0 0 3px rgba(255,255,255,.35); transition:all .45s cubic-bezier(.3,.8,.3,1); pointer-events:none;}
.tuto-card{position:fixed; width:330px; background:#fff; border-radius:var(--r-card); box-shadow:var(--shadow-lg); padding:18px; transition:all .45s cubic-bezier(.3,.8,.3,1);}
.tuto-card .kick{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--primary); margin-bottom:6px;}
.tuto-card h3{font-size:15.5px; margin-bottom:6px;}
.tuto-card p{font-size:12.5px; color:var(--text-secondary); line-height:1.6; margin-bottom:14px;}
.tuto-card .row{display:flex; align-items:center; gap:8px;}
.tuto-card .dots{display:flex; gap:4px; margin-right:auto;}
.tuto-card .dots i{width:6px; height:6px; border-radius:50%; background:#E3E8F0;}
.tuto-card .dots i.on{background:var(--primary);}
.tuto-card .tb{border:none; background:#F0F3F9; font:inherit; font-size:12px; font-weight:600; padding:8px 13px; border-radius:var(--r-card); cursor:pointer;}
.tuto-card .tb.pri{background:var(--primary); color:#fff;}
.tuto-card .tb:hover{filter:brightness(.96);}
@media (max-width:1100px){ .ats-cols,.ats-kpis{grid-template-columns:repeat(2,1fr);} .ats-grid{grid-template-columns:1fr;} }

/* ============ Rail de sections du profil ============ */
.pf-body{display:grid; grid-template-columns:212px minmax(0,1fr); gap:16px; align-items:start;}
.pf-side{position:sticky; top:8px; background:#fff; border:1px solid #E9ECF2; border-radius:14px; padding:8px; display:flex; flex-direction:column; gap:3px;}
.pf-side .hd{font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#8A93A3; padding:8px 11px 6px;}
.pf-side button{display:flex; align-items:center; gap:9px; padding:10px 11px; border:none; background:none; border-radius:10px; font:inherit; font-size:12.5px; font-weight:600; color:var(--text-secondary); cursor:pointer; text-align:left; transition:background .15s, color .15s;}
.pf-side button:hover{background:#F4F6FA; color:var(--text-primary);}
.pf-side button.active{background:#E6F0FF; color:var(--primary);}
.pf-side button .material-symbols-outlined{font-size:17px;}
.pf-side button .n{margin-left:auto; font-size:10.5px; font-weight:700; color:#8A93A3; background:#F4F6FA; border-radius:999px; padding:1px 7px;}
.pf-side button.active .n{background:#fff; color:var(--primary);}
@media (max-width:1000px){ .pf-body{grid-template-columns:1fr;} .pf-side{position:static; flex-direction:row; overflow-x:auto;} .pf-side .hd{display:none;} }

/* ============ Labo de remplissage (onglet Espace) ============ */
.lab-wrap{padding:28px 32px 6px; max-width:1240px; margin:0 auto;}
.lab-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(212px,1fr)); gap:14px;}
@media (max-width:1100px){ .lab-grid{grid-template-columns:repeat(2,1fr);} }
.lab-card{background:#fff; border:1px solid var(--hairline); border-radius:14px; box-shadow:var(--shadow-sm); padding:18px; cursor:pointer; transition:transform .16s, box-shadow .16s; display:flex; flex-direction:column; gap:8px;}
.lab-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.lab-card .ic{width:38px; height:38px; border-radius:10px; display:grid; place-items:center;}
.lab-card .ic .material-symbols-outlined{font-size:21px;}
.lab-card b{font-size:14px;}
.lab-card p{font-size:12px; color:var(--text-secondary); line-height:1.5; flex:1;}
.lab-card .go{font-size:12px; font-weight:700; color:var(--primary); display:inline-flex; align-items:center; gap:5px;}
.labov{position:fixed; inset:0; z-index:650; background:var(--page); display:none; flex-direction:column;}
.labov.on{display:flex;}
.labov-top{flex:0 0 auto; display:flex; align-items:center; gap:14px; padding:14px 24px; background:#fff; border-bottom:1px solid var(--hairline);}
.labov-top .ttl{font-size:14px; font-weight:700;}
.labov-top .tag{font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--primary); background:#E6F0FF; border-radius:999px; padding:3px 10px;}
.labov-top .pr{flex:1; max-width:340px; margin-left:auto; display:flex; align-items:center; gap:10px; font-size:11.5px; font-weight:600; color:var(--text-secondary);}
.labov-top .pr .b{flex:1; height:6px; background:#EDF0F5; border-radius:999px; overflow:hidden;}
.labov-top .pr .b i{display:block; height:100%; background:var(--primary); border-radius:999px; transition:width .35s;}
.labov-body{flex:1; overflow:auto; display:flex; justify-content:center; padding:34px 24px;}
.lab-stage{width:min(660px,100%);}
.lab-nar{font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--primary); margin-bottom:10px;}
.lab-q{font-size:24px; font-weight:700; letter-spacing:-.4px; margin-bottom:6px;}
.lab-hint{font-size:13px; color:var(--text-secondary); margin-bottom:22px; line-height:1.55;}
.lab-input{width:100%; font:inherit; font-size:17px; padding:14px 16px; border:1.5px solid var(--hairline); border-radius:10px; outline:none; background:#fff;}
.lab-input:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,70,254,.12);}
.lab-opts{display:flex; flex-wrap:wrap; gap:10px;}
.lab-opt{border:1.5px solid var(--hairline); background:#fff; border-radius:10px; padding:13px 18px; font:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:all .15s;}
.lab-opt:hover{border-color:var(--primary); color:var(--primary);}
.lab-opt.sel{border-color:var(--primary); background:#E6F0FF; color:var(--primary);}
.lab-known{display:flex; flex-direction:column; gap:8px; margin-bottom:22px;}
.lab-known .kn{display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--hairline); border-radius:10px; padding:11px 14px; font-size:13px;}
.lab-known .kn .material-symbols-outlined{font-size:17px; color:#2E7D32;}
.lab-known .kn b{margin-left:auto;}
.lab-nav{display:flex; align-items:center; gap:10px; margin-top:26px;}
.lab-nav .sp{flex:1;}
.lab-enter{font-size:11.5px; color:var(--text-secondary);}
.chp{display:flex; gap:6px; margin-bottom:26px;}
.chp .c{flex:1; height:5px; border-radius:999px; background:#E3E8F0;}
.chp .c.on{background:var(--primary);}
.chp .c.done{background:#9DBEFF;}
.lab-page{background:#fff; border:1px solid var(--hairline); border-radius:14px; padding:26px; box-shadow:var(--shadow-sm);}
.lab-page .fld{margin-bottom:15px;}
.lab-page .fld label{display:block; font-size:11.5px; font-weight:600; color:var(--text-secondary); margin-bottom:5px;}
.lab-sumline{display:flex; align-items:center; gap:9px; padding:9px 0; border-bottom:1px solid #F0F3F9; font-size:13px;}
.lab-sumline .material-symbols-outlined{font-size:16px; color:#2E7D32;}
.lab-sumline b{margin-left:auto;}
.ck-head{position:sticky; top:-34px; z-index:5; background:var(--page); padding:6px 0 12px; margin-bottom:6px;}
.ck-item{background:#fff; border:1px solid var(--hairline); border-radius:10px; margin-bottom:8px; overflow:hidden; transition:border-color .15s;}
.ck-item.open{border-color:var(--primary);}
.ck-row{display:flex; align-items:center; gap:11px; padding:13px 15px; cursor:pointer; font-size:13.5px;}
.ck-row .material-symbols-outlined{font-size:19px; color:#C6CBD6;}
.ck-item.done .ck-row .material-symbols-outlined{color:#2E7D32;}
.ck-row .val{margin-left:auto; font-weight:600; color:var(--text-secondary); display:flex; align-items:center; gap:7px;}
.ck-row .auto{font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--primary); background:#E6F0FF; border-radius:999px; padding:2px 7px;}
.ck-edit{padding:0 15px 14px; display:flex; gap:9px;}
.cv-chat{display:flex; flex-direction:column; gap:12px; padding-bottom:90px;}
.msg{max-width:78%; padding:12px 15px; border-radius:14px; font-size:13.5px; line-height:1.5; animation:tlCardIn .3s both;}
.msg.flow{background:#fff; border:1px solid var(--hairline); border-bottom-left-radius:4px; align-self:flex-start;}
.msg.me{background:var(--primary); color:#fff; border-bottom-right-radius:4px; align-self:flex-end;}
.msg .mini-opts{display:flex; flex-wrap:wrap; gap:7px; margin-top:9px;}
.msg .mini-opts button{border:1.5px solid var(--hairline); background:#fff; border-radius:999px; padding:7px 13px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;}
.msg .mini-opts button:hover{border-color:var(--primary); color:var(--primary);}
.chat-bar{position:fixed; left:0; right:0; bottom:0; display:flex; justify-content:center; padding:14px 24px; background:linear-gradient(transparent, var(--page) 40%);}
.chat-bar .in{width:min(660px,100%); display:flex; gap:9px; background:#fff; border:1.5px solid var(--hairline); border-radius:12px; padding:8px 8px 8px 16px; box-shadow:var(--shadow-md);}
.chat-bar input{flex:1; border:none; outline:none; font:inherit; font-size:14px; background:none;}

/* --- E · La synthèse --- */
.dep{background:#fff; border:1.5px dashed #C9D2E0; border-radius:14px; padding:16px; margin-bottom:14px; transition:border-color .2s;}
.dep:focus-within{border-color:var(--primary);}
.dep textarea{width:100%; border:none; outline:none; font:inherit; font-size:14px; resize:vertical; min-height:56px; background:none;}
.dep .dep-foot{display:flex; align-items:center; gap:10px; margin-top:8px;}
.dep .dep-hint{font-size:11.5px; color:var(--text-secondary);}
.sug-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;}
.sug{display:inline-flex; align-items:center; gap:8px; background:#E6F0FF; border:1px solid #C9DCFF; border-radius:999px; padding:6px 8px 6px 13px; font-size:12.5px; animation:tlCardIn .25s both;}
.sug b{color:var(--primary);}
.sug button{border:none; width:24px; height:24px; border-radius:50%; cursor:pointer; display:grid; place-items:center; font-size:13px;}
.sug .ok{background:var(--primary); color:#fff;} .sug .no{background:#fff; color:var(--text-secondary);}
.sy-sec{background:#fff; border:1px solid var(--hairline); border-radius:12px; margin-bottom:9px; overflow:hidden;}
.sy-h{display:flex; align-items:center; gap:11px; padding:13px 16px; cursor:pointer; font-size:13.5px; font-weight:700;}
.sy-h .material-symbols-outlined{font-size:18px; color:var(--primary);}
.sy-h .jg{margin-left:auto; display:flex; align-items:center; gap:9px; font-size:11.5px; font-weight:600; color:var(--text-secondary);}
.sy-h .jg .b{width:70px; height:5px; background:#EDF0F5; border-radius:999px; overflow:hidden;}
.sy-h .jg .b i{display:block; height:100%; background:var(--primary); transition:width .3s;}
.sy-h .jg .material-symbols-outlined{color:#C6CBD6; font-size:19px; transition:transform .2s;}
.sy-sec.open .sy-h .jg .material-symbols-outlined{transform:rotate(180deg);}
.sy-sec.full .sy-h .jg .b i{background:#2E7D32;}
.sy-b{padding:2px 16px 13px; border-top:1px solid #F0F3F9;}
.sy-fld{display:flex; align-items:center; gap:10px; padding:8px 0;}
.sy-fld label{flex:0 0 165px; font-size:12px; font-weight:600; color:var(--text-secondary);}
.sy-fld .lab-input{font-size:13.5px; padding:9px 12px;}
.sy-done{font-size:11.5px; color:#2E7D32; font-weight:600; padding:8px 0 2px; cursor:pointer; display:flex; align-items:center; gap:6px;}
.sy-done .material-symbols-outlined{font-size:15px;}
.gap-card{background:#16181D; color:#E7ECF5; border-radius:14px; padding:22px 24px; margin-top:16px; font-size:15.5px; line-height:2.05;}
.gap-card .gt{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#5096FF; display:block; margin-bottom:8px; line-height:1.4;}
.gap{display:inline-block; padding:0 8px; border-radius:6px; cursor:pointer; font-weight:700; transition:background .15s;}
.gap.full{background:rgba(255,255,255,.1); color:#fff;}
.gap.full:hover{background:rgba(255,255,255,.2);}
.gap.hole{background:#0046FE; color:#fff; min-width:74px; text-align:center;}
.gap.hole:hover{filter:brightness(1.15);}

/* ============ Notifications ============ */
.nf-badge{position:absolute; top:5px; right:5px; min-width:15px; height:15px; padding:0 4px; border-radius:999px; background:#F44336; color:#fff; font-size:9.5px; font-weight:700; display:grid; place-items:center; border:2px solid #fff;}
.nf-badge:empty{display:none;}
#notif-pop{position:fixed; top:64px; right:16px; z-index:400; width:372px; max-height:70vh; overflow:auto; background:#fff; border:1px solid var(--hairline); border-radius:12px; box-shadow:var(--shadow-lg); display:none; padding:8px;}
#notif-pop.on{display:block;}
#notif-pop .np-h{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-secondary); padding:8px 10px 6px;}
.nf-item{display:flex; align-items:flex-start; gap:11px; padding:11px 10px; border-radius:9px; cursor:pointer; transition:background .13s;}
.nf-item:hover{background:#F4F6FA;}
.nf-item .ic{width:32px; height:32px; border-radius:9px; display:grid; place-items:center; flex:0 0 32px;}
.nf-item .ic .material-symbols-outlined{font-size:18px;}
.nf-item b{font-size:12.5px; display:block; line-height:1.35;}
.nf-item small{font-size:11.5px; color:var(--text-secondary); line-height:1.4; display:block;}
/* l'ecran de validation dit quand on ne peut que lire, ou qu'on tranche a la place d'un autre */
.vv-lecture, .vv-alaplace{display:inline-flex; align-items:center; gap:7px; margin-right:auto;
  font-size:12.5px; line-height:1.4; color:var(--text-secondary);}
.vv-lecture .material-symbols-outlined{font-size:17px; color:#8A93A3;}
.vv-alaplace{color:#9A5B00;}
.vv-alaplace .material-symbols-outlined{font-size:17px;}
/* une fiche restee sur une etape que le workflow publie ne connait plus */
.fcard .fc-hors{display:flex; align-items:center; gap:6px; margin:0 12px 11px;
  padding:6px 9px; border-radius:7px; background:#FFF4E2; color:#9A5B00;
  font-size:11px; font-weight:600; line-height:1.3;}
.fcard .fc-hors .material-symbols-outlined{font-size:15px;}
/* une ligne qui n'a pas su trouver son destinataire le dit, en clair : c'est
   une question de referentiel, pas un detail d'affichage */
.nf-item small.nf-flou{margin-top:4px; color:#B26B00; font-size:11px; font-weight:600;
  display:inline-flex; align-items:center; gap:5px;}
.nf-item small.nf-flou::before{content:""; width:5px; height:5px; border-radius:50%;
  background:#E8A33D; flex:none;}
.nf-item .tm{margin-left:auto; flex:0 0 auto; font-size:10.5px; color:#8A93A3; padding-top:2px;}
.nf-item .dot-un{width:7px; height:7px; border-radius:50%; background:var(--primary); flex:0 0 7px; margin-top:6px;}
.nf-item.read .dot-un{background:transparent;}
.nf-item.read b{font-weight:600; color:var(--text-secondary);}
.nf-feed{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-card); box-shadow:var(--shadow-sm); padding:6px 10px; margin-bottom:6px;}
.nf-feed .nf-item{border-bottom:1px solid #F0F3F9; border-radius:0; padding:13px 8px;}
.nf-feed .nf-item:last-child{border-bottom:none;}
.nf-act{flex:0 0 auto; margin-left:8px; align-self:center;}
.nf-act .btn-pri{padding:8px 13px; font-size:12px;}
/* les deux familles qui demandent une action, tenues par un filet de couleur */
.nf-item.act-val{border-left:3px solid var(--primary);}
.nf-item.act-fin{border-left:3px solid #F9A825; background:rgba(249,168,37,.05);}
/* une demande en pause porte son filet, comme les deux autres familles :
   nfAccent() posait deja la classe, il lui manquait sa regle */
.nf-item.act-pause{border-left:3px solid #C62828; background:rgba(198,40,40,.045);}
.nf-item.act-pause:hover{background:rgba(198,40,40,.09);}
.nf-item.act-pause .dot-un{background:#C62828;}
.nf-item.act-fin:hover{background:rgba(249,168,37,.11);}
.nf-item.act-fin .dot-un{background:#F9A825;}
.nf-feed .nf-item.act-val, .nf-feed .nf-item.act-fin, .nf-feed .nf-item.act-pause{padding-left:11px;}
.nf-act .btn-fin{display:inline-flex; align-items:center; gap:6px; border:1px solid #F0C98A;
  background:#FFFBF3; color:#B08A2A; border-radius:var(--r-ctrl); cursor:pointer;
  font:600 12px Inter,sans-serif; padding:8px 13px;}
.nf-act .btn-fin:hover{border-color:#B08A2A; background:#FFF6E6;}
/* abandonner : discret a cote de « Reprendre », franc quand on le vise */
.nf-act .btn-jeter{width:32px; height:32px; flex:none; border:1px solid transparent;
  background:none; color:var(--text-tertiary); border-radius:var(--r-ctrl);
  cursor:pointer; display:grid; place-items:center; margin-right:5px;}
.nf-act .btn-jeter:hover{color:#C62828; border-color:#F0BABA; background:#FEF4F4;}
:root[data-theme="dark"] .nf-act .btn-jeter:hover{background:#3A1E1E; border-color:#6B2E2E;}
/* une demande a finir n'est pas encore un dossier : son cadre le dit */
.tl-ensemble{display:block; font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:#0046FE; margin-top:2px;}
.fcard.brouillon{border-style:dashed; border-color:#F0C98A; background:#FFFDF8; position:relative;}
.fcard.brouillon .fc-x{position:absolute; top:6px; right:6px; width:24px; height:24px; border:none;
  border-radius:6px; background:none; color:var(--text-tertiary); cursor:pointer; display:grid;
  place-items:center; z-index:2;}
.fcard.brouillon .fc-x:hover{color:#C62828; background:rgba(198,40,40,.1);}
.fcard.brouillon .fc-x .material-symbols-outlined{font-size:15px;}
.fcard.brouillon:hover{border-color:#B08A2A;}
:root[data-theme="dark"] .fcard.brouillon{background:#2A2313; border-color:#5A4A22;}

/* ============ Menu avatar ============ */
button.me{border:none; cursor:pointer; font:inherit; padding:0;}
#me-pop{position:fixed; top:60px; right:14px; z-index:400; width:250px; background:#fff; border:1px solid var(--hairline); border-radius:12px; box-shadow:var(--shadow-lg); display:none; padding:7px; overflow:hidden;}
#me-pop.on{display:block;}
#me-pop .mp-head{display:flex; align-items:center; gap:11px; padding:11px 10px 12px;}
#me-pop .mp-av{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; font-size:14px; flex:0 0 40px; background:linear-gradient(135deg,#0046FE,#5A3FD6);}
#me-pop .mp-head b{font-size:13.5px; display:block;}
#me-pop .mp-head small{font-size:11.5px; color:var(--text-secondary);}
#me-pop .mp-sep{height:1px; background:var(--hairline); margin:4px 2px;}
#me-pop button{display:flex; align-items:center; gap:11px; width:100%; padding:10px 11px; border:none; background:none; border-radius:8px; font:inherit; font-size:13px; font-weight:500; color:var(--text-primary); cursor:pointer; text-align:left; transition:background .12s;}
#me-pop button:hover{background:#F4F6FA;}
#me-pop button .material-symbols-outlined{font-size:19px; color:var(--text-secondary);}
#me-pop button.danger{color:#C4362B;} #me-pop button.danger .material-symbols-outlined{color:#C4362B;}

/* ============ Paramètres ============ */
.set-row{display:flex; align-items:center; gap:12px; padding:14px 2px; border-bottom:1px solid #F0F3F9;}
.set-row:last-child{border-bottom:none;}
.set-row .si{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:#EEF1F7; color:#5B6270; flex:0 0 34px;}
.set-row .si .material-symbols-outlined{font-size:19px;}
.set-row .sb{flex:1;} .set-row .sb b{font-size:13px; display:block;} .set-row .sb small{font-size:11.5px; color:var(--text-secondary);}
.tgl{width:42px; height:24px; border-radius:999px; background:#D7DCE5; border:none; cursor:pointer; position:relative; transition:background .18s; flex:0 0 42px;}
.tgl::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .18s; box-shadow:0 1px 3px rgba(0,0,0,.2);}
.tgl.on{background:var(--primary);} .tgl.on::after{left:21px;}
.set-seg{display:flex; gap:4px; background:#F0F3F9; border-radius:9px; padding:3px;}
.set-seg button{border:none; background:none; font:inherit; font-size:12px; font-weight:600; padding:6px 12px; border-radius:7px; cursor:pointer; color:var(--text-secondary);}
.set-seg button.on{background:#fff; color:var(--primary); box-shadow:var(--shadow-sm);}
.set-styles{display:flex; flex-direction:column; gap:8px; width:100%; margin-top:10px;}
.stopt{text-align:left; border:1.5px solid var(--hairline); background:var(--surface); border-radius:10px; padding:10px 12px; cursor:pointer; font:inherit; transition:border-color .15s, background .15s;}
.stopt b{font-size:13px; display:block; color:var(--text-primary);}
.stopt small{font-size:11.5px; color:var(--text-secondary); display:block; margin-top:2px; line-height:1.4;}
.stopt:hover{border-color:color-mix(in srgb, var(--primary) 40%, var(--hairline));}
.stopt.on{border-color:var(--primary); background:color-mix(in srgb, var(--primary) 6%, var(--surface));}
.stopt.on b{color:var(--primary);}

/* ============ Écran déconnexion ============ */
#logout-screen{position:fixed; inset:0; z-index:900; background:var(--page); display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px;}
#logout-screen.on{display:flex; animation:tlCardIn .4s both;}
#logout-screen h2{font-size:24px; margin-bottom:8px;}
#logout-screen p{font-size:13.5px; color:var(--text-secondary); max-width:340px; line-height:1.6; margin-bottom:24px;}

/* ============ Visualisateur de validation ============ */
.vv-head{display:flex; align-items:center; gap:12px; margin-bottom:4px;}
.vv-head h3{font-size:17px;}
.vv-chain{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:14px 0 18px;}
.vv-step{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; padding:6px 11px; border-radius:999px; border:1px solid var(--hairline); color:var(--text-secondary); background:#fff;}
.vv-step .material-symbols-outlined{font-size:14px;}
.vv-step.done{border-color:#CDE8CE; background:#F0FAF1; color:#2E7D32;}
.vv-step.cur{border-color:var(--primary); background:#E6F0FF; color:var(--primary); box-shadow:0 0 0 3px rgba(0,70,254,.1);}
.vv-arrow{color:#C6CBD6; font-size:13px;}
.vv-group{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-secondary); margin:16px 0 8px;}
.vv-note{width:100%; min-height:64px; resize:vertical; background:#F7F9FC; border:1px solid var(--hairline); border-radius:8px; padding:10px 12px; font:inherit; font-size:13px; outline:none;}
.vv-note:focus{border-color:var(--primary);}
/* le bouton secondaire : il servait deja (Fermer, Ouvrir le ticket) sans avoir de style */
.btn-sec{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--hairline); background:var(--surface); color:var(--text-primary); font:inherit; font-size:13px; font-weight:600; padding:10px 16px; border-radius:var(--r-card); cursor:pointer;}
.btn-sec:hover{border-color:#cfd6e4;}
.btn-danger{display:inline-flex; align-items:center; gap:7px; border:1px solid #F6C6C2; background:#FDF1F0; color:#C4362B; font:inherit; font-size:13px; font-weight:600; padding:10px 16px; border-radius:var(--r-card); cursor:pointer;}
.btn-danger:hover{background:#FBE4E2;}

/* ---- visualisateur v2 : DA Suivi ---- */
.vv-panel{width:min(760px,94vw)!important;}
.vv-miss{display:flex; align-items:center; gap:9px; background:#FFF8E1; border:1px solid #F3E3B2; border-radius:11px; padding:11px 14px; font-size:12.5px; margin:16px 0 4px; color:#8A5B00;}
.vv-miss.ok{background:#F0FAF1; border-color:#CDE8CE; color:#2E7D32;}
.vv-miss .material-symbols-outlined{font-size:19px; color:#F9A825;}
.vv-miss.ok .material-symbols-outlined{color:#2E7D32;}
.vv-miss b{color:inherit;}
.vv-block-h{display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-secondary); margin:22px 0 12px;}
.vv-block-h .material-symbols-outlined{font-size:16px; color:var(--primary);}
/* workflow vertical hiérarchisé */
.vv-flow{position:relative; margin-bottom:4px;}
.vv-wstep{display:flex; align-items:flex-start; gap:13px; padding:7px 0; position:relative;}
.vv-wstep::before{content:""; position:absolute; left:17px; top:44px; height:calc(100% - 22px); width:2px; background:#E7EAF0;}
.vv-wstep:last-child::before{display:none;}
.vv-wstep.done::before{background:#BFE3C1;}
.vv-wnode{width:36px; height:36px; flex:0 0 36px; border-radius:11px; display:grid; place-items:center; background:#fff; border:1.5px solid #E3E6EC; color:#9AA3B2; position:relative; z-index:1; transition:all .2s;}
.vv-wnode .material-symbols-outlined{font-size:20px;}
.vv-wstep.done .vv-wnode{background:#E7F4E8; border-color:#BFE3C1; color:#2E7D32;}
.vv-wstep.cur .vv-wnode{background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 0 0 4px rgba(0,70,254,.14);}
.vv-wbody{flex:1; padding-top:2px; min-width:0;}
.vv-wbody .rl{font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.vv-wstep.todo .vv-wbody .rl{color:var(--text-secondary); font-weight:600;}
.vv-wbody .cur-tag{font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--primary); background:#E6F0FF; border-radius:999px; padding:2px 8px;}
.vv-wbody .done-tag{font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#2E7D32; background:#E7F4E8; border-radius:999px; padding:2px 8px;}
.vv-wbody .ac{font-size:11.5px; color:var(--text-secondary); margin-top:1px;}
.vv-wbody .who{display:inline-flex; align-items:center; gap:6px; margin-top:6px; font-size:11.5px; font-weight:600; color:#3A4150; background:#F4F6FA; border:1px solid #EAEDF3; border-radius:999px; padding:3px 11px 3px 3px;}
.vv-wbody .who .av{width:21px; height:21px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:8.5px; font-weight:700;}
/* sections de champs */
.vv-sec{margin-bottom:4px;}
.vv-sech{display:flex; align-items:center; gap:9px; margin:18px 0 9px; font-size:13px; font-weight:700;}
.vv-sech .sic{width:28px; height:28px; border-radius:8px; display:grid; place-items:center; flex:0 0 28px;}
.vv-sech .sic .material-symbols-outlined{font-size:17px;}
.vv-sech .cnt{margin-left:auto; font-size:11px; font-weight:700; color:var(--text-secondary); background:#F0F3F9; border-radius:999px; padding:2px 10px;}
.vv-fields{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.vv-field{display:flex; align-items:center; gap:10px; padding:8px 11px; border:1px solid var(--hairline); border-radius:10px; background:#fff; transition:border-color .15s, background .15s;}
.vv-field.wide{grid-column:1/-1;}
.vv-field.empty{border-color:#F3D9A0; background:#FFFBF2;}
.vv-field:focus-within{border-color:var(--primary);}
.vv-field .vf-ic{width:28px; height:28px; flex:0 0 28px; border-radius:8px; display:grid; place-items:center; background:#EEF1F7; color:#5B6270;}
.vv-field .vf-ic .material-symbols-outlined{font-size:16px;}
.vv-field.empty .vf-ic{background:#FFF1D6; color:#C4710B;}
.vv-field .vf-body{flex:1; min-width:0;}
.vv-field .vf-body label{display:block; font-size:10.5px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.02em;}
.vv-field .vf-in{width:100%; border:none; background:none; outline:none; font:inherit; font-size:13px; font-weight:600; color:var(--text-primary); padding:1px 0;}
.vv-field .vf-in::placeholder{color:#C4710B; font-weight:500; font-style:italic;}
.vv-field.piece .vf-piece{display:flex; align-items:center; gap:8px; margin-top:2px;}
.vv-field.piece .vf-nom{flex:1; min-width:0; font-size:12.5px; font-weight:600;
  color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.vv-field.piece.empty .vf-nom, .vv-field.piece.facultative .vf-nom{
  font-weight:400; color:var(--text-tertiary); font-style:italic;}
.vv-field.piece .vf-dep{display:inline-flex; align-items:center; gap:5px; flex:none;
  border:1px solid var(--hairline); background:var(--surface); border-radius:var(--r-ctrl);
  font:600 11px Inter,sans-serif; color:var(--text-secondary); padding:5px 10px; cursor:pointer;}
.vv-field.piece .vf-dep:hover{color:var(--primary); border-color:var(--primary);}
.vv-field.piece .vf-dep .material-symbols-outlined{font-size:14px;}
.vf-opt{margin-left:7px; font-size:9px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--text-tertiary); background:var(--page);
  border-radius:999px; padding:1px 6px;}
.vf-src{margin-left:7px; font-size:9px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--primary); background:rgba(0,70,254,.10);
  border-radius:999px; padding:1px 6px;}
.vv-field.ro{background:#FAFBFD;}
.vv-field.ro .vf-val{font-size:13px; font-weight:600; color:var(--text-primary);}
.vv-field select.vf-in{cursor:pointer;}

/* ==================================================================
   THÈMES (clair/sombre) & STYLES (mixte/cegid/flow)
   ================================================================== */
:root{ --surface-2:#EFF2F7; --text-tertiary:#8A93A3; }

/* ---------- THÈME SOMBRE : bascule des tokens ---------- */
:root[data-theme="dark"]{
  --primary:#4E86FF; --info:#4E86FF;
  --success:#46C36B; --warning:#F5B23D; --error:#FF6B5E;
  --violet:#9B87F5; --green:#5FD07E; --blue2:#5AA0FF; --orange:#FF7A54;
  --page:#0F1114; --surface:#1A1D23; --surface-2:#23272F;
  --text-primary:#E7EAF0; --text-secondary:#9BA3B2; --text-tertiary:#7E8695; --text-quaternary:#5E6675;
  --hairline:#2A2F38;
  --tint-blue:rgba(78,134,255,.16); --on-blue:#7FA8FF;
  --tint-green:rgba(70,195,107,.15); --on-green:#6FD98C;
  --tint-red:rgba(255,107,94,.16); --on-red:#FF8C82;
  --tint-amber:rgba(245,178,61,.16); --on-amber:#F0B860;
  --tint-violet:rgba(155,135,245,.18); --on-violet:#B7A6FF;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --shadow-md:0 4px 14px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);
  --shadow-lg:0 18px 50px rgba(0,0,0,.6), 0 6px 16px rgba(0,0,0,.4);
  color-scheme:dark;
}
:root[data-theme="dark"] body{ background:var(--page); color:var(--text-primary); }
/* appbar + chrome hardcodés */
:root[data-theme="dark"] #appbar{ background:rgba(20,22,27,.82); border-bottom-color:rgba(255,255,255,.07); }
:root[data-theme="dark"] .search{ background:var(--surface-2); }
:root[data-theme="dark"] .me{ }
:root[data-theme="dark"] .tuto-btn{ background:var(--surface); border-color:var(--hairline); color:var(--text-primary); }
:root[data-theme="dark"] .set-row{ border-bottom-color:var(--hairline); }
:root[data-theme="dark"] .set-row .si{ background:var(--surface-2); color:var(--text-secondary); }
:root[data-theme="dark"] .set-seg{ background:var(--surface-2); }
:root[data-theme="dark"] .set-seg button.on{ background:var(--surface); color:var(--primary); }
:root[data-theme="dark"] .stopt{ background:var(--surface); }
:root[data-theme="dark"] .stopt.on{ background:var(--tint-blue); }
/* fonds de vues blancs */
:root[data-theme="dark"] #view-board, :root[data-theme="dark"] #view-timeline,
:root[data-theme="dark"] #view-profile{ background:var(--page); }
:root[data-theme="dark"] #view-canvas{ background:#0B0D10; }
/* cartes & panneaux */
:root[data-theme="dark"] .fcard, :root[data-theme="dark"] .bt, :root[data-theme="dark"] .pf-card,
:root[data-theme="dark"] .pf-kpi, :root[data-theme="dark"] .pf-banner, :root[data-theme="dark"] .kpi,
:root[data-theme="dark"] .lab-card, :root[data-theme="dark"] .nb-card, :root[data-theme="dark"] .side-card,
:root[data-theme="dark"] .cand-item, :root[data-theme="dark"] .prop-card, :root[data-theme="dark"] .ann-card,
:root[data-theme="dark"] .cmp-scroll, :root[data-theme="dark"] .sy-sec, :root[data-theme="dark"] .vv-field,
:root[data-theme="dark"] .vv-step, :root[data-theme="dark"] .vv-wnode, :root[data-theme="dark"] .msg.flow,
:root[data-theme="dark"] .lab-page, :root[data-theme="dark"] .ck-item, :root[data-theme="dark"] .dep,
:root[data-theme="dark"] .pf-side, :root[data-theme="dark"] .log-card, :root[data-theme="dark"] .table-card,
:root[data-theme="dark"] .nf-feed, :root[data-theme="dark"] .type-card, :root[data-theme="dark"] .collap,
:root[data-theme="dark"] .fc-icon, :root[data-theme="dark"] .fpill, :root[data-theme="dark"] .pp,
:root[data-theme="dark"] .fov, :root[data-theme="dark"] .postit{ background:var(--surface); border-color:var(--hairline); }
:root[data-theme="dark"] #fov, :root[data-theme="dark"] #cov, :root[data-theme="dark"] #notif-pop,
:root[data-theme="dark"] #me-pop, :root[data-theme="dark"] #ctxmenu, :root[data-theme="dark"] #cv-context,
:root[data-theme="dark"] #cv-types, :root[data-theme="dark"] #cv-zoom, :root[data-theme="dark"] .tuto-card,
:root[data-theme="dark"] .xov-panel, :root[data-theme="dark"] .cv-circle, :root[data-theme="dark"] .cv-node.connector,
:root[data-theme="dark"] .lab-stage .dep, :root[data-theme="dark"] .chat-bar .in{ background:var(--surface); border-color:var(--hairline); color:var(--text-primary); }
/* surfaces sombres intentionnelles (#16181D) -> plus claires que la page */
:root[data-theme="dark"] .pf-remu, :root[data-theme="dark"] .bt.dark, :root[data-theme="dark"] .gap-card,
:root[data-theme="dark"] #cv-toolbar{ background:var(--surface-2); border-color:var(--hairline); color:var(--text-primary); }
/* zones surélevées / hovers / pistes de barres */
:root[data-theme="dark"] thead th, :root[data-theme="dark"] .form-foot, :root[data-theme="dark"] .cmp .lab,
:root[data-theme="dark"] .vv-field.ro, :root[data-theme="dark"] .ats-col, :root[data-theme="dark"] .fcard.collapsed .fc-headbox,
:root[data-theme="dark"] .vv-wbody .who, :root[data-theme="dark"] .vv-field .vf-ic, :root[data-theme="dark"] .add-cand{ background:var(--surface-2); }
:root[data-theme="dark"] tbody tr:hover, :root[data-theme="dark"] .nf-item:hover, :root[data-theme="dark"] #me-pop button:hover,
:root[data-theme="dark"] .pf-side button:hover, :root[data-theme="dark"] .fpill:hover, :root[data-theme="dark"] #ctxmenu button:hover,
:root[data-theme="dark"] .ann-card:hover, :root[data-theme="dark"] .hf-quick:hover{ background:var(--surface-2); }
:root[data-theme="dark"] .fc-bar, :root[data-theme="dark"] .fov-bar, :root[data-theme="dark"] .skb .bar, :root[data-theme="dark"] .p-bar,
:root[data-theme="dark"] .sec-bar .b, :root[data-theme="dark"] .skill-line .lv, :root[data-theme="dark"] .sy-h .jg .b{ background:var(--surface-2); }
/* inputs */
:root[data-theme="dark"] .control, :root[data-theme="dark"] .seg .seg-opt, :root[data-theme="dark"] .lab-input,
:root[data-theme="dark"] .lab-opt, :root[data-theme="dark"] .fp-in, :root[data-theme="dark"] .vv-note,
:root[data-theme="dark"] .ann-search, :root[data-theme="dark"] textarea.control, :root[data-theme="dark"] #panel input,
:root[data-theme="dark"] #panel textarea{ background:var(--surface-2); border-color:var(--hairline); color:var(--text-primary); }
:root[data-theme="dark"] .control::placeholder, :root[data-theme="dark"] .lab-input::placeholder{ color:var(--text-quaternary); }
:root[data-theme="dark"] select.control{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239BA3B2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); }
/* textes hardcodés */
:root[data-theme="dark"] .fc-title, :root[data-theme="dark"] .fc-count, :root[data-theme="dark"] .pf-meta .mv,
:root[data-theme="dark"] #ctxmenu button, :root[data-theme="dark"] #cv-context, :root[data-theme="dark"] .fp-in{ color:var(--text-primary); }
:root[data-theme="dark"] .fc-step .st-title, :root[data-theme="dark"] .pp .pnm, :root[data-theme="dark"] .pf-chip,
:root[data-theme="dark"] .vv-wbody .who, :root[data-theme="dark"] #cv-zoom button{ color:var(--text-secondary); }
:root[data-theme="dark"] .fc-title small, :root[data-theme="dark"] .fc-pct, :root[data-theme="dark"] .bt-sub,
:root[data-theme="dark"] .pf-sub, :root[data-theme="dark"] .skb .lv, :root[data-theme="dark"] .nf-item .tm,
:root[data-theme="dark"] .pf-side .hd{ color:var(--text-tertiary); }
/* hairlines de connecteurs / séparateurs */
:root[data-theme="dark"] .fc-tree::before, :root[data-theme="dark"] .fc-step::before, :root[data-theme="dark"] .pf-hist::before,
:root[data-theme="dark"] .vv-wstep::before, :root[data-theme="dark"] .tree::before, :root[data-theme="dark"] .tree-item::before{ background:var(--hairline); }
:root[data-theme="dark"] .log-row, :root[data-theme="dark"] .nb-h, :root[data-theme="dark"] .nf-feed .nf-item,
:root[data-theme="dark"] .set-row, :root[data-theme="dark"] .sy-b{ border-bottom-color:var(--hairline); }
/* chips / badges sémantiques */
:root[data-theme="dark"] .pf-badge, :root[data-theme="dark"] .log-tag.nouveau, :root[data-theme="dark"] .pf-side button.active,
:root[data-theme="dark"] .vv-step.cur, :root[data-theme="dark"] .section-head .count, :root[data-theme="dark"] .hf-colh .n{ background:var(--tint-blue); color:var(--on-blue); }
:root[data-theme="dark"] .pf-badge.green, :root[data-theme="dark"] .log-tag.amelioration, :root[data-theme="dark"] .bt-delta.up,
:root[data-theme="dark"] .vv-step.done, :root[data-theme="dark"] .cmp .best, :root[data-theme="dark"] .vv-miss.ok{ background:var(--tint-green); color:var(--on-green); }
:root[data-theme="dark"] .bt-delta.down, :root[data-theme="dark"] .btn-danger, :root[data-theme="dark"] .log-tag.correctif{ background:var(--tint-red); color:var(--on-red); border-color:transparent; }
:root[data-theme="dark"] .vv-miss, :root[data-theme="dark"] .vv-field.empty{ background:var(--tint-amber); color:var(--on-amber); border-color:transparent; }
:root[data-theme="dark"] .btn-gh{ background:var(--surface); border-color:var(--hairline); color:var(--text-primary); }
:root[data-theme="dark"] .tgl{ background:#3A4150; }
:root[data-theme="dark"] .sk{ background:linear-gradient(90deg,#20242B 25%,#2A2F38 50%,#20242B 75%); }
:root[data-theme="dark"] .pp .pav, :root[data-theme="dark"] .cf-avs .pav, :root[data-theme="dark"] .nf-badge{ border-color:var(--surface); }

/* ==================================================================
   STYLE CEGID — carré + vif (appliqué surtout au canvas & au suivi)
   ================================================================== */
:root[data-style="cegid"]{
  --r-card:3px; --r-ctrl:3px; --r-pill:3px; --r-chip:3px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.08), 0 1px 1px rgba(16,24,40,.04);
  --shadow-md:0 2px 6px rgba(16,24,40,.10), 0 6px 16px rgba(16,24,40,.07);
  --accent:var(--primary);
  --accent-tile:color-mix(in srgb, var(--accent) 14%, var(--surface));
}
:root[data-style="cegid"] .fcard{ --accent:var(--primary); border:1px solid var(--hairline); border-radius:var(--r-card); box-shadow:var(--shadow-sm); }
:root[data-style="cegid"] .fcard.collapsed .fc-headbox{ background:var(--accent-tile); border-radius:var(--r-ctrl); }
:root[data-style="cegid"] .fc-icon{ border:none; border-radius:var(--r-ctrl); background:var(--accent-tile); color:var(--accent); }
:root[data-style="cegid"] .fcard.collapsed .fc-icon{ background:var(--accent); color:#fff; }
:root[data-style="cegid"] .fc-tree{ padding-left:2px; }
:root[data-style="cegid"] .fc-tree::before, :root[data-style="cegid"] .fc-step::before{ display:none; }
:root[data-style="cegid"] .fc-step .st-ic{ border-radius:3px; }
:root[data-style="cegid"] .type-card::before{ display:none; }
:root[data-style="cegid"] .postit{ border-left:1px solid var(--hairline); }
:root[data-style="cegid"] .collap, :root[data-style="cegid"] .nf-feed .nf-item, :root[data-style="cegid"] .nf-item .ic,
:root[data-style="cegid"] .stopt, :root[data-style="cegid"] .sv-card>.cl-head, :root[data-style="cegid"] .sv-ic{ border-radius:3px; }
:root[data-style="cegid"] .fc-step.done .st-ic{ background:var(--success); }
:root[data-style="cegid"] .fc-step.issue .st-ic{ background:var(--error); }
:root[data-style="cegid"] .fc-step.contact .st-ic{ background:var(--warning); }
:root[data-style="cegid"] .fc-progress{ border-radius:var(--r-ctrl); }
:root[data-style="cegid"] .fc-send{ border-radius:var(--r-ctrl); background:var(--primary); }
:root[data-style="cegid"] .cv-node{ border-radius:var(--r-card); box-shadow:var(--shadow-sm); }
:root[data-style="cegid"] .cv-circle{ border-radius:var(--r-card); background:var(--surface); border:2px solid color-mix(in srgb, var(--primary) 30%, var(--hairline)); }
:root[data-style="cegid"] .cv-circle .nd-ic{ color:var(--primary); }
:root[data-style="cegid"] .cv-node.connector{ border-radius:var(--r-card); border:2px solid var(--hairline); }
:root[data-style="cegid"] .cv-node.notify{ border-radius:var(--r-card); }
:root[data-style="cegid"] .cv-square{ border-radius:var(--r-card); }
:root[data-style="cegid"] .cv-cond::before{ border-radius:var(--r-ctrl); }
:root[data-style="cegid"] .rb-label{ border-radius:var(--r-chip); }
:root[data-style="cegid"] #cv-context, :root[data-style="cegid"] #cv-toolbar, :root[data-style="cegid"] #cv-types{ border-radius:var(--r-card); }
:root[data-style="cegid"] .pill-select, :root[data-style="cegid"] .fpill, :root[data-style="cegid"] .pp,
:root[data-style="cegid"] .type-mini, :root[data-style="cegid"] .meta em, :root[data-style="cegid"] .chips-mini em,
:root[data-style="cegid"] .log-tag, :root[data-style="cegid"] .section-head .count, :root[data-style="cegid"] .ann-card .meta em{ border-radius:var(--r-chip); font-weight:700; }
:root[data-style="cegid"] .type-card, :root[data-style="cegid"] .lab-card, :root[data-style="cegid"] .ann-card,
:root[data-style="cegid"] .prop-card, :root[data-style="cegid"] .postit, :root[data-style="cegid"] .kpi{ border-radius:var(--r-card); }
:root[data-style="cegid"] .tc-icon, :root[data-style="cegid"] .lab-card .ic, :root[data-style="cegid"] .prop-card .ic,
:root[data-style="cegid"] .kpi .ic{ border-radius:var(--r-ctrl); }

/* ==================================================================
   STYLE FLOW — arrondi + pastilles + arborescence + repliable
   ================================================================== */
/* primitives réutilisables */
.pastille{ width:9px; height:9px; flex:0 0 9px; border-radius:50%; background:var(--pt,#8A93A3); box-shadow:0 0 0 3px color-mix(in srgb, var(--pt,#8A93A3) 16%, transparent); }
.pastille.lg{ width:11px; height:11px; flex-basis:11px; }
.pastille.p-info{ --pt:var(--primary); } .pastille.p-ok{ --pt:var(--success); }
.pastille.p-warn{ --pt:var(--warning); } .pastille.p-err{ --pt:var(--error); } .pastille.p-mut{ --pt:var(--text-tertiary); }
.pastille.pulse{ animation:nfp 1.6s ease-in-out infinite; }
@keyframes nfp{ 0%,100%{ box-shadow:0 0 0 2px color-mix(in srgb,var(--pt) 24%,transparent);} 50%{ box-shadow:0 0 0 6px color-mix(in srgb,var(--pt) 8%,transparent);} }
.tree{ position:relative; padding-left:24px; }
.tree::before{ content:""; position:absolute; left:15px; top:4px; bottom:10px; width:1.5px; background:var(--hairline); }
.tree-item{ position:relative; display:flex; align-items:center; gap:9px; padding:5px 0; font-size:12.5px; color:var(--text-secondary); }
.tree-item::before{ content:""; position:absolute; left:-9px; top:50%; transform:translateY(-50%); width:12px; height:1.5px; background:var(--hairline); }
.tree-item .st-ic{ width:18px; height:18px; flex:0 0 18px; border-radius:50%; display:grid; place-items:center; font-size:12px; background:var(--surface-2); color:var(--text-tertiary); font-variation-settings:'opsz' 20,'wght' 700,'FILL' 0,'GRAD' 0; }
.tree-item.done .st-ic{ background:var(--success); color:#fff; }
.tree-item.current{ font-weight:600; color:var(--text-primary); }
.tree-item.current .st-ic{ background:var(--primary); color:#fff; }
.tree-item.issue .st-ic{ background:var(--error); color:#fff; } .tree-item.issue{ color:var(--error); }
.collap{ border:1px solid var(--hairline); border-radius:12px; background:var(--surface); box-shadow:var(--shadow-sm); overflow:hidden; transition:box-shadow .2s, border-color .2s; }
.collap+.collap{ margin-top:8px; }
.collap:hover{ border-color:color-mix(in srgb, var(--primary) 30%, var(--hairline)); }
.collap>.cl-head{ display:flex; align-items:center; gap:9px; padding:11px 12px; cursor:pointer; user-select:none; min-width:0; }
.collap>.cl-head .cl-t{ flex:1; min-width:0; font-size:12.5px; font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.collap>.cl-head .cl-t small{ display:block; font-size:11px; font-weight:500; color:var(--text-tertiary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.collap>.cl-head .cl-tm{ flex:0 0 auto; font-size:10.5px; color:var(--text-tertiary); }
.collap>.cl-head .cl-chev{ flex:0 0 auto; margin-left:2px; color:var(--text-tertiary); font-size:20px; transition:transform .28s cubic-bezier(.2,.8,.3,1); }
.collap.open>.cl-head .cl-chev{ transform:rotate(90deg); }
.collap>.cl-body{ max-height:0; opacity:0; overflow:hidden; transition:max-height .34s cubic-bezier(.2,.8,.3,1), opacity .24s ease, padding .3s ease; padding:0 12px; }
.collap.open>.cl-body{ max-height:var(--cl-max,560px); opacity:1; padding:2px 12px 12px; }
.collap>.cl-body p{ font-size:12px; line-height:1.55; color:var(--text-secondary); margin-bottom:8px; }
/* reskin global sous flow */
:root[data-style="flow"]{ --r-card:14px; --r-ctrl:10px; }
:root[data-style="flow"] .table-card, :root[data-style="flow"] .nf-feed, :root[data-style="flow"] .log-card,
:root[data-style="flow"] .kpi, :root[data-style="flow"] .nb-card, :root[data-style="flow"] .side-card,
:root[data-style="flow"] .prop-card, :root[data-style="flow"] .cmp-scroll, :root[data-style="flow"] .ann-card,
:root[data-style="flow"] .ats-col, :root[data-style="flow"] .lab-card{ border-radius:16px; }
:root[data-style="flow"] .type-card{ border-radius:18px; box-shadow:var(--shadow-sm); }
:root[data-style="flow"] .type-card .tc-icon{ border-radius:50%; box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 9%, transparent); }
:root[data-style="flow"] .nf-feed .nf-item{ border-bottom:none; border:1px solid var(--hairline); border-radius:12px; margin-bottom:8px; }
:root[data-style="flow"] .nf-feed .nf-item:last-child{ margin-bottom:0; }
:root[data-style="flow"] .nf-item .ic{ border-radius:50%; }
:root[data-style="flow"] .kpi .ic, :root[data-style="flow"] .prop-card .ic, :root[data-style="flow"] .lab-card .ic{ border-radius:50%; }
:root[data-style="flow"] .postit{ border-radius:14px; }
:root[data-style="flow"] .p-bar, :root[data-style="flow"] .p-bar i{ border-radius:999px; }
:root[data-style="flow"] .ann-card .meta em, :root[data-style="flow"] .log-tag, :root[data-style="flow"] .type-mini{ border-radius:999px; }
/* board hub 4 colonnes */
#hub-flow{ display:none; }
:root[data-style="flow"] #view-hub .wrap{ display:none; }
:root[data-style="flow"] #hub-flow{ display:block; }
#hub-flow{ max-width:1460px; margin:0 auto; padding:30px 30px 80px; }
.hf-head{ margin-bottom:22px; }
.hf-head .eyebrow{ font-size:12px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--primary); }
.hf-head h1{ font-size:26px; font-weight:700; letter-spacing:-.6px; margin-top:6px; }
.hf-board{ display:grid; grid-template-columns:1.15fr 1fr 1fr 1.1fr; gap:18px; align-items:start; }
@media(max-width:1180px){ .hf-board{ grid-template-columns:1fr 1fr; } }
@media(max-width:720px){ .hf-board{ grid-template-columns:1fr; } }
.hf-col{ min-width:0; display:flex; flex-direction:column; gap:10px; }
.hf-colh{ display:flex; align-items:center; gap:8px; padding:2px 2px 4px; }
.hf-colh h2{ font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-secondary); }
.hf-colh .n{ margin-left:auto; font-size:11px; font-weight:600; color:var(--primary); background:color-mix(in srgb, var(--primary) 10%, transparent); padding:2px 9px; border-radius:999px; }
.hf-type{ display:flex; align-items:center; gap:12px; padding:13px 14px; background:var(--surface); border:1px solid var(--hairline); border-radius:14px; box-shadow:var(--shadow-sm); cursor:pointer; transition:transform .2s, box-shadow .2s, border-color .2s; }
.hf-type:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:transparent; }
.hf-type .ic{ width:40px; height:40px; flex:0 0 40px; border-radius:50%; display:grid; place-items:center; background:var(--accent-tint); color:var(--accent); box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 9%,transparent); }
.hf-type b{ font-size:14px; font-weight:600; display:block; } .hf-type small{ font-size:11.5px; color:var(--text-secondary); }
.hf-type .go{ margin-left:auto; color:var(--accent); font-size:20px; }
.hf-quick{ display:flex; align-items:center; gap:9px; padding:10px 12px; background:var(--surface-2); border:1px solid var(--hairline); border-radius:11px; font-size:12px; font-weight:600; color:var(--text-secondary); cursor:pointer; transition:background .15s; margin-top:4px; }
.hf-quick .material-symbols-outlined{ font-size:18px; color:var(--primary); }
.hf-mini-foot{ display:flex; align-items:center; gap:8px; font-size:11px; color:var(--text-secondary); margin-top:4px; }
.hf-mini-foot .pct{ margin-left:auto; font-weight:700; color:var(--text-primary); }

/* ==================================================================
   FAÇON SUIVI — colonnes titrées, ligne verticale, cartes accrochées,
   titre en conteneur gris, arborescence à angles droits
   ================================================================== */
:root[data-style="flow"] #view-hub{ background:var(--surface); }
:root[data-style="flow"] #view-ats{ background:var(--surface); }
.sv-board{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px; align-items:start; }
@media(max-width:1180px){ .sv-board{ grid-template-columns:1fr 1fr; } }
@media(max-width:720px){ .sv-board{ grid-template-columns:1fr; } }
.sv-colh{ display:flex; align-items:center; gap:9px; padding:0 0 14px; margin-left:-16px; }
.sv-num{ width:22px; height:22px; flex:0 0 22px; border-radius:50%; background:#16181D; color:#fff; display:grid; place-items:center; font-size:11px; font-weight:700; }
:root[data-theme="dark"] .sv-num{ background:#EDEFF3; color:#0F1114; }
.sv-colh h2{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-primary); }
.sv-colh .n{ margin-left:auto; font-size:11px; font-weight:600; color:var(--text-tertiary); }
.sv-col{ position:relative; min-width:0; padding-left:16px; }
.sv-col::before{ content:""; position:absolute; left:2px; top:44px; bottom:14px; width:2px; background:var(--hairline); }
.sv-card{ position:relative; margin-bottom:12px; }
.sv-card::after{ content:""; position:absolute; left:-14px; top:25px; width:14px; height:2px; background:var(--hairline); }
.sv-card>.cl-head{ background:var(--surface-2); margin:8px; border-radius:9px; padding:9px 11px; }
.sv-ic{ width:30px; height:30px; flex:0 0 30px; border-radius:8px; display:grid; place-items:center; }
.sv-ic .material-symbols-outlined{ font-size:18px; }
.sv-card>.cl-body{ padding:0 14px; }
.sv-card.open>.cl-body{ padding:2px 14px 13px; }
.sv-cta{ margin-top:10px; height:32px; padding:0 13px; font-size:12px; display:inline-flex; align-items:center; gap:6px; }
.sv-prog{ display:flex; align-items:center; gap:9px; margin:2px 0 8px; }
.sv-prog .p-bar{ flex:1; margin:0; }
.sv-prog b{ font-size:11.5px; }
/* ---- ATS façon Suivi (sous style flow) ---- */
:root[data-style="flow"] .ats-cols{ gap:30px; }
:root[data-style="flow"] .ats-col{ background:transparent; border:none; border-radius:0; padding:0 0 0 16px; position:relative; }
:root[data-style="flow"] .ats-col::before{ content:""; position:absolute; left:2px; top:36px; bottom:12px; width:2px; background:var(--hairline); }
:root[data-style="flow"] .ats-col-h{ margin-left:-16px; padding:0 0 12px; color:var(--text-primary); }
:root[data-style="flow"] .postit{ position:relative; border:1px solid var(--hairline); border-left-width:1px; border-radius:14px; margin-bottom:12px; box-shadow:var(--shadow-sm); }
:root[data-style="flow"] .postit::after{ content:""; position:absolute; left:-15px; top:24px; width:15px; height:2px; background:var(--hairline); }
:root[data-style="flow"] .postit .p-top{ background:var(--surface-2); margin:-6px -7px 10px; padding:8px 10px; border-radius:9px; }