:root { font-family: Arial, Helvetica, sans-serif; color: #171717; background: #f5f6f8; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
a { color: inherit; }
.site-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 5vw; background:#fff; border-bottom:1px solid #ddd; }
.site-header nav { display:flex; flex-wrap:wrap; gap:1rem; }
.brand { font-size:1.25rem; font-weight:700; text-decoration:none; }
.container { width:min(1100px, 92vw); margin:2rem auto; }
.hero, .card, .center-card { background:#fff; border:1px solid #ddd; border-radius:12px; padding:1.5rem; }
.hero { padding:2.5rem; }
.center-card { width:min(620px, 92vw); margin:10vh auto; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-top:1.25rem; }
label { display:block; margin-top:1rem; font-weight:600; }
input, select, textarea { width:100%; padding:.75rem; margin-top:.35rem; border:1px solid #bbb; border-radius:8px; background:#fff; }
button, .button { display:inline-block; margin-top:1rem; padding:.75rem 1rem; border:0; border-radius:8px; background:#222; color:#fff; text-decoration:none; cursor:pointer; }
.button.secondary { background:#666; }
.alert { padding:.9rem 1rem; border-radius:8px; margin:1rem 0; background:#fff3cd; border:1px solid #e6cf81; }
.alert.error { background:#f8d7da; border-color:#e5aeb4; }
.alert.success { background:#d1e7dd; border-color:#99c8b2; }
.table { width:100%; border-collapse:collapse; margin-top:1rem; }
.table th, .table td { text-align:left; padding:.75rem; border-bottom:1px solid #ddd; vertical-align:top; }
.badge { display:inline-block; padding:.2rem .5rem; border-radius:999px; background:#eee; font-size:.85rem; }
.site-footer { text-align:center; padding:2rem; color:#666; }
.permissions-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.75rem; margin-top:1rem; }
.permission { padding:.75rem; border:1px solid #ddd; border-radius:8px; background:#fafafa; }
.permission label { margin:0; font-weight:400; display:flex; gap:.5rem; align-items:center; }
.permission input { width:auto; margin:0; }

/* STEP02H - navigation et pages d'erreur */
.site-header-left { display:flex; align-items:center; gap:.65rem; }
.environment-badge { background:#fff3cd; border:1px solid #e6cf81; font-weight:700; }
.error-page { text-align:center; }
.error-code { font-size:.9rem; font-weight:700; letter-spacing:.08em; color:#666; margin-bottom:.5rem; }
.muted { color:#666; }

/* STEP04.00 - fondation interface DDE */
.section-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; }
.metrics-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; margin:1.25rem 0; }
.metric { text-align:center; }
.metric-value { font-size:2rem; font-weight:700; line-height:1.1; }
.metric-label { margin-top:.35rem; color:#666; }
.status-ok { background:#d1e7dd; border:1px solid #99c8b2; }
.status-nok { background:#f8d7da; border:1px solid #e5aeb4; }
.button.disabled { background:#a7a7a7; cursor:not-allowed; pointer-events:none; }
.table-wrapper { width:100%; overflow-x:auto; }
code { overflow-wrap:anywhere; }

/* STEP04.01 - création brouillon DDE */
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; }
.form-grid > div { min-width:0; }
.checkbox-line { display:flex; align-items:center; gap:.6rem; margin:1rem 0; }
.checkbox-line input[type="checkbox"] { width:auto; margin:0; }
textarea { width:100%; box-sizing:border-box; }

/* STEP04.03 - ressources VM et disques DATA */
.resource-summary { padding:.8rem 0; font-weight:600; }
.data-disk-row {
    display:grid;
    grid-template-columns:minmax(150px,.6fr) minmax(240px,1.4fr) auto;
    gap:1rem;
    align-items:end;
    margin-bottom:1rem;
    padding-bottom:1rem;
    border-bottom:1px solid #ddd;
}
.data-disk-remove-cell { padding-bottom:.1rem; }
[hidden] { display:none !important; }

@media (max-width: 720px) {
    .data-disk-row { grid-template-columns:1fr; }
}


/* DDE Final RC1 */
button.danger, .button.danger { background:#9f1d2d; }
button:disabled { opacity:.55; cursor:not-allowed; }
.action-form { margin-top:1rem; padding-top:.5rem; }
.action-form + .action-form { margin-top:1.25rem; }
.summary-confirmation { padding:.9rem; border:1px solid #d9dee5; border-radius:8px; background:#f8f9fa; }
.app-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.75rem; }
.app-option { display:flex; align-items:flex-start; gap:.6rem; padding:.8rem; border:1px solid #d9dee5; border-radius:8px; }
.app-option input { width:auto; margin-top:.2rem; }
.app-option small { display:block; margin-top:.25rem; color:#666; }
.field-help { margin-top:.6rem; }
.field-help summary { cursor:pointer; font-weight:600; }

/* DDE Final RC1.5 - suivi d'execution */
.dde-progress-track {
    width:100%;
    height:18px;
    margin-top:1rem;
    overflow:hidden;
    border:1px solid #c7ccd3;
    border-radius:999px;
    background:#eef0f3;
}
.dde-progress-bar {
    height:100%;
    min-width:0;
    background:#222;
    transition:width .2s ease;
}
.dde-progress-value {
    margin:.5rem 0 1rem;
    font-size:1.15rem;
}
.dde-progress-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:1rem;
    margin:1rem 0;
}
.dde-progress-grid > div {
    padding:.8rem;
    border:1px solid #ddd;
    border-radius:8px;
    background:#fafafa;
}