/* ------------------------------------------------------------------
   Facette · Mise en ligne des clients (lancement.js, 13/10/2026).
   Une liste de clients ; un clic ouvre ce qui manque ; le détail reste
   caché derrière « Voir le détail ». Que des variables de styles.css,
   chaque couleur d'état a sa version pour le fond clair :
   orange = à recevoir du cabinet, bleu = à faire par nous, vert = fait.
   ------------------------------------------------------------------ */

#vue-lancement{
  --ml-fait:#2FD3A5;--ml-nous:#6E9BFF;--ml-cabinet:#FFB054;--ml-inconnu:color-mix(in srgb,var(--texte) 30%,transparent);
  --ml-t-fait:#7DF0CD;--ml-t-nous:#A9C2FF;--ml-t-cabinet:#FFC77D;--ml-t-rouge:#FF8FA6;
}
html[data-theme="clair"] #vue-lancement{
  --ml-fait:#16A37C;--ml-nous:#3D6CE8;--ml-cabinet:#EE8A12;
  --ml-t-fait:#0F6B50;--ml-t-nous:#2A4FB8;--ml-t-cabinet:#9A4E00;--ml-t-rouge:#A81447;
}

#vue-lancement .ml-tete{margin-top:8px}
#vue-lancement .ml-titre{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-0.01em}
#vue-lancement .ml-resume{color:var(--texte-doux);font-size:14.5px;margin-top:4px}
#vue-lancement .ml-vide{margin-top:22px;padding:22px;text-align:center;border:1px dashed var(--trait-fort);border-radius:14px;color:var(--texte-doux)}
#vue-lancement .ml-t-cabinet{color:var(--ml-t-cabinet)}
#vue-lancement .ml-t-nous{color:var(--ml-t-nous)}
#vue-lancement .ml-t-rouge{color:var(--ml-t-rouge)}
#vue-lancement .ml-ok{color:var(--ml-t-fait)}

/* ---- la liste ---- */
#vue-lancement .ml-liste{list-style:none;margin:18px 0 0;padding:0;max-width:880px;display:grid;gap:10px}
#vue-lancement .ml-client{border:1px solid var(--trait);border-radius:var(--rayon);background:var(--carte);overflow:hidden;transition:border-color .15s}
#vue-lancement .ml-client:hover,#vue-lancement .ml-client.ml-ouvert{border-color:var(--trait-fort)}
#vue-lancement .ml-ligne{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;padding:16px 18px;cursor:pointer}
#vue-lancement .ml-ligne:focus-visible{outline:2px solid var(--violet);outline-offset:-2px;border-radius:var(--rayon)}
#vue-lancement .ml-qui{flex:1 1 200px;display:flex;align-items:baseline;gap:4px 10px;flex-wrap:wrap}
#vue-lancement .ml-qui b{font-family:var(--display);font-size:17px;font-weight:700;color:var(--texte)}
#vue-lancement .ml-ville{font-size:13.5px;color:var(--texte-faible)}
#vue-lancement .ml-res{font-size:14px;font-weight:600}
#vue-lancement .ml-sep{color:var(--texte-faible);font-weight:400}
#vue-lancement .ml-fleche{width:9px;height:9px;border-right:2px solid var(--texte-faible);border-bottom:2px solid var(--texte-faible);transform:rotate(45deg);margin:0 4px 4px;transition:transform .2s}
#vue-lancement .ml-ouvert .ml-fleche{transform:rotate(-135deg);margin-bottom:-4px}

/* ---- ouvert : l'essentiel ---- */
#vue-lancement .ml-ouvre{display:none;padding:0 18px 16px}
#vue-lancement .ml-ouvert .ml-ouvre{display:block}
#vue-lancement .ml-essentiel{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 28px;padding-top:14px;border-top:1px solid var(--trait);font-size:15px}
#vue-lancement p.ml-essentiel{display:block;font-weight:600}
#vue-lancement .ml-col h4{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
#vue-lancement .ml-col-cabinet h4{color:var(--ml-t-cabinet)}
#vue-lancement .ml-col-nous h4{color:var(--ml-t-nous)}
#vue-lancement .ml-col-verif h4{color:var(--texte-faible)}
#vue-lancement .ml-col ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
#vue-lancement .ml-col li{padding-left:12px;border-left:3px solid var(--ml-nous)}
#vue-lancement .ml-col li::first-letter{text-transform:uppercase}
#vue-lancement .ml-col-cabinet li{border-left-color:var(--ml-cabinet)}
#vue-lancement .ml-col-verif li{border-left-color:var(--ml-inconnu);color:var(--texte-doux)}
#vue-lancement .ml-depuis{font-size:12.5px;color:var(--texte-faible);white-space:nowrap}
#vue-lancement .ml-depuis.ml-retard{color:var(--ml-t-rouge);font-weight:700}

#vue-lancement .ml-voir{all:unset;cursor:pointer;margin-top:14px;font-size:13px;font-weight:600;color:var(--texte-faible);text-decoration:underline;text-underline-offset:3px}
#vue-lancement .ml-voir:hover{color:var(--texte)}
#vue-lancement .ml-voir:focus-visible{outline:2px solid var(--violet);outline-offset:2px}

/* ---- le détail, sur demande ---- */
#vue-lancement .ml-detail{margin-top:14px;padding-top:14px;border-top:1px dashed var(--trait-fort)}
#vue-lancement .ml-phase{font-size:14.5px;color:var(--texte-doux)}
#vue-lancement .ml-cles{display:flex;flex-wrap:wrap;gap:8px 24px;margin:12px 0 0}
#vue-lancement .ml-cles dt{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--texte-faible)}
#vue-lancement .ml-cles dd{margin:2px 0 0;font-size:14px}
#vue-lancement .ml-familles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px 22px;margin-top:16px}
#vue-lancement .ml-famille h3,#vue-lancement .ml-j-titre{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--texte-faible);padding-bottom:6px;border-bottom:1px solid var(--trait);margin-bottom:8px}
#vue-lancement .ml-famille ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
#vue-lancement .ml-famille li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px}
#vue-lancement .ml-famille li > div{display:flex;flex-direction:column;min-width:0}
#vue-lancement .ml-p{display:inline-block;width:10px;height:10px;margin-top:4px;border-radius:50%;flex:none;background:var(--ml-nous)}
#vue-lancement .ml-p.ml-fait{background:var(--ml-fait)}
#vue-lancement .ml-p.ml-cabinet{background:var(--ml-cabinet)}
#vue-lancement .ml-p.ml-inconnu{background:transparent;border:2px dashed var(--ml-inconnu)}
#vue-lancement .ml-e-nom{font-weight:600}
#vue-lancement .ml-famille li.ml-fait .ml-e-nom{font-weight:500;color:var(--texte-doux)}
#vue-lancement .ml-e-etat{font-size:12.5px;color:var(--texte-faible)}
#vue-lancement .ml-liens{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
#vue-lancement .ml-liens a{font-size:13.5px;font-weight:600;color:var(--texte);text-decoration:none;border:1px solid var(--trait-fort);border-radius:99px;padding:5px 12px}
#vue-lancement .ml-liens a:hover{border-color:var(--violet)}
#vue-lancement .ml-j-titre{margin-top:18px}
#vue-lancement .ml-journal{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:13.5px}
#vue-lancement .ml-journal time{display:inline-block;min-width:92px;color:var(--texte-faible)}

@media (max-width:640px){
  #vue-lancement .ml-ligne{padding:14px}
  #vue-lancement .ml-ouvre{padding:0 14px 14px}
}
#vue-lancement .ml-badge{padding:1px 9px;border-radius:99px;font-size:11.5px;font-weight:700;color:var(--ml-t-nous);border:1px solid color-mix(in srgb,var(--ml-nous) 45%,transparent);white-space:nowrap}