/* Détail d'un modèle de parcours */
.modele-detail { max-width: 760px; }
.modele-head { padding: 22px; margin: 14px 0 18px; }
.modele-head-row { display: flex; align-items: flex-start; gap: 16px; }
.modele-head-body { flex: 1; min-width: 0; }
.modele-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.modele-title { font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.modele-desc { color: var(--ink-soft); font-size: 13.5px; margin-top: 6px; }
.modele-actions { margin-top: 16px; display: flex; align-items: center; gap: 12px; }

.tpl-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); flex: none; }
.tpl-ic.m { background: var(--mgr-soft); color: var(--mgr); }
.tpl-ic.w { background: var(--warm-soft); color: var(--warm-deep); }
.tpl-meta { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); margin-top: 10px; }
.pill.draft { background: var(--warm-soft); color: var(--warm-deep); }
.pt-when { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); font-weight: 500; margin-left: 6px; }
.hint { font-size: 12.5px; color: var(--danger); font-style: italic; padding-top: 10px; text-align: center; font-weight: 600; }
.empty-state { padding: 28px; text-align: center; color: var(--ink-faint); font-size: 14px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); }
.add-slot { margin-top: 14px; padding: 14px; text-align: center; font-size: 12.5px; color: var(--ink-faint); border: 1px dashed var(--line-strong); border-radius: var(--r-md); }

.add-etape-card { padding: 18px; margin-top: 14px; }
.add-etape-title { font-family: var(--display); font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.add-etape-fields { display: flex; gap: 12px; flex-wrap: wrap; }
.add-etape-fields > * { flex: 1; min-width: 180px; }

.add-etape-zone { margin-top: 14px; text-align: center}
.add-etape-trigger { display: inline-flex; align-items: center; gap: 7px; }
.add-etape-buttons { display: flex; gap: 10px; margin-top: 16px; }

.add-action-zone { margin-top: 8px; }
.add-action-card { margin-top: 8px; padding: 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); }
.add-action-fields { display: flex; flex-direction: column; gap: 10px; }
.add-action-buttons { display: flex; gap: 10px; margin-top: 14px; }
.btn-sm { width: auto; padding: 7px 13px; font-size: 12.5px; }
.add-action-trigger { display: inline-flex; align-items: center; gap: 6px; }

.act-tools { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.phase-tools { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }
.phase-title { display: flex; align-items: center; }

.btn-icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border: none;
    background: none; color: var(--ink-faint); border-radius: 7px; cursor: pointer; }
.btn-icon:hover { background: var(--surface-2); color: var(--ink); }
.btn-icon.ok:hover{background:var(--ok-soft);color:#1d7a4f}
.btn-icon.run:hover{background:var(--brand-soft);color:var(--brand-deep)}
.btn-icon.soon:hover{background:var(--warn-soft);color:#9a6f12}
.btn-icon.late:hover{background:var(--danger-soft);color:#b43c23}
.btn-icon.idle:hover{background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line)}



/*.btn-icon.ok:hover { background: var(--danger-soft); color: blue; }*/
/*.btn-icon.danger:hover { background: var(--danger-soft); color: var(--danger); }*/


.etape-titre-zone { flex: 1; min-width: 0; }
.phase-title-edit { padding: 4px 0; }
.edit-fields { display: flex; flex-wrap: wrap; }
.edit-fields > * { flex: 1; min-width: 160px; }
.edit-buttons { display: flex; gap: 10px; margin-top: 12px; justify-content: center; }
.etape-actions { display: flex; flex-direction: column; gap: 9px;}
.act-modele {flex-direction: column;}
.act-display-container {width: 100%;}
.act-display { display: flex; align-items: center; gap: 12px;}
.act-edit { width: 100%; padding: 4px 0; }

.modele-tools { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }

textarea { padding: 4px}