/* ==================================================================
   Asselio — Parcours d'intégration
   Palette relevée sur le logo du groupe :
     rouge  #BE001E   orange #E55B00   encre #1D1D1B
   Neutres volontairement chauds, pour s'accorder à ces deux teintes.
================================================================== */

:root{
  /* marque */
  --rouge:#BE001E;  --rouge-fonce:#96001A;  --rouge-pale:#FCEFF0;  --rouge-bord:#F2CFD3;
  --orange:#E55B00; --orange-fonce:#C44B00; --orange-pale:#FDF2E9; --orange-bord:#F7D9BE;
  --encre:#1D1D1B;

  /* neutres chauds */
  --ink:#1D1D1B; --ink-2:#4A4A45; --ink-3:#76766D; --ink-4:#9C9C92;
  --line:#E6E3DD; --line-2:#F0EDE7;
  --bg:#F7F5F1; --card:#FFFFFF;

  /* statuts */
  --vert:#2C6E45; --vert-pale:#EDF5EF; --vert-bord:#CFE3D6;

  --rail:#1D1D1B; --rail-2:#2B2B28; --rail-txt:#B5B3AC;

  --r:10px; --r-s:7px;
  --ombre:0 1px 2px rgba(29,29,27,.04), 0 2px 6px rgba(29,29,27,.05);
  --ombre-h:0 2px 4px rgba(29,29,27,.05), 0 8px 20px rgba(29,29,27,.09);
  --police:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.55 var(--police); -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.012em}
button{font:inherit; cursor:pointer; color:inherit}
svg{display:block; flex:none}

/* ---------- bandeau démo ---------- */
.demo-bar{
  background:var(--encre); color:#D9D7D1; font-size:12px; letter-spacing:.01em;
  padding:7px 20px; display:flex; align-items:center; justify-content:center; gap:8px;
}
.demo-bar b{color:#fff; font-weight:600}
.demo-bar svg{color:var(--orange)}

/* ---------- coquille ---------- */
.shell{display:grid; grid-template-columns:252px minmax(0,1fr); min-height:calc(100vh - 31px)}

/* ---------- rail latéral ---------- */
.rail{background:var(--rail); padding:22px 0 26px; display:flex; flex-direction:column; gap:26px;
      position:sticky; top:0; align-self:start; max-height:100vh; overflow-y:auto}
.rail .logo{padding:0 20px}
.rail .logo img{width:150px; height:auto}
.rail .baseline{margin:12px 20px 0; font-size:11.5px; line-height:1.45; color:#77756E; letter-spacing:.01em}
.rail nav{display:flex; flex-direction:column; gap:2px; padding:0 12px}
.rail nav button{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  background:none; border:0; border-radius:var(--r-s); padding:9px 11px;
  font-size:13.5px; font-weight:500; color:var(--rail-txt); position:relative;
}
.rail nav button svg{color:#6E6C65; transition:color .12s}
.rail nav button:hover{background:var(--rail-2); color:#F2F0EA}
.rail nav button:hover svg{color:#A8A69E}
.rail nav button.on{background:var(--rail-2); color:#fff; font-weight:600}
.rail nav button.on svg{color:var(--orange)}
.rail nav button.on::before{
  content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px;
  background:var(--rouge); border-radius:0 3px 3px 0;
}
.rail .bloc{padding:0 20px}
.rail .bloc h4{font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:#6E6C65; margin-bottom:11px}
.mini{display:block; width:100%; text-align:left; background:none; border:0; padding:7px 0; border-top:1px solid #2E2E2A}
.mini:first-of-type{border-top:0}
.mini .n{font-size:12.5px; color:#D9D7D1; display:flex; justify-content:space-between; gap:8px; align-items:baseline}
.mini .n b{font-weight:600}
.mini .n span{font-size:11px; color:#78766F}
.mini .b{height:3px; background:#33332F; border-radius:99px; margin-top:6px; overflow:hidden}
.mini .b i{display:block; height:100%; background:var(--orange); border-radius:99px}
.mini:hover .n b{color:#fff}
.rail .pied{margin-top:auto; padding:0 20px; font-size:11px; color:#5E5C56; line-height:1.5}

/* ---------- zone de contenu ---------- */
.contenu{padding:30px 34px 70px; max-width:1180px}
.vue{display:none}
.vue.on{display:block}
.page-tete{margin-bottom:26px}
.page-tete h2{font-size:23px; letter-spacing:-.02em}
.page-tete p{margin:5px 0 0; font-size:14px; color:var(--ink-3); max-width:74ch}

/* ---------- primitives ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--ombre)}
.sec-titre{font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-4); font-weight:600; margin:0 0 12px}
.muted{color:var(--ink-3)}
.pastille{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
          padding:2.5px 8px; border-radius:5px; white-space:nowrap; line-height:1.5; border:1px solid transparent}
.p-dda{background:var(--rouge-pale); color:var(--rouge); border-color:var(--rouge-bord)}
.p-integ{background:#F1F0EC; color:var(--ink-2); border-color:var(--line)}
.p-ok{background:var(--vert-pale); color:var(--vert); border-color:var(--vert-bord)}
.p-retard{background:var(--rouge); color:#fff}
.p-cours{background:var(--orange-pale); color:var(--orange-fonce); border-color:var(--orange-bord)}
.p-avenir{background:#F3F1ED; color:var(--ink-3); border-color:var(--line)}
.p-neutre{background:#F3F1ED; color:var(--ink-2); border-color:var(--line)}
.role-tag{display:inline-block; font-size:10px; font-weight:700; letter-spacing:.05em;
          padding:2.5px 6px; border-radius:4px; color:#fff; white-space:nowrap}
.barre{height:5px; background:var(--line-2); border-radius:99px; overflow:hidden}
.barre i{display:block; height:100%; background:var(--orange); border-radius:99px; transition:width .3s}

.btn-s{border:1px solid var(--line); background:#fff; color:var(--ink-2); border-radius:var(--r-s);
       padding:5px 11px; font-size:12.5px; font-weight:500; white-space:nowrap;
       display:inline-flex; align-items:center; gap:6px}
.btn-s:hover{border-color:var(--orange); color:var(--orange-fonce); background:var(--orange-pale)}
.btn-s svg{width:14px; height:14px}
.btn-p{background:var(--rouge); color:#fff; border:0; border-radius:var(--r-s); padding:9px 17px;
       font-size:13.5px; font-weight:600; display:inline-flex; align-items:center; gap:7px}
.btn-p:hover{background:var(--rouge-fonce)}

/* ---------- tableau de bord ---------- */
.bandeau-alerte{display:flex; gap:12px; align-items:flex-start; padding:14px 17px; border-radius:var(--r);
  background:var(--rouge-pale); border:1px solid var(--rouge-bord); margin-bottom:24px; font-size:13.5px; color:#7A0014}
.bandeau-alerte svg{color:var(--rouge); margin-top:1px}
.bandeau-alerte b{display:block; margin-bottom:1px; color:#5E0010}

.grille-dossiers{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:16px; margin-bottom:34px}
.dcard{padding:17px 18px; cursor:pointer; text-align:left; width:100%; background:var(--card);
       border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--ombre);
       transition:border-color .12s, box-shadow .12s, transform .12s}
.dcard:hover{border-color:var(--orange-bord); box-shadow:var(--ombre-h); transform:translateY(-1px)}
.dcard .haut{display:flex; gap:11px; align-items:flex-start}
.dcard .init{width:34px;height:34px;border-radius:8px;background:var(--encre);color:#fff;flex:none;
             display:grid;place-items:center;font-size:12.5px;font-weight:700;letter-spacing:.02em}
.dcard.dda .init{background:var(--rouge)}
.dcard .nom{font-size:15px; font-weight:600; line-height:1.3}
.dcard .poste{font-size:12.5px; color:var(--ink-2); margin-top:2px; line-height:1.35}
.dcard .entite{font-size:10.5px; color:var(--ink-4); margin-top:3px; letter-spacing:.05em; text-transform:uppercase; font-weight:600}
.dcard .jalon{display:flex; align-items:baseline; justify-content:space-between; margin:15px 0 6px; font-size:12px; color:var(--ink-3)}
.dcard .jalon b{color:var(--ink); font-weight:600}
.dcard .pied{display:flex; gap:5px; flex-wrap:wrap; margin-top:12px}

/* ---------- listes de tâches ---------- */
.liste{list-style:none; margin:0; padding:0}
.liste li{display:flex; gap:12px; align-items:flex-start; padding:11px 16px; border-top:1px solid var(--line-2)}
.liste li:first-child{border-top:0}
.liste li:hover{background:#FCFBF9}
.liste li.fait{opacity:.45}
.tk-txt{flex:1; min-width:0}
.tk-lib{font-size:13.8px; line-height:1.45}
.tk-lib s{color:var(--ink-3)}
.tk-meta{font-size:11.5px; color:var(--ink-3); margin-top:3px; display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.tk-note{font-size:12.3px; color:var(--ink-3); margin-top:6px; padding:7px 11px; background:#FAF8F5;
         border-left:2px solid var(--orange-bord); border-radius:0 5px 5px 0; line-height:1.5}
.tk-act{display:flex; gap:6px; align-items:center; flex:none; padding-top:1px}
.coche{width:18px;height:18px;border:1.5px solid #C9C6BF;border-radius:5px;background:#fff;flex:none;
       margin-top:2px; display:grid; place-items:center; color:#fff; padding:0}
.coche:hover{border-color:var(--vert)}
.coche.on{background:var(--vert); border-color:var(--vert)}
.coche svg{width:11px;height:11px}

/* ---------- fiche dossier ---------- */
.selecteur{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px}
.selecteur button{border:1px solid var(--line); background:#fff; border-radius:99px;
                  padding:6px 14px; font-size:13px; color:var(--ink-2); font-weight:500}
.selecteur button:hover{border-color:var(--ink-4)}
.selecteur button.on{background:var(--encre); border-color:var(--encre); color:#fff}

.d-entete{padding:22px 24px; margin-bottom:18px}
.d-entete .haut{display:flex; justify-content:space-between; gap:22px; flex-wrap:wrap; align-items:flex-start}
.d-entete h2{font-size:21px}
.d-entete .sous{font-size:13.5px; color:var(--ink-2); margin-top:3px}
.d-faits{display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:18px; margin-top:20px; padding-top:17px; border-top:1px solid var(--line-2)}
.fait-k{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-4); font-weight:600}
.fait-v{font-size:13.5px; margin-top:3px}

/* frise des phases */
.frise{display:flex; gap:0; margin:22px 0 18px; padding:18px 20px 14px; overflow-x:auto}
.frise .et{flex:1; min-width:92px; position:relative; text-align:center}
.frise .et::before{content:""; position:absolute; top:8px; left:-50%; width:100%; height:2px; background:var(--line)}
.frise .et:first-child::before{display:none}
.frise .et.done::before{background:var(--vert)}
.frise .et .pt{width:17px;height:17px;border-radius:50%;background:#fff;border:2px solid var(--line);
               margin:0 auto 8px; position:relative; z-index:1; display:grid; place-items:center; color:#fff}
.frise .et.done .pt{background:var(--vert); border-color:var(--vert)}
.frise .et.now .pt{background:var(--orange); border-color:var(--orange); box-shadow:0 0 0 4px var(--orange-pale)}
.frise .et .lb{font-size:11px; color:var(--ink-3); line-height:1.3; padding:0 4px}
.frise .et.now .lb{color:var(--ink); font-weight:600}
.frise .et svg{width:9px;height:9px}

.conf{background:var(--rouge-pale); border:1px solid var(--rouge-bord); border-radius:var(--r); padding:16px 18px; margin-bottom:18px}
.conf h3{font-size:11px; color:var(--rouge); text-transform:uppercase; letter-spacing:.08em; margin-bottom:11px; display:flex; align-items:center; gap:7px}
.conf ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:9px}
.conf li{display:flex; gap:8px; align-items:center; font-size:13px; color:#7A0014}

.phase{margin-bottom:12px; overflow:hidden}
.phase-tete{display:flex; align-items:center; gap:12px; padding:12px 16px; background:#FCFBF9;
            border-bottom:1px solid var(--line); cursor:pointer; user-select:none}
.phase-tete .num{width:22px;height:22px;border-radius:50%;background:var(--encre);color:#fff;flex:none;
                 display:grid;place-items:center;font-size:11px;font-weight:700}
.phase-tete.done .num{background:var(--vert)}
.phase-tete.now .num{background:var(--orange)}
.phase-tete h3{font-size:14px; flex:1}
.phase-tete .rep{font-size:11.5px; color:var(--ink-4)}
.phase-tete .chev{color:var(--ink-4); transition:transform .15s}
.phase.replie .phase-tete .chev{transform:rotate(-90deg)}
.phase.replie .liste{display:none}

/* ---------- actions par service ---------- */
.grp-tete{font-size:12.5px; font-weight:600; padding:11px 16px; background:#FCFBF9;
          border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px}
.grp-tete span{font-weight:400; color:var(--ink-3)}
.grp-tete.rouge{color:var(--rouge)}
.grp-tete.rouge svg{color:var(--rouge)}

/* ---------- espace nouvel entrant ---------- */
.entrant-wrap{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; align-items:start}
@media(max-width:1020px){.entrant-wrap{grid-template-columns:1fr}}
.bienvenue{padding:24px 26px; margin-bottom:16px; position:relative; overflow:hidden}
.bienvenue::after{content:""; position:absolute; inset:0 auto 0 0; width:4px;
                  background:linear-gradient(180deg,var(--rouge),var(--orange))}
.bienvenue h2{font-size:19px}
.bienvenue p{font-size:13.8px; color:var(--ink-2); margin:8px 0 0; max-width:64ch}
.piece{display:flex; gap:12px; align-items:center; padding:11px 16px; border-top:1px solid var(--line-2)}
.piece:first-of-type{border-top:0}
.piece .lib{flex:1; font-size:13.8px}
.piece .lib em{font-style:normal; font-size:11.5px; color:var(--ink-4); display:block; margin-top:2px}
.piece .fic{font-size:11.5px; color:var(--vert); display:flex; align-items:center; gap:5px; margin-top:3px}
.aside-note{padding:18px; font-size:13px; color:var(--ink-2); line-height:1.55}
.aside-note h3{font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-4); margin-bottom:10px}
.aside-note ul{margin:0; padding-left:16px}
.aside-note li{margin-bottom:7px}

/* ---------- automatisations ---------- */
.chaine{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:0; padding:4px}
.et-c{padding:16px 16px 16px 20px; position:relative}
.et-c::before{content:""; position:absolute; left:0; top:18px; bottom:18px; width:2px; background:var(--line)}
.et-c:first-child::before{background:var(--orange)}
.et-c .k{font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-4); font-weight:700; margin-bottom:6px}
.et-c .t{font-size:13.5px; font-weight:600; line-height:1.35}
.et-c .d{font-size:12.3px; color:var(--ink-3); margin-top:5px; line-height:1.5}

.tbl{width:100%; border-collapse:collapse; font-size:13px}
.tbl th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-4);
        font-weight:600; padding:10px 14px; border-bottom:1px solid var(--line); background:#FCFBF9; white-space:nowrap}
.tbl td{padding:11px 14px; border-bottom:1px solid var(--line-2); vertical-align:top; line-height:1.45}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:#FCFBF9}
.tbl .qd{color:var(--ink-3); white-space:nowrap; font-size:12.5px}

.bascule{display:inline-flex; border:1px solid var(--line); border-radius:99px; overflow:hidden; background:#fff}
.bascule button{border:0; background:none; padding:4px 11px; font-size:11.5px; font-weight:600; color:var(--ink-3)}
.bascule button.on{background:var(--encre); color:#fff}
.bascule button.on.auto{background:var(--orange)}

.rel{display:flex; gap:13px; padding:13px 16px; border-top:1px solid var(--line-2); align-items:flex-start}
.rel:first-of-type{border-top:0}
.rel .qd{flex:none; width:64px; font-size:12px; font-weight:700; color:var(--orange-fonce); padding-top:1px}
.rel .tx{flex:1; font-size:13.5px}
.rel .tx span{display:block; font-size:12.3px; color:var(--ink-3); margin-top:3px; line-height:1.5}

.deux-col{display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:18px; align-items:start}
.note-tech{padding:17px 19px; background:#FCFBF9; font-size:12.8px; color:var(--ink-2); line-height:1.6}
.note-tech h3{font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-4); margin-bottom:10px}
.note-tech code{font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; background:#F1EEE9;
                padding:1.5px 5px; border-radius:4px; color:var(--ink)}
.note-tech ol{margin:0; padding-left:18px}
.note-tech li{margin-bottom:7px}

/* ---------- modale ---------- */
.voile{position:fixed; inset:0; background:rgba(29,29,27,.5); display:none; z-index:60; padding:24px; overflow:auto}
.voile.on{display:block}
.modale{max-width:700px; margin:38px auto; background:#fff; border-radius:12px;
        box-shadow:0 24px 60px rgba(29,29,27,.3); overflow:hidden}
.mod-tete{padding:16px 20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:16px}
.mod-tete h3{font-size:15px}
.mod-tete .x{background:none; border:0; color:var(--ink-4); padding:2px; display:grid; place-items:center}
.mod-tete .x:hover{color:var(--ink)}
.mod-corps{padding:20px}
.champ{margin-bottom:14px}
.champ label{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-4); font-weight:600; margin-bottom:5px}
.champ .val{font-size:13.5px; padding:9px 12px; background:#FAF8F5; border:1px solid var(--line); border-radius:var(--r-s)}
.champ textarea{width:100%; min-height:280px; padding:13px; border:1px solid var(--line); border-radius:var(--r-s);
                font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--ink); resize:vertical; background:#fff}
.champ textarea:focus{outline:2px solid var(--orange-bord); outline-offset:-1px; border-color:var(--orange)}
.mod-pied{padding:14px 20px; border-top:1px solid var(--line); background:#FCFBF9;
          display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.mod-pied .avis{font-size:12px; color:var(--ink-3); display:flex; align-items:center; gap:7px}
.mod-pied .avis svg{color:var(--orange)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .rail{position:static; max-height:none; flex-direction:column; padding:16px 0}
  .rail nav{flex-direction:row; overflow-x:auto; padding:0 12px}
  .rail nav button.on::before{display:none}
  .rail .bloc, .rail .pied, .rail .baseline{display:none}
  .contenu{padding:22px 18px 60px}
}

/* ---------- pied de page ---------- */
.pied-page{margin-top:44px; padding-top:18px; border-top:1px solid var(--line);
           font-size:11.5px; color:var(--ink-4); line-height:1.65}