:root {
    --sensipode-blue: #272445;
    --sensipode-pink: #e10e49;
    --ink-soft: #625d7c;
    --line: #e7e3ef;
    --surface: #f6f4fa; /* fond global lavande doux (inspiré du cadrage) */
    --surface-strong: #ffffff;
    --topbar-height: 46px;
    --contextbar-height: 54px;
    --planning-timeline-header-top: calc(var(--topbar-height) + var(--contextbar-height));
    --planning-header-height: 48px;
    --pole-strat-bg: #fdf1e3;
    --pole-strat: #e98300;
    --pole-strat-ink: #985b1b;
    --pole-inno-bg: #e7f3f7;
    --pole-inno: #3095b4;
    --pole-inno-ink: #2b6685;
    --pole-ux-bg: #f5edfa;
    --pole-ux: #8c6cd0;
    --pole-ux-ink: #624d95;
    --pole-vuln-bg: #e3f6f2;
    --pole-vuln: #1e9d8b;
    --pole-vuln-ink: #216b6d;
    --pole-agency-bg: #ece5ef;
    --pole-agency: #5b4b6f;
    --pole-agency-ink: #272445;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--surface);
    color: var(--sensipode-blue);
    font-family: "Onest", Arial, Helvetica, sans-serif;
}

.material-symbols-outlined {
    direction: ltr;
    display: inline-block;
    font-family: "Material Symbols Outlined";
    font-feature-settings: "liga";
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
}

select,
textarea,
input {
    font-family: "Onest", Arial, Helvetica, sans-serif;
}

select {
    appearance: none;
    background-color: #fff;
    background-image: linear-gradient(45deg, transparent 50%, var(--sensipode-blue) 50%), linear-gradient(135deg, var(--sensipode-blue) 50%, transparent 50%);
    background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
    color: var(--sensipode-blue);
    padding-right: 30px;
}

select option {
    background: #fff;
    color: var(--sensipode-blue);
}

.sensi-select-menu {
    display: inline-block;
    min-width: 174px;
    position: relative;
}

.sensi-select-menu--compact {
    min-width: 112px;
}

.sensi-select-menu--project {
    flex: 0 0 min(520px, 34vw);
    min-width: 300px;
}

.sensi-select-menu summary {
    align-items: center;
    background: #fff;
    border: 1px solid #d9cbe3;
    border-radius: 8px;
    color: var(--sensipode-blue);
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 700;
    gap: 8px;
    justify-content: space-between;
    list-style: none;
    min-height: 38px;
    padding: 8px 12px;
    width: 100%;
}

.sensi-select-menu summary::-webkit-details-marker {
    display: none;
}

.sensi-select-menu summary > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sensi-select-menu summary .material-symbols-outlined {
    color: var(--sensipode-blue);
    flex: 0 0 auto;
}

.sensi-select-menu__panel {
    background: #fff;
    border: 1px solid #d9cbe3;
    border-radius: 9px;
    box-shadow: 0 16px 34px rgba(39, 36, 69, 0.16);
    display: grid;
    gap: 3px;
    left: 0;
    margin-top: 6px;
    max-height: min(420px, calc(100vh - 160px));
    min-width: 100%;
    overflow: auto;
    padding: 6px;
    position: absolute;
    top: 100%;
    width: max-content;
    z-index: 180;
}

.billing-page,
.home-ops {
    color: var(--sensipode-blue);
}

.billing-context {
    margin: 0 calc(-1 * clamp(18px, 3vw, 32px)) 18px;
}

.billing-summary {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    margin-bottom: 12px;
}

.billing-summary > div,
.billing-section,
.home-ops-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.billing-summary > div {
    padding: 14px 16px;
}

.billing-summary span,
.billing-row__meta,
.billing-row__note,
.billing-forecast span,
.home-ops-item small {
    color: var(--ink-soft);
    font-size: 12px;
}

.billing-summary strong {
    display: block;
    font-size: 22px;
    margin-top: 4px;
}

.billing-summary .is-ready strong {
    color: #216b6d;
}

.billing-summary .is-watch strong {
    color: #7a3f3f;
}

.billing-note {
    background: #fff7df;
    border: 1px solid #f3dd9a;
    border-radius: 8px;
    color: #6f5520;
    font-size: 13px;
    margin: 0 0 14px;
    padding: 10px 12px;
}

.billing-section {
    margin-bottom: 14px;
    overflow: visible;
}

.billing-section > header {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    padding: 14px 16px;
}

.billing-section h1,
.billing-section h2,
.home-ops h1,
.home-ops-card h2 {
    margin: 0;
}

.billing-section h1 {
    font-size: 26px;
}

.billing-section h2 {
    font-size: 17px;
}

.billing-list {
    display: grid;
}

.billing-row {
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 10px;
    padding: 14px 16px;
}

.billing-row:last-child {
    border-bottom: 0;
}

.billing-row__main,
.billing-row__meta,
.billing-row__actions,
.billing-forecast article {
    align-items: center;
    display: grid;
    gap: 12px;
}

.billing-row__main {
    grid-template-columns: minmax(0, 1fr) auto;
}

.billing-row__main span {
    color: var(--ink-soft);
    display: block;
    font-size: 13px;
    margin-top: 3px;
}

.billing-row__meta {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
}

.billing-row__note {
    background: #faf8fc;
    border: 1px solid var(--line);
    border-radius: 7px;
    margin: 0;
    padding: 9px 10px;
}

.billing-row__note--watch {
    background: #fff2f0;
    border-color: #f7cdc7;
    color: #7a3f3f;
}

.billing-row__instructions {
    position: relative;
}

.billing-row__instructions summary,
.billing-delay-form summary {
    align-items: center;
    color: var(--sensipode-blue);
    cursor: pointer;
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    gap: 6px;
    list-style: none;
}

.billing-row__instructions summary::-webkit-details-marker,
.billing-delay-form summary::-webkit-details-marker {
    display: none;
}

.billing-row__instructions > div {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(39, 36, 69, 0.16);
    left: 0;
    max-width: 360px;
    padding: 14px;
    position: absolute;
    top: 28px;
    z-index: 10;
}

.billing-row__instructions p {
    white-space: pre-line;
}

.billing-row__actions {
    grid-template-columns: repeat(auto-fit, minmax(180px, max-content));
}

.billing-row__actions form,
.billing-delay-form form {
    align-items: center;
    display: flex;
    gap: 8px;
}

.billing-row__actions button,
.billing-row__actions input,
.billing-row__actions textarea {
    border: 1px solid #d9cbe3;
    border-radius: 8px;
    font: inherit;
    min-height: 34px;
    padding: 8px 10px;
}

.billing-row__actions button {
    background: var(--sensipode-blue);
    color: #fff;
    cursor: pointer;
    font-weight: 700;
}

.billing-delay-form form {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(39, 36, 69, 0.16);
    margin-top: 8px;
    padding: 10px;
    position: absolute;
    z-index: 10;
}

.billing-delay-form textarea {
    min-width: 240px;
}

.billing-forecast {
    display: grid;
}

.billing-forecast article {
    border-bottom: 1px solid var(--line);
    grid-template-columns: 70px minmax(0, 1fr) minmax(160px, 0.8fr) auto;
    padding: 11px 16px;
}

.billing-forecast article:last-child {
    border-bottom: 0;
}

.billing-empty {
    color: var(--ink-soft);
    margin: 0;
    padding: 16px;
}

.home-ops {
    margin-bottom: 22px;
}

.home-ops > header {
    margin-bottom: 12px;
}

.home-ops-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-ops-card {
    padding: 14px;
}

.home-ops-card h2 {
    font-size: 16px;
    margin-bottom: 10px;
}

.home-ops-item {
    border-top: 1px solid var(--line);
    color: inherit;
    display: grid;
    gap: 3px;
    padding: 10px 0;
    text-decoration: none;
}

.home-ops-item span {
    color: var(--sensipode-pink);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.home-ops-item b {
    color: #216b6d;
    font-size: 12px;
}

@media (max-width: 900px) {
    .billing-summary,
    .home-ops-grid {
        grid-template-columns: 1fr 1fr;
    }

    .billing-row__meta,
    .billing-forecast article {
        grid-template-columns: 1fr;
    }
}

.sensi-select-menu--project .sensi-select-menu__panel {
    max-width: min(760px, 92vw);
    width: min(760px, 92vw);
}

.sensi-select-menu__search {
    align-items: center;
    background: #fff;
    border: 1px solid #d9cbe3;
    border-radius: 7px;
    display: flex;
    gap: 8px;
    min-height: 34px;
    padding: 0 10px;
    position: sticky;
    top: 0;
    z-index: 1;
}

.sensi-select-menu__search .material-symbols-outlined {
    color: #7d7395;
    font-size: 18px;
}

.sensi-select-menu__search input {
    background: transparent;
    border: 0;
    color: var(--sensipode-blue);
    flex: 1 1 auto;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    min-width: 0;
    outline: 0;
    padding: 0;
}

.sensi-select-menu__search input::placeholder {
    color: #8e84a5;
}

.sensi-select-menu__items {
    display: grid;
    gap: 3px;
}

.sensi-select-menu__empty {
    color: #7d7395;
    font-size: 13px;
    font-weight: 650;
    margin: 4px 0 0;
    padding: 8px 10px;
}

.sensi-select-menu__panel a,
.sensi-select-menu__panel button {
    align-items: center;
    background: #fff;
    border: 0;
    border-radius: 6px;
    color: var(--sensipode-blue);
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
    min-height: 32px;
    padding: 7px 10px;
    text-align: left;
    text-decoration: none;
    width: 100%;
}

.sensi-select-menu__panel [hidden] {
    display: none !important;
}

.sensi-select-menu__panel a:hover,
.sensi-select-menu__panel button:hover,
.sensi-select-menu__panel a:focus-visible,
.sensi-select-menu__panel button:focus-visible {
    background: #fff4f7;
    outline: none;
}

.sensi-select-menu__panel .material-symbols-outlined {
    color: transparent;
    font-size: 18px;
}

.sensi-select-menu__panel .is-selected {
    background: #fde6ee;
    color: var(--sensipode-blue);
    font-weight: 800;
}

.sensi-select-menu__panel .is-selected .material-symbols-outlined {
    color: var(--sensipode-blue);
}

.topbar {
    align-items: center;
    background: var(--sensipode-blue);
    color: white;
    display: flex;
    gap: 14px;
    min-height: var(--topbar-height);
    padding: 5px clamp(16px, 3vw, 34px);
    position: sticky;
    top: 0;
    z-index: var(--z-topbar);
}

.topbar-brand {
    align-items: center;
    background: transparent;
    border-radius: 8px;
    display: inline-flex;
    flex: 0 0 auto;
    padding: 0;
}

.topbar img {
    height: 28px;
    width: 28px;
}

.topbar-session {
    align-items: center;
    display: flex;
    flex: 1;
    gap: 4px;
    justify-content: flex-start;
    min-width: 0;
}

.topbar-user {
    font-size: 13px;
    font-weight: 600;
    margin-left: auto;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-session a {
    background: transparent;
    border-radius: 6px;
    color: white;
    font-size: 13px;
    font-weight: 500;
    min-height: 36px;
    padding: 9px 8px;
    position: relative;
    text-decoration: none;
}

.topbar-session .topbar-link {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.76);
}

.topbar-session .topbar-link:hover,
.topbar-session .topbar-link:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: white;
}

.topbar-session .topbar-link.is-active {
    color: white;
    font-weight: 600;
}

.topbar-session .topbar-link.is-active::after {
    background: var(--sensipode-pink);
    border-radius: 999px;
    bottom: 1px;
    content: "";
    height: 2px;
    left: 9px;
    position: absolute;
    right: 9px;
}

.topbar-session a:focus-visible,
.topbar-menu summary:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.72);
    outline-offset: 2px;
}

.topbar-logout {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-weight: 600 !important;
    margin-left: 6px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    padding: 5px 12px;
}

.topbar-logout:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.topbar-session .topbar-link--light,
.topbar-link--light {
    background: white;
    border: 1px solid #d9cbe3;
    color: var(--sensipode-blue);
}

.topbar-menu {
    position: relative;
}

.topbar-menu summary {
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.76);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    list-style: none;
    min-height: 36px;
    padding: 9px 8px;
}

.topbar-menu summary:hover {
    background: rgba(255, 255, 255, 0.08);
    color: white;
}

.topbar-menu summary::-webkit-details-marker {
    display: none;
}

.topbar-menu summary::after {
    content: "⌄";
    margin-left: 8px;
}

.topbar-menu-panel {
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 16px 38px rgba(39, 36, 69, 0.18);
    display: grid;
    gap: 4px;
    min-width: 180px;
    padding: 8px;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: var(--z-menu);
}

.topbar-session .topbar-menu-panel a {
    background: transparent;
    border-radius: 6px;
    color: var(--sensipode-blue);
    padding: 8px 10px;
}

.topbar-session .topbar-menu-panel a:hover {
    background: #fbf5f8;
}

.page-shell {
    margin: 0 auto;
    max-width: 1280px;
    padding: 32px clamp(18px, 4vw, 48px) 64px;
}

.page-shell--wide {
    max-width: 1600px;
}

.intro {
    max-width: 760px;
}

.eyebrow {
    color: var(--sensipode-pink);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    margin: 0 0 8px;
    text-transform: uppercase;
}

h1,
h2,
p {
    margin-top: 0;
}

h1 {
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1;
    margin-bottom: 16px;
}

.intro p:not(.eyebrow),
.panel-heading p {
    color: var(--ink-soft);
    font-size: 17px;
    line-height: 1.5;
}

.time-reference {
    background: #ece5ef;
    border-radius: 6px;
    color: var(--sensipode-blue);
    display: inline-flex;
    font-size: 13px;
    font-weight: 900;
    margin-top: 6px;
    padding: 7px 10px;
}

.metrics {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin: 28px 0;
}

.metric,
.panel {
    background: var(--surface-strong);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.metric {
    padding: 18px;
}

.metric span {
    color: var(--sensipode-pink);
    display: block;
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
}

.metric strong {
    display: block;
    font-size: 13px;
    margin-top: 8px;
    text-transform: uppercase;
}

.panel {
    margin-top: 24px;
    overflow: hidden;
}

.panel-heading {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 20px;
}

.my-projects-page {
    padding-top: 28px;
}

.my-projects-header {
    align-items: end;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin-bottom: 18px;
}

.my-projects-header h1 {
    font-size: 34px;
    line-height: 1.05;
    margin-bottom: 0;
}

.my-projects-summary {
    align-items: end;
    color: var(--ink-soft);
    display: grid;
    font-size: 12px;
    gap: 2px;
    justify-items: end;
}

.my-projects-summary strong {
    color: var(--sensipode-blue);
    font-size: 16px;
}

.my-projects-filters {
    align-items: end;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(260px, 1.3fr) minmax(150px, 0.7fr) minmax(180px, 0.8fr) auto;
    margin-bottom: 16px;
}

.my-projects-filters label {
    display: grid;
    gap: 5px;
}

.my-projects-filters span {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.my-projects-filters input,
.my-projects-filters select {
    background: white;
    border: 1px solid #d9cbe3;
    border-radius: 6px;
    color: var(--sensipode-blue);
    font-size: 13px;
    font-weight: 800;
    min-height: 34px;
    padding: 7px 30px 7px 10px;
}

.my-projects-filters button {
    background: var(--sensipode-pink);
    border: 0;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    font-size: 13px;
    font-weight: 900;
    min-height: 34px;
    padding: 7px 16px;
}

.my-projects-list {
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow-x: auto;
}

.my-projects-table {
    min-width: 1120px;
}

.my-projects-row {
    align-items: center;
    border-bottom: 1px solid var(--line);
    color: var(--sensipode-blue);
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(280px, 2.2fr) 88px 140px minmax(170px, 1fr) 120px 92px 72px 82px 24px;
    min-height: 58px;
    padding: 10px 14px;
    text-decoration: none;
}

.my-projects-row:last-child {
    border-bottom: 0;
}

.my-projects-row--head {
    background: #fbfafc;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 900;
    min-height: 38px;
    text-transform: uppercase;
}

.my-projects-row--item {
    font-size: 13px;
    font-weight: 800;
}

.my-projects-row--item:hover {
    background: #fff6f8;
}

.my-projects-row--locked {
    cursor: default;
}

.my-projects-row--locked:hover {
    background: white;
}

.my-projects-project {
    display: grid;
    gap: 3px;
}

.my-projects-project strong {
    font-size: 14px;
}

.my-projects-project small,
.my-projects-team small {
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 600;
}

.my-projects-team {
    align-items: center;
    display: flex;
    gap: 5px;
    min-width: 0;
}

.my-projects-team i {
    align-items: center;
    background: #ece5ef;
    border: 1px solid #d9cbe3;
    border-radius: 50%;
    color: var(--sensipode-blue);
    display: inline-flex;
    flex: 0 0 24px;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.my-projects-team small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.my-projects-page .status-pill {
    border-radius: 6px;
    display: inline-flex;
    font-style: normal;
    font-weight: 900;
    justify-content: center;
    min-width: 58px;
    padding: 5px 8px;
}

.my-projects-page .status-pill--weather-ok,
.my-projects-page .status-pill--risk-faible {
    background: #dff6e7;
    color: var(--color-positive);
}

.my-projects-page .status-pill--weather-vigilance,
.my-projects-page .status-pill--risk-moyen {
    background: #fcf4e1;
    color: #8e721b;
}

.my-projects-page .status-pill--weather-risque,
.my-projects-page .status-pill--risk-eleve {
    background: #fce2df;
    color: var(--color-negative);
}

.my-projects-drift--bad {
    color: var(--color-negative);
}

.my-projects-drift--good {
    color: var(--color-positive);
}

.my-projects-open {
    color: var(--ink-soft);
    font-size: 24px;
    line-height: 1;
}

.my-projects-empty {
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 800;
    padding: 22px;
}

.presence-page {
    background: transparent;
    min-height: calc(100vh - 54px);
    padding-top: 18px;
}

.presence-header {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

.presence-week-nav {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: center;
}

.presence-week-nav a,
.presence-week-nav strong {
    align-items: center;
    background: white;
    border: 1px solid #d9cbe3;
    border-radius: 6px;
    color: var(--sensipode-blue);
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    min-height: 34px;
    padding: 7px 12px;
    text-decoration: none;
}

.presence-week-nav a:not(.presence-today-link) {
    justify-content: center;
    min-width: 34px;
    padding: 6px;
}

.presence-today-link {
    background: var(--sensipode-blue) !important;
    border-color: var(--sensipode-blue) !important;
    color: white !important;
}

.presence-board {
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.presence-table-wrap {
    overflow-x: auto;
}

.presence-week-table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 1060px;
    table-layout: fixed;
}

.presence-week-table th,
.presence-week-table td {
    border-bottom: 1px solid var(--line);
    text-align: center;
    vertical-align: middle;
}

.presence-week-table th {
    background: #fff;
    color: var(--sensipode-blue);
    min-width: 116px;
    padding: 8px 6px 7px;
    width: 120px;
}

.presence-week-table th strong,
.presence-week-table th span {
    display: block;
}

.presence-week-table th span {
    color: var(--ink-soft);
    font-size: 11px;
    margin-top: 3px;
}

.presence-week-table td {
    padding: 7px 6px;
}

.presence-week-table .is-today {
    background: #f5fbff;
    box-shadow: inset 1px 0 #c5e5fb, inset -1px 0 #c5e5fb;
}

.presence-week-table .is-past:not(.presence-week-table__collaborator) {
    opacity: 0.64;
}

.presence-week-table .is-weekend:not(.is-today):not(.presence-week-table__collaborator) {
    background: #faf9fc;
}

.presence-today-badge {
    background: #dff0ff;
    border-radius: 999px;
    color: #17618f !important;
    display: inline-flex !important;
    font-size: 10px !important;
    font-weight: 700;
    justify-content: center;
    margin: 0 auto 4px !important;
    padding: 2px 7px;
    width: fit-content;
}

.presence-week-table__collaborator {
    background: white !important;
    border-right: 1px solid var(--line);
    left: 0;
    min-width: 220px !important;
    position: sticky;
    text-align: left !important;
    width: 220px !important;
    z-index: 2;
}

thead .presence-week-table__collaborator {
    background: #fff !important;
    z-index: 3;
}

td.presence-week-table__collaborator {
    vertical-align: middle;
}

.presence-week-table__collaborator strong,
.presence-week-table__collaborator small {
    display: block;
}

.presence-week-table__collaborator small {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 400;
    margin-top: 1px;
}

.presence-week-table__collaborator strong {
    font-size: 13px;
    font-weight: 700;
}

.presence-week-table .half-day-pair {
    gap: 6px;
    grid-template-columns: 48px 48px;
    justify-content: center;
    min-width: 102px;
}

.presence-week-table .half-day-cell {
    display: flex;
    justify-content: center;
    min-width: 0;
}

.presence-week-table .half-day-cell small {
    display: none;
}

.presence-half-labels {
    display: grid;
    gap: 6px;
    grid-template-columns: 48px 48px;
    justify-content: center;
    margin-top: 6px;
}

.presence-half-labels span {
    color: var(--ink-soft) !important;
    font-size: 10px !important;
    font-weight: 700;
    margin: 0 !important;
}

.my-workload-page {
    background: transparent;
    color: var(--sensipode-blue);
    font-size: 12px;
    min-height: calc(100vh - 56px);
    padding: 18px 22px 32px;
}

.my-workload-header {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(180px, 1fr) auto auto;
    margin-bottom: 14px;
}

.my-workload-flash {
    border-radius: 6px;
    font-weight: 900;
    margin-bottom: 10px;
    padding: 9px 12px;
}

.my-workload-flash--success {
    background: #dff6e7;
    color: var(--color-positive);
}

.my-workload-flash--warning {
    background: #fcf4e1;
    color: #8e721b;
}

.my-workload-flash--error {
    background: #fce2df;
    color: var(--color-negative);
}

.my-workload-validate-form {
    display: inline-flex;
    margin: 0;
}

.my-workload-header h1 {
    font-size: 24px;
    line-height: 1;
    margin: 0;
}

.my-workload-week-nav,
.my-workload-mode {
    align-items: center;
    display: flex;
    gap: 8px;
}

.my-workload-week-nav a,
.my-workload-week-nav strong,
.my-workload-mode a {
    align-items: center;
    background: white;
    border: 1px solid #d9cbe3;
    border-radius: 6px;
    color: var(--sensipode-blue);
    display: inline-flex;
    font-size: 13px;
    font-weight: 900;
    min-height: 36px;
    padding: 8px 12px;
    text-decoration: none;
}

.my-workload-week-nav a:not(.my-workload-today) {
    font-size: 22px;
    justify-content: center;
    line-height: 1;
    min-width: 38px;
    padding: 6px;
}

.my-workload-mode a.is-active {
    background: var(--sensipode-blue);
    border-color: var(--sensipode-blue);
    color: white;
}

.my-workload-summary {
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(5, minmax(120px, 1fr)) minmax(180px, 1.2fr);
    margin-bottom: 14px;
    overflow: hidden;
}

.my-workload-summary--declare {
    grid-template-columns: repeat(4, minmax(120px, 1fr)) minmax(220px, 1.25fr);
}

.my-workload-validation-card {
    align-items: center;
    grid-template-columns: 1fr auto;
}

.my-workload-validation-card span {
    grid-column: 1 / -1;
}

.my-workload-validation-card form {
    justify-self: end;
}

.my-workload-validation-card button {
    background: var(--sensipode-blue);
    border: 0;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    min-height: 30px;
    padding: 7px 10px;
}

.my-workload-summary div {
    border-right: 1px solid var(--line);
    display: grid;
    gap: 4px;
    padding: 12px 14px;
}

.my-workload-summary div:last-child {
    border-right: 0;
}

.my-workload-summary span {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 900;
}

.my-workload-summary strong {
    font-size: 16px;
}

.my-workload-summary .is-available strong {
    color: var(--color-positive);
}

.my-workload-summary .is-risk strong {
    color: var(--color-negative);
}

.my-workload-alerts {
    align-content: center;
}

.my-workload-alert {
    border-radius: 6px;
    display: inline-flex;
    font-size: 12px !important;
    justify-content: center;
    padding: 5px 8px;
    width: fit-content;
}

.my-workload-alert--risk {
    background: #fce2df;
    color: var(--color-negative);
}

.my-workload-alert--watch {
    background: #fcf4e1;
    color: #8e721b;
}

.my-workload-alert--ok {
    background: #dff6e7;
    color: var(--color-positive);
}

.my-workload-alert--neutral {
    background: #e7f3f7;
    color: #2b6685;
}

.my-workload-workbench {
    align-items: start;
    display: grid;
    gap: 14px;
    grid-template-columns: 290px minmax(0, 1fr) 330px;
}

.my-workload-workbench.is-detail-closed {
    grid-template-columns: 290px minmax(0, 1fr);
}

.my-workload-workbench--declare {
    grid-template-columns: minmax(0, 1fr) 330px;
}

.my-workload-workbench--declare.is-detail-closed {
    grid-template-columns: minmax(0, 1fr);
}

.my-workload-backlog,
.my-workload-calendar,
.my-workload-detail {
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.my-workload-backlog {
    display: grid;
    gap: 0;
}

.my-workload-backlog__head {
    cursor: pointer;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 5px;
    grid-template-columns: 1fr auto;
    list-style: none;
    padding: 14px;
}

.my-workload-backlog__head::-webkit-details-marker {
    display: none;
}

.my-workload-backlog__head::after {
    align-self: center;
    border: 1px solid #d9cbe3;
    border-radius: 5px;
    content: "Replier";
    font-size: 11px;
    font-weight: 900;
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
    padding: 5px 7px;
}

.my-workload-backlog:not([open]) {
    align-self: start;
}

.my-workload-backlog:not([open]) .my-workload-backlog__head {
    border-bottom: 0;
}

.my-workload-backlog:not([open]) .my-workload-backlog__head::after {
    content: "Ouvrir";
}

.my-workload-backlog__head span {
    color: var(--ink-soft);
    font-weight: 900;
}

.my-workload-backlog__head strong {
    font-size: 22px;
}

.my-workload-backlog-group {
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 8px;
    padding: 12px 14px;
}

.my-workload-backlog-group--blue { box-shadow: inset 3px 0 0 #3095b4; }
.my-workload-backlog-group--teal { box-shadow: inset 3px 0 0 #1e9d8b; }
.my-workload-backlog-group--green { box-shadow: inset 3px 0 0 #00af3f; }
.my-workload-backlog-group--yellow { box-shadow: inset 3px 0 0 #d7a900; }
.my-workload-backlog-group--carrot { box-shadow: inset 3px 0 0 #e98300; }
.my-workload-backlog-group--coral { box-shadow: inset 3px 0 0 #dc5034; }
.my-workload-backlog-group--purple { box-shadow: inset 3px 0 0 #8c6cd0; }
.my-workload-backlog-group--pink { box-shadow: inset 3px 0 0 #c966cd; }

/* Chantier Ma charge : tâches à venir dans le panneau « À placer ». */
.my-workload-backlog-group__title {
    align-items: center;
    display: flex;
    gap: 6px;
    min-width: 0;
}
.my-workload-backlog-group__title strong {
    overflow-wrap: anywhere;
}
.my-workload-backlog-toggle {
    align-items: center;
    background: none;
    border: 0;
    border-radius: 5px;
    color: var(--ink-soft);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    padding: 2px;
}
.my-workload-backlog-toggle:hover,
.my-workload-backlog-toggle:focus-visible {
    background: rgba(39, 36, 69, 0.06);
    color: var(--sensipode-blue);
}
.my-workload-backlog-toggle .material-symbols-outlined {
    font-size: 20px;
}
.my-workload-backlog-group__hours {
    flex: 0 0 auto;
    white-space: nowrap;
}
.my-workload-backlog-group__hours em {
    color: var(--line);
    font-style: normal;
    font-weight: 700;
    margin: 0 1px;
}
.my-workload-backlog-future {
    display: grid;
    gap: 8px;
}
/* Sinon la règle de classe ci-dessus bat l'attribut [hidden] et le repli ne cache rien. */
.my-workload-backlog-future[hidden] {
    display: none;
}
/* Tâche future : même gabarit, contraste légèrement réduit + badge semaine. */
.my-workload-backlog-task--future {
    background: #fff;
    border-style: dashed;
    color: var(--ink-soft);
    justify-content: flex-start;
}
.my-workload-backlog-task--future > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
}
.my-workload-backlog-task--future strong {
    color: var(--sensipode-blue);
    font-weight: 700;
    opacity: 0.85;
}
.my-workload-week-badge {
    background: rgba(39, 36, 69, 0.06);
    border-radius: 999px;
    color: var(--ink-soft);
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 2px 7px;
    white-space: nowrap;
}

.my-workload-backlog-group__head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.my-workload-backlog-group__head strong {
    font-size: 13px;
}

.my-workload-backlog-group__head span,
.my-workload-backlog-task small,
.my-workload-helper,
.my-workload-empty {
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 800;
}

.my-workload-backlog-task {
    align-items: center;
    background: #fbfafc;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--sensipode-blue);
    cursor: grab;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 9px 10px;
    text-align: left;
}

.my-workload-backlog-task strong,
.my-workload-backlog-task small {
    display: block;
}

.my-workload-backlog-task em {
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}

.my-workload-helper,
.my-workload-empty {
    padding: 14px;
}

.my-workload-calendar {
    min-width: 0;
    overflow-x: auto;
}

.my-workload-day-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    min-width: 820px;
}

.my-workload-day-head {
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    display: grid;
    gap: 9px;
    padding: 12px 10px;
}

.my-workload-day-head.is-past,
.my-workload-day-column.is-past {
    background: #fbfafc;
    opacity: 0.64;
}

.my-workload-day-head.is-past .my-workload-block,
.my-workload-day-column.is-past .my-workload-block {
    opacity: 0.62;
}

.my-workload-day-head.is-today,
.my-workload-day-column.is-today {
    background: #f7fbff;
    box-shadow: inset 0 0 0 1px #9fc7f4;
}

.my-workload-day-head:last-child,
.my-workload-day-column:last-child {
    border-right: 0;
}

.my-workload-day-head > div:first-child strong,
.my-workload-day-head > div:first-child span {
    display: block;
    text-align: center;
}

.my-workload-day-head > div:first-child span {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 900;
    margin-top: 3px;
}

.my-workload-day-head .half-day-pair {
    grid-template-columns: 1fr 1fr;
    min-width: 0;
}

.my-workload-day-head dl {
    display: grid;
    gap: 4px;
    margin: 0;
}

.my-workload-day-head dl div {
    align-items: center;
    background: #f8f6f9;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    padding: 6px 8px;
}

.my-workload-day-head dt,
.my-workload-day-head dd {
    margin: 0;
}

.my-workload-day-head dt {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 900;
}

.my-workload-day-head dd {
    font-weight: 900;
}

.my-workload-day-head--available dl div:last-child dd {
    color: var(--color-positive);
}

.my-workload-day-head--risk dl div:last-child dd,
.my-workload-day-head dl .is-risk dd {
    color: var(--color-negative);
}

.my-workload-day-column {
    border-right: 1px solid var(--line);
    display: grid;
    gap: 10px;
    grid-auto-rows: min-content;
    min-height: 420px;
    padding: 12px 10px;
    position: relative;
}

.my-workload-day-column.is-drop-target,
.my-workload-slot-drops button.is-drop-target {
    background: #f7fbff;
    box-shadow: inset 0 0 0 2px #9fc7f4;
}

.my-workload-day-column.has-draft-drop::after {
    background: #e6f1ff;
    border: 1px solid #c9dffd;
    border-radius: 6px;
    color: #174a82;
    content: "Placement à confirmer";
    font-size: 12px;
    font-weight: 900;
    padding: 8px;
    text-align: center;
}

.my-workload-day-column--risk {
    background: #fffafa;
}

.my-workload-day-column.is-disabled {
    background: #fbf9fb;
}

.my-workload-day-column.is-disabled .my-workload-block {
    opacity: 0.68;
}

.my-workload-off-pattern {
    align-items: center;
    background: repeating-linear-gradient(-45deg, rgba(233, 7, 76, 0.08), rgba(233, 7, 76, 0.08) 4px, transparent 4px, transparent 10px);
    border-radius: 6px;
    color: var(--ink-soft);
    display: flex;
    font-size: 12px;
    font-weight: 900;
    justify-content: center;
    min-height: 44px;
}

.my-workload-slot-drops {
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    position: relative;
    z-index: 2;
}

.my-workload-slot-drops button {
    background: #fbfafc;
    border: 1px dashed #d9cbe3;
    border-radius: 6px;
    color: var(--ink-soft);
    cursor: copy;
    font: inherit;
    font-size: 10px;
    font-weight: 900;
    min-height: 24px;
    padding: 3px 4px;
}

.my-workload-slot-drops button:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.my-workload-block {
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--sensipode-blue);
    display: grid;
    gap: 5px;
    min-height: 66px;
    padding: 9px;
    text-decoration: none;
}

.my-workload-block__meta {
    align-items: center;
    display: flex !important;
    gap: 3px;
}

.my-workload-block span,
.my-workload-block__meta {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.my-workload-block .material-symbols-outlined {
    font-size: 13px;
    text-transform: none;
}

.my-workload-block strong,
.my-workload-block small {
    display: block;
}

.my-workload-block small {
    font-size: 12px;
    font-weight: 800;
}

.my-workload-block--blue { background: #e7f2f6; border-color: #c6e0e9; }
.my-workload-block--teal { background: #e4f4f1; border-color: #c2e5dd; }
.my-workload-block--green { background: #e2f6e9; border-color: #bce8cc; }
.my-workload-block--yellow { background: #fbf3d5; border-color: #f0e2a5; }
.my-workload-block--carrot { background: #fdefdc; border-color: #f7d5ab; }
.my-workload-block--coral { background: #fce9e4; border-color: #f6cabd; }
.my-workload-block--purple { background: #efeafa; border-color: #d5cbef; }
.my-workload-block--pink { background: #f9e9fa; border-color: #eecbef; }

.my-workload-block.is-fixed {
    box-shadow: inset 3px 0 0 rgba(39, 36, 69, 0.45);
}

.my-workload-block.is-travel {
    border-style: dashed;
}

.my-workload-add-slot {
    align-items: center;
    background: transparent;
    border: 1px dashed #b7a8c3;
    border-radius: 7px;
    color: var(--sensipode-blue);
    cursor: pointer;
    display: flex;
    font-weight: 900;
    justify-content: center;
    min-height: 54px;
}

.my-workload-declare-slots {
    display: grid;
    gap: 10px;
}

.my-workload-declare-slot {
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 7px;
    padding-bottom: 10px;
}

.my-workload-declare-slot:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.my-workload-declare-slot > strong {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.my-workload-block-time {
    color: var(--sensipode-blue) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: none !important;
}

.my-workload-block.is-actual-only {
    border-style: dashed;
}

.my-workload-detail {
    max-height: calc(100vh - 90px);
    overflow: auto;
    position: sticky;
    top: 76px;
}

.my-workload-detail--blue { box-shadow: inset 4px 0 0 #3095b4; }
.my-workload-detail--teal { box-shadow: inset 4px 0 0 #1e9d8b; }
.my-workload-detail--green { box-shadow: inset 4px 0 0 #00af3f; }
.my-workload-detail--yellow { box-shadow: inset 4px 0 0 #d7a900; }
.my-workload-detail--carrot { box-shadow: inset 4px 0 0 #e98300; }
.my-workload-detail--coral { box-shadow: inset 4px 0 0 #dc5034; }
.my-workload-detail--purple { box-shadow: inset 4px 0 0 #8c6cd0; }
.my-workload-detail--pink { box-shadow: inset 4px 0 0 #c966cd; }

.my-workload-detail__head {
    align-items: start;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 10px;
    grid-template-columns: auto 1fr auto auto;
    justify-content: space-between;
    padding: 10px 12px;
}

.my-workload-detail__dot {
    border-radius: 999px;
    height: 10px;
    margin-top: 4px;
    width: 10px;
}

.my-workload-detail__head strong,
.my-workload-detail__head span {
    display: block;
}

.my-workload-detail__head span {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 800;
    margin-top: 2px;
}

.my-workload-detail__head a {
    align-items: center;
    color: var(--ink-soft);
    display: inline-flex;
    text-decoration: none;
}

.my-workload-detail-lock {
    background: #dff6e7;
    border-radius: 6px;
    color: var(--color-positive);
    padding: 8px;
}

.my-workload-detail section {
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 8px;
    padding: 10px 12px;
}

.my-workload-detail h2 {
    color: var(--ink-soft);
    font-size: 11px;
    letter-spacing: 0;
    margin: 0;
    text-transform: uppercase;
}

.my-workload-detail dl {
    display: grid;
    gap: 6px;
    margin: 0;
}

.my-workload-detail-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.my-workload-detail-metrics div {
    border-right: 1px solid var(--line);
    display: grid;
    gap: 4px;
}

.my-workload-detail-metrics div:last-child {
    border-right: 0;
}

.my-workload-detail-metrics span,
.my-workload-detail-facts span:not(.material-symbols-outlined) {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 900;
}

.my-workload-detail-metrics strong,
.my-workload-detail-facts strong {
    font-size: 13px;
}

.my-workload-detail-facts {
    grid-template-columns: 1fr;
}

.my-workload-detail-facts div {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: 22px 70px 1fr;
}

.my-workload-detail-facts .material-symbols-outlined {
    color: var(--ink-soft);
}

.my-workload-detail-edit form {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr;
}

.my-workload-detail-actual textarea {
    background: white;
    border: 1px solid #d9cbe3;
    border-radius: 5px;
    color: var(--sensipode-blue);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    min-height: 68px;
    padding: 7px 8px;
    resize: vertical;
}

.my-workload-detail-comment {
    grid-column: 1 / -1;
}

.my-workload-detail-day-summary {
    background: #f8f6f9;
    border-radius: 6px;
    display: grid;
    gap: 3px;
    grid-column: 1 / -1;
    padding: 8px 10px;
}

.my-workload-detail-day-summary span {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 800;
}

.my-workload-consumption-levels div {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 8px;
    grid-template-columns: 58px 1fr auto;
    padding: 6px 0;
}

.my-workload-consumption-levels div:last-child {
    border-bottom: 0;
}

.my-workload-consumption-levels span {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.my-workload-consumption-levels strong,
.my-workload-consumption-levels em {
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.my-workload-consumption-levels em.is-risk {
    color: var(--color-negative);
}

/* Action principale du panneau alignée sur le système c-btn (primaire = SensiBlue).
   Ciblé sur le submit uniquement : ne pas capturer le bouton calendrier du
   widget .date-entry (type="button") présent dans le même formulaire. */
.my-workload-detail-edit button[type="submit"] {
    align-items: center;
    background: var(--sensipode-blue);
    border: 1px solid var(--sensipode-blue);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 800;
    gap: 6px;
    grid-column: 1 / -1;
    justify-content: center;
    min-height: 36px;
    transition: filter .15s ease;
}
.my-workload-detail-edit button[type="submit"]:hover {
    filter: brightness(1.14);
}

.my-workload-detail-context {
    font-size: 11px;
}

.my-workload-detail dl div {
    display: grid;
    gap: 6px;
    grid-template-columns: 92px 1fr;
}

.my-workload-detail dt,
.my-workload-detail dd {
    margin: 0;
}

.my-workload-detail dt {
    color: var(--ink-soft);
    font-weight: 800;
}

.my-workload-detail dd {
    font-weight: 900;
}

.my-workload-warning {
    background: #fcf4e1;
    border-radius: 6px;
    color: #8e721b;
    font-weight: 900;
    margin: 0;
    padding: 8px 10px;
}

.my-workload-detail-actions {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr;
}

.my-workload-detail-actions form {
    display: contents;
}

.my-workload-detail-actions label {
    color: var(--ink-soft);
    display: grid;
    gap: 4px;
    font-size: 11px;
    font-weight: 900;
}

.my-workload-detail-actions input,
.my-workload-detail-actions select,
.my-workload-dialog input,
.my-workload-dialog select {
    background-color: white;
    border: 1px solid #d9cbe3;
    border-radius: 5px;
    color: var(--sensipode-blue);
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    min-height: 32px;
    padding: 6px 30px 6px 8px;
}

.my-workload-checkbox {
    align-items: center;
    display: flex !important;
    flex-direction: row;
    gap: 6px !important;
}

.my-workload-checkbox input[type="checkbox"] {
    min-height: 16px;
    width: 16px;
}

/* Boutons d'action du panneau alignés sur c-btn--secondary (bordure charte). */
.my-workload-detail-actions button,
.my-workload-detail-actions a,
.my-workload-action-button {
    align-items: center;
    background: transparent;
    border: 1px solid var(--sensipode-blue);
    border-radius: 8px;
    color: var(--sensipode-blue);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    gap: 5px;
    justify-content: center;
    min-height: 38px;
    padding: 8px;
    text-align: center;
    text-decoration: none;
    transition: background .15s ease;
}
.my-workload-detail-actions button:hover,
.my-workload-detail-actions a:hover,
.my-workload-action-button:hover {
    background: var(--pole-agency-bg);
}
/* « Retirer » = action destructive -> teinte danger (SensiPink), comme c-btn--danger. */
.my-workload-detail-actions form:last-of-type button {
    border-color: var(--sensipode-pink);
    color: var(--sensipode-pink);
}

/* Série récurrente : portée de la suppression (celle-ci / les suivantes). */
.my-workload-remove-scope {
    appearance: none;
    -webkit-appearance: none;
    background-color: white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23272445' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    border: 1px solid #d9cbe3;
    border-radius: 6px;
    color: var(--sensipode-blue);
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 6px;
    min-height: 30px;
    padding: 4px 26px 4px 8px;
    width: 100%;
}

.my-workload-detail-actions a {
    grid-column: 1 / -1;
}

.my-workload-color-form {
    display: flex;
    gap: 8px;
}

.my-workload-color-dot {
    border: 2px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    height: 24px;
    width: 24px;
}

.my-workload-color-dot.is-active {
    border-color: var(--sensipode-blue);
}

.my-workload-color-dot--blue { background: #3095b4; }
.my-workload-color-dot--teal { background: #1e9d8b; }
.my-workload-color-dot--green { background: #00af3f; }
.my-workload-color-dot--yellow { background: #d7a900; }
.my-workload-color-dot--carrot { background: #e98300; }
.my-workload-color-dot--coral { background: #dc5034; }
.my-workload-color-dot--purple { background: #8c6cd0; }
.my-workload-color-dot--pink { background: #c966cd; }

.my-workload-dialog {
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--sensipode-blue);
    max-width: 680px;
    padding: 0;
    width: min(680px, calc(100vw - 32px));
}

.my-workload-dialog::backdrop {
    background: rgba(39, 36, 69, 0.18);
}

.my-workload-dialog form {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 16px;
}

.my-workload-dialog__head,
.my-workload-dialog__actions {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.my-workload-dialog__head,
.my-workload-dialog__actions,
.my-workload-dialog-error,
.my-workload-distribution,
.my-workload-dialog-note {
    grid-column: 1 / -1;
}

.my-workload-dialog__head button,
.my-workload-dialog__actions button {
    align-items: center;
    background: white;
    border: 1px solid #d9cbe3;
    border-radius: 6px;
    color: var(--sensipode-blue);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 900;
    gap: 6px;
    justify-content: center;
    padding: 7px 10px;
}

.my-workload-dialog__head button {
    border-color: transparent;
    padding: 4px;
}

.my-workload-dialog__actions button[type="submit"] {
    background: var(--sensipode-blue);
    border-color: var(--sensipode-blue);
    color: white;
}

.dialog-field--action,
.dialog-field--allocation,
.dialog-field--internal,
.dialog-field--project {
    grid-column: 1 / -1;
}

.dialog-field--day,
.dialog-field--slot,
.dialog-field--fixed,
.dialog-field--repeat-until {
    grid-column: span 1;
}

.dialog-field--hours {
    grid-column: span 1;
}

.dialog-field--repeat {
    align-self: end;
    grid-column: span 2;
    min-height: 32px;
}

.my-workload-dialog label {
    color: var(--ink-soft);
    display: grid;
    gap: 4px;
    font-size: 11px;
    font-weight: 900;
    min-width: 0;
}

.my-workload-dialog label[hidden] {
    display: none;
}

.my-workload-dialog select,
.my-workload-dialog input {
    min-width: 0;
    width: 100%;
}

.my-workload-dialog__actions {
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

.my-workload-dialog__actions button {
    min-width: 132px;
}

.my-workload-readonly-context {
    background: #f7f6fa;
    border-radius: 5px;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
    min-height: 0;
    padding: 7px 8px;
}

.my-workload-readonly-context:empty {
    display: none;
}

.my-workload-dialog-note {
    border-radius: 6px;
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    margin: 0;
    padding: 10px 12px;
}

.my-workload-dialog-note[hidden] {
    display: none;
}

.my-workload-dialog-note--internal {
    background: #eef8f1;
}

.my-workload-dialog-note--travel {
    background: #f5f0fb;
}

.my-workload-split-dialog {
    max-width: 520px;
    width: min(520px, calc(100vw - 32px));
}

.my-workload-split-dialog form {
    grid-template-columns: 1fr;
}

.my-workload-split-rows {
    display: grid;
    gap: 8px;
}

.my-workload-split-row {
    align-items: end;
    display: grid;
    gap: 8px;
    grid-template-columns: 76px 76px minmax(130px, 1fr) 100px;
}

.my-workload-split-row strong {
    align-self: center;
}

.my-workload-distribution {
    border: 1px solid var(--line);
    border-radius: 6px;
    display: grid;
    gap: 8px;
    padding: 10px;
}

.my-workload-distribution[hidden] {
    display: none;
}

.my-workload-distribution-row {
    align-items: center;
    display: grid;
    gap: 8px;
}

.my-workload-distribution__head {
    align-items: end;
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 120px minmax(170px, auto);
}

.my-workload-distribution__head label {
    font-size: 10px;
}

.my-workload-distribution p {
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 800;
    margin: 0;
}

.my-workload-distribution-table-head {
    align-items: center;
    color: var(--ink-soft);
    display: grid;
    font-size: 10px;
    font-weight: 900;
    gap: 8px;
    grid-template-columns: 22px 96px minmax(150px, 1fr) 110px 30px;
    padding: 0 2px;
}

.my-workload-distribution-rows {
    display: grid;
    gap: 6px;
}

.my-workload-distribution-row {
    grid-template-columns: 22px 96px minmax(150px, 1fr) 110px 30px;
}

.my-workload-distribution-row [data-distribution-index] {
    color: var(--sensipode-blue);
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.my-workload-distribution button {
    background: white;
    border: 1px solid #d9cbe3;
    border-radius: 6px;
    color: var(--sensipode-blue);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    padding: 7px 9px;
}

.my-workload-dialog-error {
    background: #fce2df;
    border-radius: 6px;
    color: var(--color-negative);
    font-weight: 900;
    margin: 0;
    padding: 8px;
}

.panel-heading h2 {
    font-size: 22px;
    margin-bottom: 4px;
}

.week-selector {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.week-selector label {
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.week-selector select {
    appearance: none;
    background-color: white;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--sensipode-blue);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    min-width: 240px;
    padding: 9px 34px 9px 10px;
}

.project-list {
    display: grid;
}

.project-row {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(260px, 1fr) 120px 140px 72px;
    padding: 14px 20px;
}

.project-row:last-child {
    border-bottom: 0;
}

.project-row strong,
.project-row span {
    display: block;
}

.project-row div > span {
    color: var(--ink-soft);
    margin-top: 4px;
}

.workload-page {
    background: #fff;
    font-size: 13px;
    min-height: calc(100vh - var(--topbar-height));
    overflow-x: hidden;
    padding: 0;
}

.workload-toolbar {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-template-columns: auto auto minmax(320px, 1fr);
}

.segmented-control {
    border: 1px solid #d9cbe3;
    border-radius: 8px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
}

.segmented-control button {
    background: #fff;
    border: 0;
    border-right: 1px solid var(--line);
    color: var(--sensipode-blue);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    min-width: 88px;
    padding: 9px 12px;
}

.segmented-control button:last-child {
    border-right: 0;
}

.segmented-control button.is-active {
    background: #fde8ef;
}

.period-nav {
    align-items: center;
    display: flex;
    gap: 10px;
}

.period-nav a {
    align-items: center;
    border: 1px solid #d9cbe3;
    border-radius: 8px;
    color: var(--sensipode-blue);
    display: inline-flex;
    font-size: 22px;
    height: 38px;
    justify-content: center;
    text-decoration: none;
    width: 38px;
}

.period-nav strong {
    min-width: 82px;
    text-align: center;
}

.workload-filters {
    align-items: end;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    min-width: 0;
}

.workload-filters label {
    display: grid;
    gap: 4px;
}

.workload-filters span {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.workload-filters .sensi-select-menu span {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-transform: none;
}

.workload-filters select {
    background: #fff;
    border: 1px solid #d9cbe3;
    border-radius: 8px;
    color: var(--sensipode-blue);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    min-height: 38px;
    padding: 8px 12px;
}

.checkbox-dropdown {
    display: grid;
    gap: 4px;
    position: relative;
}

.checkbox-dropdown > span {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.checkbox-dropdown details {
    position: relative;
}

.checkbox-dropdown summary {
    align-items: center;
    background: #fff;
    border: 1px solid #d9cbe3;
    border-radius: 8px;
    color: var(--sensipode-blue);
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 800;
    justify-content: space-between;
    list-style: none;
    min-height: 38px;
    min-width: 184px;
    padding: 8px 12px;
}

.checkbox-dropdown summary::after {
    content: "⌄";
    font-size: 14px;
    margin-left: 14px;
}

.checkbox-dropdown summary::-webkit-details-marker {
    display: none;
}

.checkbox-dropdown-panel {
    background: white;
    border: 1px solid #d9cbe3;
    border-radius: 8px;
    box-shadow: 0 16px 38px rgba(39, 36, 69, 0.14);
    display: grid;
    gap: 2px;
    margin-top: 6px;
    max-height: 320px;
    min-width: 260px;
    overflow: auto;
    padding: 8px;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 20;
}

.checkbox-dropdown-panel--wide {
    min-width: min(560px, calc(100vw - 48px));
}

.checkbox-dropdown-panel p {
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 800;
    margin: 0 0 4px;
    padding: 4px 8px;
}

.checkbox-dropdown-panel label {
    align-items: center;
    border-radius: 6px;
    color: var(--sensipode-blue);
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 800;
    gap: 8px;
    padding: 7px 8px;
    white-space: nowrap;
}

.checkbox-dropdown-panel label span {
    color: var(--sensipode-blue);
    font-size: 12px;
    font-weight: 800;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.checkbox-dropdown-panel label:hover {
    background: #fbf5f8;
}

.checkbox-dropdown-panel input {
    accent-color: var(--sensipode-pink);
}

.checkbox-dropdown-actions {
    align-items: center;
    background: white;
    border-top: 1px solid var(--line);
    bottom: -8px;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    margin: 6px -8px -8px;
    padding: 8px;
    position: sticky;
}

.checkbox-dropdown-actions a {
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.checkbox-dropdown-actions button {
    background: var(--sensipode-blue);
    border: 0;
    border-radius: 7px;
    color: white;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    padding: 8px 10px;
}

.analysis-button {
    background: var(--sensipode-pink);
    border: 0;
    border-radius: 8px;
    color: white;
    cursor: default;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    min-height: 38px;
    padding: 0 18px;
}

.workload-note {
    background: #fcf4e1;
    border: 1px solid #f4dba0;
    border-radius: 8px;
    color: #6f5313;
    font-weight: 800;
    margin: 16px 24px 0;
    padding: 10px 12px;
}

.workload-table-scroll {
    --workload-period-width: 260px;
    --workload-period-columns: 42px 42px 46px 54px 54px;
    overflow-x: auto;
    overflow-y: visible;
    width: 100%;
}

.workload-grid {
    display: grid;
    grid-template-columns: 300px repeat(4, 112px) repeat(var(--period-count), var(--workload-period-width));
    width: max-content;
    overflow: visible;
}

.workload-header {
    align-items: center;
    align-content: center;
    background: #fff;
    border-bottom: 1px solid var(--line);
    color: #847399;
    display: grid;
    font-size: 12px;
    font-weight: 900;
    min-height: 84px;
    padding: 12px 8px;
    position: sticky;
    top: 0;
    z-index: 12;
}

.workload-left {
    border-right: 1px solid #d9cbe3;
    left: 0;
    position: sticky;
    z-index: 8;
}

.workload-header.workload-left {
    z-index: 20;
}

.workload-period {
    border-left: 1px solid var(--line);
    gap: 4px;
    grid-template-rows: auto auto auto;
    justify-items: center;
    text-align: center;
}

.workload-period strong {
    color: var(--sensipode-blue);
    display: block;
    font-size: 13px;
    line-height: 1.2;
}

.workload-period > span,
.workload-period > small {
    color: #847399;
    display: block;
    font-size: 11px;
    line-height: 1.2;
    margin-top: 0;
}

.workload-period .workload-subcols {
    display: grid;
    gap: 5px;
    grid-template-columns: var(--workload-period-columns);
    justify-content: center;
    margin-top: 4px;
}

.workload-period .workload-subcols span {
    color: #847399;
    display: block;
    font-size: 10px;
    margin-top: 0;
    min-width: 0;
    text-align: center;
}

.workload-row {
    display: contents;
}

.workload-main {
    cursor: pointer;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 300px repeat(4, 112px) repeat(var(--period-count), var(--workload-period-width));
    list-style: none;
}

.workload-main::-webkit-details-marker {
    display: none;
}

.workload-person,
.workload-kpi,
.workload-period-values {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    min-height: 58px;
    padding: 7px 8px;
}

.workload-person {
    background: #fff;
}

.is-team .workload-person,
.is-team .workload-kpi,
.is-team .workload-period-values {
    background: #f6f4f8;
}

.workload-person {
    gap: 8px;
}

.workload-chevron {
    align-items: center;
    border: 1px solid var(--sensipode-blue);
    border-radius: 999px;
    display: inline-flex;
    font-weight: 900;
    height: 22px;
    justify-content: center;
    width: 22px;
}

.workload-person strong {
    font-size: 13px;
}

.workload-person > span:last-child {
    min-width: 0;
}

.workload-person strong,
.workload-person small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workload-person small {
    font-size: 11px;
}

.workload-person strong,
.workload-person small {
    display: block;
}

.workload-person small {
    color: #847399;
    margin-top: 3px;
}

.workload-pill,
.workload-badge {
    background: #ece5ef;
    border-radius: 8px;
    color: #5b4b6f;
    font-weight: 900;
    justify-content: center;
}

.workload-pill {
    font-size: 12px;
    margin: 12px 6px;
    min-height: 30px;
    padding: 6px 7px;
    white-space: nowrap;
}

.workload-pill.is-danger,
.workload-badge--danger {
    background: #f9d6d1;
    color: #803945;
}

.workload-pill.is-available,
.workload-badge--available {
    background: #dff0f7;
    color: #245978;
}

.workload-badge--success {
    background: #d7f4df;
    color: #146b52;
}

.workload-badge--mixed {
    background: #fcf4e1;
    color: #6f5313;
    font-size: 11px;
}

.workload-period-values {
    display: grid;
    grid-template-columns: var(--workload-period-columns);
    gap: 5px;
    justify-content: center;
}

.workload-period-values > span:not(.workload-badge) {
    color: #5b4b6f;
    font-size: 11px;
    font-weight: 900;
    text-align: center;
}

.workload-badge {
    align-items: center;
    display: inline-flex;
    font-size: 11px;
    min-height: 26px;
    min-width: 0;
    overflow: hidden;
    padding: 4px 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workload-projects {
    display: grid;
    grid-column: 1 / -1;
}

.workload-project-line {
    background: #fffafd;
    display: grid;
    grid-template-columns: 300px repeat(4, 112px) repeat(var(--period-count), var(--workload-period-width));
}

.workload-project-name,
.workload-project-total,
.workload-project-period {
    align-items: center;
    border-bottom: 1px solid #f0eaf4;
    display: flex;
    min-height: 44px;
    padding: 7px 10px;
}

.workload-project-name {
    background: #fffafd;
    color: #5b4b6f;
    gap: 10px;
    left: 0;
    padding-left: 42px;
    position: sticky;
    z-index: 7;
}

.workload-project-name strong,
.workload-project-name small {
    display: block;
}

.workload-project-name small {
    color: #847399;
    font-size: 11px;
    margin-top: 3px;
}

.workload-project-total {
    color: #5b4b6f;
    font-size: 12px;
    font-weight: 900;
    justify-content: center;
}

.workload-project-period {
    border-left: 1px solid #f0eaf4;
    gap: 6px;
    justify-content: center;
}

.workload-project-period span {
    background: #ece5ef;
    border-radius: 7px;
    color: var(--sensipode-blue);
    font-size: 10px;
    font-weight: 900;
    min-width: 34px;
    padding: 6px;
    text-align: center;
}

@media (max-width: 1180px) {
    .workload-toolbar {
        grid-template-columns: 1fr;
    }

    .workload-filters {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 2px;
    }
}

.visually-hidden {
    height: 1px;
    left: -10000px;
    overflow: hidden;
    position: absolute;
    top: auto;
    width: 1px;
}

.project-row small {
    color: var(--ink-soft);
    display: block;
    font-size: 12px;
    font-weight: 800;
    margin-top: 3px;
}

.project-planning-page {
    background: #fff;
    min-height: calc(100vh - 46px);
    padding-bottom: 56px;
}

/* Vue planning : page à hauteur fixe qui ne scrolle pas — seule la timeline
   défile (en interne), donc le header des dates + la ligne Équipe restent collés. */
.project-planning-page.is-planning-grid {
    display: flex;
    flex-direction: column;
    /* min-height (pas height fixe + overflow:hidden) : si le volet de droite dépasse
       la hauteur écran, c'est la PAGE qui scrolle (jamais un scroll interne au volet).
       La table garde son propre défilement borné au viewport (max-height base). */
    min-height: calc(100vh - var(--topbar-height));
    padding-bottom: 0;
}

/* La page démarre déjà sous le topbar : la barre secondaire ne doit plus
   se décaler de la hauteur du topbar (sinon vide au-dessus). */
.project-planning-page.is-planning-grid .page-context-bar {
    top: 0;
}

.project-planning-page.is-planning-grid .project-planning-workbench {
    align-items: stretch;
    flex: 1 1 auto;
    grid-template-rows: minmax(0, 1fr);
    max-width: 100%;
    min-height: 0;
    overflow: hidden;
    width: 100%;
}

/* La colonne principale et la table remplissent l'espace restant : la table
   se dimensionne sur ce qui reste (quelle que soit la hauteur des barres),
   pas sur un calcul en vh approximatif. */
.project-planning-page.is-planning-grid .project-planning-main {
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.project-planning-page.is-planning-grid .project-planning-table {
    max-height: calc(100vh - var(--planning-timeline-header-top) - 14px);
    max-width: 100%;
    width: 100%;
}

/* Le volet latéral droit reste contenu dans le viewport : le planning scrolle
   horizontalement dans sa table, jamais via la page entière. */
.project-planning-page.is-planning-grid .project-context-panel,
.project-planning-page.is-planning-grid .project-milestone-panel {
    align-self: start;
    max-height: calc(100vh - var(--planning-timeline-header-top) - 14px);
    min-width: 0;
    overflow: auto;
    top: 0;
}

.project-planning-toolbar {
    align-items: end;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(260px, 420px) auto auto auto;
    padding: 16px 24px;
}

.project-planning-toolbar label {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.project-planning-toolbar label span {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.project-planning-toolbar select {
    background: white;
    border: 1px solid #d9cbe3;
    border-radius: 8px;
    color: var(--sensipode-blue);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    min-height: 42px;
    min-width: 0;
    padding: 8px 30px 8px 12px;
    width: 100%;
}

.project-mode-tabs {
    border: 1px solid #d9cbe3;
    border-radius: 8px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow: hidden;
    white-space: nowrap;
}

.project-mode-tabs a {
    align-items: center;
    border: 0;
    color: var(--sensipode-blue);
    display: inline-flex;
    font: inherit;
    font-size: 14px;
    font-weight: 900;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    text-decoration: none;
}

.project-mode-tabs a {
    background: white;
    border-right: 1px solid var(--line);
}

.project-mode-tabs a:last-child {
    border-right: 0;
}

.project-mode-tabs a.is-active {
    background: #fde8ef;
}

.project-export-panel {
    position: relative;
}

.project-export-panel summary {
    align-items: center;
    background: var(--sensipode-blue);
    border: 0;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 14px;
    font-weight: 900;
    min-height: 42px;
    padding: 0 16px;
}

.project-export-panel summary::-webkit-details-marker {
    display: none;
}

.project-export-panel > div {
    background: white;
    border: 1px solid #d9cbe3;
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(39, 36, 69, 0.16);
    display: grid;
    gap: 8px;
    min-width: 260px;
    padding: 14px;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
}

.project-export-panel strong {
    display: block;
    font-size: 14px;
}

.project-export-panel label {
    align-items: center;
    color: var(--sensipode-blue);
    display: flex;
    flex-direction: row;
    font-size: 13px;
    font-weight: 800;
    gap: 8px;
}

.project-export-panel input {
    accent-color: var(--sensipode-pink);
}

.project-export-panel select {
    background: white;
    border: 1px solid #d9cbe3;
    border-radius: 7px;
    color: var(--sensipode-blue);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    padding: 8px;
}

.project-export-panel button {
    background: var(--sensipode-pink);
    border: 0;
    border-radius: 7px;
    color: white;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    padding: 9px 10px;
}

.project-add-milestone {
    align-items: center;
    background: var(--sensipode-pink);
    border-radius: 8px;
    color: white;
    display: inline-flex;
    font-size: 14px;
    font-weight: 900;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    text-decoration: none;
}

.page-context-bar {
    align-items: center;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 10px;
    min-height: 54px;
    padding: 8px 18px;
    position: sticky;
    top: var(--topbar-height);
    z-index: var(--z-context-bar);
}

.project-context-bar {
    overflow: visible;
    flex-wrap: nowrap;
}

.context-project-select {
    flex: 1 1 340px;
    max-width: 420px;
    min-width: 220px;
}

.context-project-select select,
.context-action-menu select,
.context-select-field select,
.context-search-field input,
.workload-context-bar select {
    background: white;
    border: 1px solid #d9cbe3;
    border-radius: 7px;
    color: var(--sensipode-blue);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    min-height: 34px;
    padding: 6px 30px 6px 10px;
    width: 100%;
}

.context-view-tabs,
.context-zoom-tabs {
    align-items: center;
    border: 1px solid #d9cbe3;
    border-radius: 7px;
    display: inline-flex;
    flex: 0 0 auto;
    overflow: hidden;
}

.context-view-tabs a,
.context-view-tabs button,
.context-zoom-tabs a,
.context-zoom-tabs button {
    align-items: center;
    background: white;
    border: 0;
    border-right: 1px solid var(--line);
    color: var(--sensipode-blue);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    justify-content: center;
    min-height: 34px;
    padding: 0 11px;
    text-decoration: none;
    white-space: nowrap;
}

.context-view-tabs a:last-child,
.context-view-tabs button:last-child,
.context-zoom-tabs a:last-child,
.context-zoom-tabs button:last-child {
    border-right: 0;
}

.context-view-tabs a.is-active,
.context-view-tabs button.is-active,
.context-zoom-tabs a.is-active,
.context-zoom-tabs button.is-active {
    background: #f8e5ed;
    color: var(--sensipode-blue);
}

.context-period-nav {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 7px;
}

.context-period-nav a,
.context-icon-button,
.context-primary-action,
.context-date-jump {
    align-items: center;
    border: 1px solid #d9cbe3;
    border-radius: 7px;
    color: var(--sensipode-blue);
    display: inline-flex;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    justify-content: center;
    min-height: 34px;
    padding: 0 10px;
    text-decoration: none;
    white-space: nowrap;
}

.context-date-jump {
    background: transparent;
    cursor: pointer;
}

.context-date-jump:hover {
    background: #f4eefb;
}

.context-period-nav a:not(.context-today-link),
.context-icon-button--solo,
.context-date-jump {
    padding: 0;
    width: 34px;
}

.context-period-nav .material-symbols-outlined,
.context-icon-button .material-symbols-outlined,
.context-primary-action .material-symbols-outlined,
.context-date-jump .material-symbols-outlined {
    font-size: 18px;
}

.context-period-nav strong {
    color: var(--sensipode-blue);
    font-size: 13px;
    font-weight: 700;
    min-width: 92px;
    text-align: center;
}

.context-spacer {
    flex: 1 1 auto;
    min-width: 8px;
}

.context-action-inline {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 8px;
}

.context-secondary-action {
    align-items: center;
    background: white;
    border: 1px solid #d9cbe3;
    border-radius: 7px;
    color: var(--sensipode-blue);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    gap: 6px;
    min-height: 34px;
    padding: 0 11px;
    white-space: nowrap;
}

.context-secondary-action:hover:not(:disabled) {
    background: #f7f5f9;
}

.context-secondary-action:disabled {
    background: #f4f1f7;
    border-color: #e7dfee;
    color: #b7abc4;
    cursor: not-allowed;
}

.context-secondary-action .material-symbols-outlined {
    font-size: 17px;
}

.context-search-field {
    align-items: center;
    display: inline-grid;
    flex: 0 1 300px;
    grid-template-columns: auto minmax(0, 1fr);
    min-width: 220px;
}

.context-search-field .material-symbols-outlined {
    color: var(--ink-soft);
    font-size: 18px;
    grid-column: 1;
    grid-row: 1;
    margin-left: 10px;
    pointer-events: none;
    z-index: 1;
}

.context-search-field input {
    grid-column: 1 / -1;
    grid-row: 1;
    padding-left: 34px;
}

.context-select-field {
    flex: 0 0 180px;
}

.my-projects-context-bar,
.my-workload-context-bar,
.presence-context-bar,
.workload-context-bar {
    margin: -28px clamp(-48px, -4vw, -18px) 18px;
}

.my-workload-page .page-context-bar,
.workload-page .page-context-bar,
.project-planning-page .page-context-bar,
.project-milestones-page .page-context-bar {
    margin: 0 0 14px;
}

/* Cadrage et Droits vivent dans un .page-shell (padding haut/latéral) : on tire la
   barre blanche contre le menu bleu et en pleine largeur, comme les autres pages. */
.admin-projects-page .page-context-bar,
.admin-project-access-page .page-context-bar,
.my-projects-page .page-context-bar {
    margin: -32px calc(-1 * clamp(18px, 4vw, 48px)) 16px;
    border-radius: 0;
}

/* Ma charge a un padding propre (18px 22px) : on colle la barre au menu bleu. */
.my-workload-page .page-context-bar {
    margin: -18px -22px 14px;
    border-radius: 0;
}

.workload-page .page-context-bar {
    top: 0;
}

.presence-page .page-context-bar {
    justify-content: center;
    margin-top: -18px;
}

.workload-context-bar .workload-filters {
    align-items: center;
    flex: 0 0 auto;
}

.workload-context-bar .workload-filters > label {
    display: block;
}

.workload-context-bar .checkbox-dropdown {
    display: block;
}

.workload-context-bar .material-symbols-outlined {
    color: currentColor;
    font-size: 18px;
    font-weight: normal;
    text-transform: none;
}

.context-primary-action {
    cursor: pointer;
}

.context-popover {
    flex: 0 0 auto;
    position: relative;
}

.context-popover summary {
    cursor: pointer;
    list-style: none;
}

.context-popover summary::-webkit-details-marker {
    display: none;
}

.context-popover > div {
    background: white;
    border: 1px solid #d9cbe3;
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(39, 36, 69, 0.16);
    color: var(--sensipode-blue);
    display: grid;
    gap: 8px;
    min-width: 240px;
    padding: 12px;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: var(--z-popover);
}

.context-popover strong {
    font-size: 12px;
    font-weight: 800;
}

.context-popover label {
    align-items: center;
    color: var(--ink-soft);
    display: flex;
    font-size: 12px;
    font-weight: 700;
    gap: 8px;
}

/* Menu « Plus » permanent de la barre planning : panneau à plat, structure fixe
   (unité + KPI + actions). Aucun <details> imbriqué -> déterministe, rien ne
   « disparaît » et rien ne dépend d'une mesure JS. */
.context-more-panel {
    min-width: 250px;
}

.context-more-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.context-more-title {
    color: #8a7f99;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.context-more-unit {
    width: 100%;
}

.context-more-unit a {
    flex: 1 1 0;
    justify-content: center;
}

.context-more-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.context-more-actions .context-secondary-action {
    justify-content: flex-start;
    width: 100%;
}

.context-more-unit a.is-active {
    background: var(--sensipode-blue);
    color: white;
}

/* Annuler / Rétablir en picto seul (inline). */
.context-icon-action {
    align-items: center;
    background: white;
    border: 1px solid #d9cbe3;
    border-radius: 7px;
    color: var(--sensipode-blue);
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    min-height: 34px;
    padding: 0 8px;
}

.context-icon-action:hover:not(:disabled) {
    background: #f7f5f9;
}

.context-icon-action:disabled {
    color: #b7abc4;
    cursor: not-allowed;
}

.context-icon-action .material-symbols-outlined {
    font-size: 19px;
}

/* Repli déterministe : sous 1180px, unité + Annuler/Rétablir quittent la barre
   et réapparaissent dans le menu « ⋮ » (leurs copies). Aucune mesure JS. */
.context-more-menu .context-menu-only {
    display: none;
}

@media (max-width: 1400px) {
    .project-context-bar .context-collapsible {
        display: none;
    }

    .context-more-menu .context-menu-only {
        display: flex;
    }
}

.context-tree-controls {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(3, 1fr);
}

.context-tree-controls button,
.context-action-menu button {
    background: #f7f5f9;
    border: 1px solid #d9cbe3;
    border-radius: 6px;
    color: var(--sensipode-blue);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    min-height: 30px;
    padding: 0 9px;
}

.context-tree-controls button.is-active {
    background: var(--sensipode-blue);
    border-color: var(--sensipode-blue);
    color: white;
}

.context-kpi-strip {
    grid-template-columns: repeat(4, minmax(98px, 1fr));
    min-width: 460px;
}

.context-kpi-strip--small {
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    min-width: 260px;
}

.context-kpi-strip div {
    background: #f7f5f9;
    border-radius: 7px;
    padding: 8px 10px;
}

.context-kpi-strip span,
.context-kpi-strip strong {
    display: block;
}

.context-kpi-strip span {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.context-kpi-strip strong {
    font-size: 15px;
    margin-top: 4px;
}

.context-action-menu hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 2px 0;
}

.context-primary-action {
    background: var(--sensipode-pink);
    border-color: var(--sensipode-pink);
    color: white;
    gap: 4px;
    padding: 0 13px;
}

.project-planning-hero {
    align-items: end;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: 14px 24px;
}

/* Menu prioritaire de débordement : en ligne dans la barre par défaut, les
   éléments sont physiquement DÉPLACÉS dans le panneau « … » par le JS quand ça
   ne rentre pas (voir project_planning). Ci-dessous : rendu À PLAT une fois dans
   le panneau (le panneau « … » n'est visible que s'il a embarqué un élément). */
.context-action-menu__panel {
    min-width: 250px;
}

.context-action-menu__panel .context-action-inline {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.context-action-menu__panel .context-secondary-action {
    justify-content: flex-start;
    width: 100%;
}

/* KPI / Heures déplacés dans « … » : on neutralise leur toggle (summary masqué)
   et on affiche leur contenu en flux -> pas de dropdown imbriqué, donc pas de
   conflit avec la fermeture mutuelle des popovers. */
.context-action-menu__panel .context-kpi-menu,
.context-action-menu__panel .sensi-select-menu {
    display: block;
    width: 100%;
}

.context-action-menu__panel .context-kpi-menu > summary,
.context-action-menu__panel .sensi-select-menu > summary {
    display: none;
}


.context-action-menu__panel .context-kpi-strip,
.context-action-menu__panel .sensi-select-menu__panel {
    border: 0;
    box-shadow: none;
    min-width: 0;
    padding: 0;
    position: static;
    /* Le <details> parent est fermé dans le panneau : on force l'affichage du
       contenu (le summary est masqué -> aucune bascule, donc aucun conflit avec
       la fermeture mutuelle des popovers). */
    display: grid !important;
}

.context-action-menu__panel .context-kpi-strip {
    gap: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (width <= 1260px) {
    .project-context-bar {
        gap: 7px;
        padding-inline: 12px;
    }

    .project-context-bar .context-project-select {
        flex-basis: 280px;
        min-width: 190px;
    }

    .project-context-bar .context-view-tabs a,
    .project-context-bar .context-zoom-tabs a {
        padding-inline: 8px;
    }

    .project-context-bar .context-period-nav strong {
        min-width: 72px;
    }
}

@media (width <= 1080px) {
    .project-context-bar .context-kpi-menu .context-icon-button span:not(.material-symbols-outlined),
    .project-context-bar .context-today-link {
        display: none;
    }

    /* Filet de sécurité : le titre projet se réduit davantage (il se tronque en
       ellipsis) pour que la barre ne déborde pas jusqu'en largeur tablette — sinon
       le bouton « … » sortirait du champ et son panneau s'ouvrirait hors écran. */
    .project-context-bar .context-project-select {
        flex-basis: 190px;
        min-width: 140px;
    }

    .project-context-bar {
        gap: 6px;
    }

    .project-context-bar .context-view-tabs a,
    .project-context-bar .context-zoom-tabs a {
        padding-inline: 6px;
    }
}

.project-time-controls {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 18px;
    justify-content: space-between;
    padding: 12px 24px;
}

.project-zoom-tabs {
    border: 1px solid #d9cbe3;
    border-radius: 8px;
    display: grid;
    grid-template-columns: repeat(4, minmax(92px, 1fr));
    overflow: hidden;
}

.project-zoom-tabs a {
    align-items: center;
    background: white;
    border-right: 1px solid var(--line);
    color: var(--sensipode-blue);
    display: inline-flex;
    font-size: 13px;
    font-weight: 900;
    justify-content: center;
    min-height: 38px;
    padding: 0 12px;
    text-decoration: none;
}

.project-zoom-tabs a:last-child {
    border-right: 0;
}

.project-zoom-tabs a.is-active {
    background: #fde8ef;
}

.project-period-nav {
    align-items: center;
    display: flex;
    gap: 10px;
}

.project-period-nav a {
    align-items: center;
    border: 1px solid #d9cbe3;
    border-radius: 8px;
    color: var(--sensipode-blue);
    display: inline-flex;
    font-size: 26px;
    font-weight: 800;
    height: 38px;
    justify-content: center;
    line-height: 1;
    text-decoration: none;
    width: 42px;
}

.project-period-nav a.project-period-today {
    font-size: 12px;
    height: 38px;
    padding: 0 12px;
    width: auto;
}

.project-period-nav strong {
    min-width: 98px;
    text-align: center;
}

.project-tree-controls {
    align-items: center;
    display: flex;
    gap: 8px;
}

.project-tree-controls button {
    background: #f6f4f8;
    border: 1px solid #d9cbe3;
    border-radius: 7px;
    color: var(--sensipode-blue);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    min-height: 34px;
    padding: 0 10px;
}

.project-tree-controls button.is-active {
    background: var(--sensipode-blue);
    border-color: var(--sensipode-blue);
    color: white;
}

.project-planning-hero p,
.project-planning-hero span {
    color: var(--ink-soft);
    font-weight: 800;
    margin: 0;
}

.project-planning-hero--compact {
    align-items: center;
}

.project-planning-kpis {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(118px, 140px));
}

.project-planning-kpis div {
    background: #f6f4f8;
    border-radius: 8px;
    padding: 9px 12px;
}

.project-planning-kpis span,
.project-planning-kpis strong {
    display: block;
}

.project-planning-kpis span {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.project-planning-kpis strong {
    font-size: 18px;
    margin-top: 5px;
}

.project-team-overview {
    display: grid;
    gap: 14px;
    padding: 14px 18px 32px;
}

.project-team-context,
.project-team-summary {
    align-items: stretch;
    display: grid;
    gap: 8px;
}

.project-team-context {
    grid-template-columns: minmax(280px, 1.6fr) 120px 160px 120px;
}

.project-team-summary {
    grid-template-columns: repeat(5, minmax(130px, 1fr));
}

.project-team-context div,
.project-team-summary div {
    background: #f8f6f9;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 4px;
    padding: 10px 12px;
}

.project-team-summary .is-risk {
    background: #fce2df;
}

.project-team-context span,
.project-team-summary span {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.project-team-context strong,
.project-team-summary strong {
    color: var(--sensipode-blue);
    font-size: 14px;
}

.project-team-actions {
    display: flex;
    justify-content: flex-end;
}

.project-team-actions button,
.project-team-finder summary {
    background: var(--sensipode-pink);
    border: 0;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    display: inline-flex;
    font-size: 13px;
    font-weight: 900;
    min-height: 34px;
    padding: 8px 14px;
}

.project-team-finder {
    position: relative;
}

.project-team-finder summary {
    list-style: none;
}

.project-team-finder summary::-webkit-details-marker {
    display: none;
}

.project-team-finder > div {
    background: white;
    border: 1px solid #d9cbe3;
    border-radius: 8px;
    box-shadow: 0 18px 44px rgba(39, 36, 69, 0.16);
    display: grid;
    gap: 12px;
    min-width: 520px;
    padding: 12px;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 40;
}

.project-team-finder__filters {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(110px, 1fr));
}

.project-team-finder__filters label {
    display: grid;
    gap: 5px;
}

.project-team-finder__filters span {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.project-team-finder__filters input,
.project-team-finder__filters select {
    background: white;
    border: 1px solid #d9cbe3;
    border-radius: 6px;
    color: var(--sensipode-blue);
    font-size: 12px;
    font-weight: 800;
    min-height: 32px;
    padding: 7px 30px 7px 8px;
}

.project-team-finder__results {
    display: grid;
    gap: 6px;
}

.project-team-finder__results span {
    align-items: center;
    background: #fbfafc;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
}

.project-team-finder__results strong,
.project-team-finder__results small {
    display: block;
}

.project-team-finder__results small {
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 800;
}

.project-team-list {
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow-x: auto;
}

.project-team-row {
    align-items: center;
    border-bottom: 1px solid var(--line);
    color: var(--sensipode-blue);
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(210px, 1.5fr) 118px 130px 72px 112px 72px 118px minmax(210px, 1.2fr) 96px 128px 38px;
    min-width: 1320px;
    padding: 9px 12px;
}

.project-team-row:last-child {
    border-bottom: 0;
}

.project-team-row--head {
    background: #fbfafc;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 900;
    min-height: 36px;
    text-transform: uppercase;
}

.project-team-row--item {
    font-size: 13px;
    font-weight: 800;
    min-height: 58px;
}

.project-team-resource {
    align-items: center;
    display: flex;
    gap: 8px;
    min-width: 0;
}

.project-team-resource > .c-avatar {
    align-items: center;
    background: #ece5ef;
    border: 1px solid #d9cbe3;
    border-radius: 50%;
    display: inline-flex;
    flex: 0 0 30px;
    font-size: 11px;
    font-weight: 900;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.project-team-resource strong,
.project-team-resource small,
.project-team-availability strong,
.project-team-availability span {
    display: block;
}

.project-team-resource small {
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 700;
    margin-top: 2px;
}

.project-team-badge {
    border-radius: 6px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    justify-content: center;
    padding: 5px 8px;
    white-space: nowrap;
}

.project-team-badge--available {
    background: #dff4fa;
    color: #0f6382;
}

.project-team-badge--risk {
    background: #fce2df;
    color: var(--color-negative);
}

.project-team-badge--ok {
    background: #dff6e7;
    color: var(--color-positive);
}

.project-team-badge--neutral {
    background: #ece5ef;
    color: var(--sensipode-blue);
}

.project-team-availability {
    display: grid;
    gap: 5px;
}

.project-team-availability > span {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.project-team-mini-capacity {
    border-radius: 5px;
    display: inline-flex;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    padding: 4px 6px;
    white-space: nowrap;
}

.project-team-mini-capacity--available {
    background: #dff4fa;
    color: #0f6382;
}

.project-team-mini-capacity--watch {
    background: #fcf4e1;
    color: #8e721b;
}

.project-team-mini-capacity--risk {
    background: #fce2df;
    color: var(--color-negative);
}

.project-team-mini-capacity--neutral {
    background: #f6f4f8;
    color: var(--ink-soft);
}

.project-team-milestones,
.project-team-menu {
    position: relative;
}

.project-team-milestones summary,
.project-team-menu summary {
    cursor: pointer;
    font-weight: 900;
    list-style: none;
}

.project-team-milestones summary::-webkit-details-marker,
.project-team-menu summary::-webkit-details-marker {
    display: none;
}

.project-team-milestones div,
.project-team-menu div {
    background: white;
    border: 1px solid #d9cbe3;
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(39, 36, 69, 0.14);
    display: grid;
    gap: 6px;
    min-width: 220px;
    padding: 8px;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
}

.project-team-milestones span,
.project-team-menu a,
.project-team-menu button {
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--sensipode-blue);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    padding: 7px 8px;
    text-align: left;
    text-decoration: none;
}

.project-team-menu a:hover,
.project-team-menu button:hover {
    background: #fbf5f8;
}

.project-team-empty {
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 800;
    padding: 18px;
}

.project-summary-page {
    display: grid;
    gap: 12px;
    padding: 14px 18px 32px;
}

.project-summary-hero {
    align-items: center;
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(260px, 1.4fr) minmax(360px, 1fr) auto auto;
    padding: 12px 14px;
}

.project-summary-kicker {
    color: var(--ink-soft);
    display: block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.project-summary-hero h1 {
    color: var(--sensipode-blue);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    margin: 2px 0;
}

.project-summary-hero p {
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 500;
    margin: 0;
}

.project-summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.project-summary-meta span,
.project-summary-team-mini > span {
    background: #f5f1f7;
    border-radius: 6px;
    color: var(--sensipode-blue);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 8px;
}

.project-summary-team-mini {
    align-items: center;
    display: flex;
    gap: 4px;
}

.project-summary-admin-link,
.project-summary-card header a {
    align-items: center;
    color: var(--c-info);
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    gap: 4px;
    text-decoration: none;
    white-space: nowrap;
}

.project-summary-admin-link .material-symbols-outlined {
    font-size: 17px;
}

.project-summary-kpis {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(130px, 1fr));
}

.project-summary-kpis div,
.project-summary-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.project-summary-kpis div {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
}

.project-summary-kpis span,
.project-summary-card h2,
.project-summary-business small,
.project-summary-billing-kpis small {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.project-summary-kpis strong {
    color: var(--sensipode-blue);
    font-size: 16px;
    font-weight: 800;
}

.project-summary-grid {
    align-items: start;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
}

.project-summary-card {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.project-summary-card--wide {
    grid-column: span 2;
}

.project-summary-card header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.project-summary-card h2 {
    margin: 0;
}

.project-summary-empty {
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 600;
    margin: 0;
}

.project-summary-list {
    display: grid;
    gap: 7px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.project-summary-list li {
    background: #fbfafc;
    border-radius: 6px;
    color: var(--sensipode-blue);
    font-size: 13px;
    font-weight: 650;
    padding: 8px 10px;
}

.project-summary-row,
.project-summary-phase {
    align-items: center;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 10px;
    padding-top: 8px;
}

.project-summary-row:first-child,
.project-summary-phase:first-child {
    border-top: 0;
    padding-top: 0;
}

.project-summary-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.project-summary-phase {
    grid-template-columns: minmax(0, 1fr) 80px auto;
}

.project-summary-row strong,
.project-summary-phase strong,
.project-summary-team-list strong {
    color: var(--sensipode-blue);
    display: block;
    font-size: 13px;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-summary-row small,
.project-summary-phase small,
.project-summary-team-list small {
    color: var(--ink-soft);
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-top: 2px;
}

.project-summary-phase > span {
    color: var(--sensipode-blue);
    font-size: 13px;
    font-weight: 800;
    text-align: right;
}

.project-summary-phase-list,
.project-summary-business,
.project-summary-billing-kpis,
.project-summary-team-list {
    display: grid;
    gap: 8px;
}

.project-summary-business,
.project-summary-billing-kpis {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
}

.project-summary-billing-kpis {
    grid-template-columns: repeat(3, minmax(100px, 1fr));
}

.project-summary-business span,
.project-summary-billing-kpis span {
    background: #f8f6f9;
    border-radius: 6px;
    display: grid;
    gap: 3px;
    padding: 8px 10px;
}

.project-summary-business strong,
.project-summary-billing-kpis strong {
    color: var(--sensipode-blue);
    font-size: 14px;
    font-weight: 800;
}

.project-summary-team-list {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
}

.project-summary-team-list > span {
    align-items: center;
    background: #fbfafc;
    border-radius: 6px;
    display: grid;
    gap: 0 8px;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 8px;
}

.project-summary-team-list .c-avatar {
    grid-row: span 2;
}

@media (max-width: 1100px) {
    .project-summary-hero {
        grid-template-columns: 1fr;
    }

    .project-summary-grid {
        grid-template-columns: 1fr;
    }

    .project-summary-card--wide {
        grid-column: auto;
    }
}

.project-version-menu {
    position: relative;
}

.project-version-menu summary {
    align-items: center;
    background: white;
    border: 1px solid #d9cbe3;
    border-radius: 8px;
    color: var(--sensipode-blue);
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    min-height: 36px;
    padding: 0 12px;
}

.project-version-menu summary::-webkit-details-marker {
    display: none;
}

.project-version-menu summary::after {
    content: "⌄";
    margin-left: 8px;
}

.project-version-menu > div {
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 16px 38px rgba(39, 36, 69, 0.18);
    display: grid;
    gap: 6px;
    min-width: 190px;
    padding: 10px;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 35;
}

.project-version-menu span {
    font-size: 10px;
    text-transform: uppercase;
}

.project-version-menu button {
    background: #fbfafc;
    border: 1px solid #ede7f1;
    border-radius: 6px;
    color: var(--sensipode-blue);
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    padding: 8px;
    text-align: left;
}

.capacity-cell {
    background: #dff0f7;
    border-radius: 3px;
    color: #245978;
    display: block;
    font-size: 9px;
    font-weight: 900;
    min-height: 18px;
    overflow: hidden;
    text-align: center;
}

.capacity-cell--partial {
    background: #fcf4e1;
    color: #6f5313;
}

.capacity-cell--off {
    background: #fbf1f4;
    box-shadow: inset 0 0 0 1px #efcbd3;
}

.project-planning-table {
    --project-left-width: 320px;
    --project-charge-width: 64px;
    --project-state-width: 104px;
    --project-period-width: 62px;
    /* Hauteur de ligne — SOURCE UNIQUE (par niveau). Pour densifier/aérer le
       planning, ne toucher QUE ces trois valeurs. Appliquées plus bas via
       [data-row-level], qui est porté par les 4 cellules de chaque ligne. */
    --row-h-phase: 30px;
    --row-h-step: 26px;
    --row-h-task: 24px;
    display: grid;
    grid-template-columns: var(--project-left-width) var(--project-charge-width) var(--project-state-width) minmax(0, 1fr);
    /* Pane défilant borné : la timeline scrolle en interne, le header des mois
       reste sticky en tête de CE pane (top: 0), position indépendante de l'effectif.
       Hauteur = viewport - (app bar + barre secondaire + sa marge basse de 14px). */
    overflow: auto;
    max-height: calc(100vh - var(--planning-timeline-header-top) - 14px);
    padding-bottom: 18px;
    scrollbar-gutter: stable;
}

.project-planning-workbench {
    align-items: start;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) clamp(320px, 22vw, 380px);
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    width: 100%;
}

.project-planning-workbench.has-context-panel {
    grid-template-columns: minmax(0, 1fr) clamp(320px, 22vw, 380px);
}

.project-planning-workbench.is-inspector-collapsed {
    grid-template-columns: minmax(0, 1fr) 32px;
}

.planning-presence-strip {
    align-items: center;
    color: #625d7c;
    display: inline-flex;
    font-size: 12px;
    gap: 8px;
    min-width: 0;
    white-space: nowrap;
}

.planning-presence-strip[hidden] {
    display: none;
}

.planning-presence-strip [data-planning-presence-avatars] {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.planning-presence-avatar {
    align-items: center;
    background: #f5edfa;
    border: 1px solid #ffffff;
    border-radius: 999px;
    color: var(--sensipode-blue);
    display: inline-flex;
    font-size: 10px;
    font-weight: 750;
    height: 24px;
    justify-content: center;
    margin-left: -6px;
    min-width: 24px;
    padding: 0 5px;
}

.planning-presence-avatar.is-current {
    background: #e7f3f7;
    color: #245978;
}

.planning-presence-avatar--more {
    background: #ece5ef;
    color: #625d7c;
}

.project-planning-main {
    min-width: 0;
}

.project-milestone-panel,
.project-context-panel {
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-sizing: border-box;
    display: grid;
    gap: 12px;
    max-height: calc(100vh - 210px);
    max-width: 100%;
    min-width: 0;
    overflow: auto;
    padding: 12px;
    position: sticky;
    top: 86px;
    width: 100%;
}

.planning-version-dialog,
.planning-envelope-dialog {
    border: 0;
    border-radius: 10px;
    box-shadow: 0 24px 80px rgb(28 24 58 / 18%);
    color: var(--ink);
    padding: 0;
    width: min(520px, calc(100vw - 32px));
}

.planning-version-dialog--wide,
.planning-export-dialog {
    width: min(680px, calc(100vw - 32px));
}

.planning-version-dialog::backdrop,
.planning-envelope-dialog::backdrop {
    background: rgb(20 17 46 / 28%);
}

.planning-version-form {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.planning-version-form header,
.planning-version-form footer {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.planning-version-form header button {
    align-items: center;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    display: inline-flex;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.planning-version-form h2 {
    font-size: 18px;
    line-height: 1.2;
    margin: 2px 0 0;
}

.planning-version-form header span,
.planning-version-form label span,
.planning-version-form label small {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 750;
}

.planning-version-form p {
    color: var(--ink-muted);
    font-size: 13px;
    margin: 0;
}

.planning-version-form label {
    display: grid;
    gap: 6px;
}

.planning-version-form input,
.planning-version-form select,
.planning-version-form textarea {
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: white;
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    padding: 9px 10px;
}

.planning-version-warning {
    background: #fff6dd;
    border: 1px solid #f2d894;
    border-radius: 8px;
    color: #6f4a04;
    display: grid;
    gap: 6px;
    padding: 10px 12px;
}

.planning-version-warning ul {
    margin: 0;
    padding-left: 18px;
}

.planning-version-summary {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.planning-version-summary--muted {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.planning-version-summary div,
.planning-version-list article,
.planning-export-options label {
    background: #f7f5f9;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.planning-version-summary div {
    display: grid;
    gap: 4px;
    padding: 9px 10px;
}

.planning-version-summary span {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.planning-version-summary strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 750;
}

.planning-version-list {
    display: grid;
    gap: 8px;
    max-height: min(440px, 55vh);
    overflow: auto;
}

.planning-version-list article {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 10px 12px;
}

.planning-version-list article.is-current {
    border-color: #6fbad4;
    box-shadow: inset 3px 0 0 #6fbad4;
}

.planning-version-list strong,
.planning-version-list span,
.planning-version-list small {
    display: block;
}

.planning-version-list span,
.planning-version-list small {
    color: var(--ink-soft);
    font-size: 12px;
}

.planning-export-scope {
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    padding: 10px;
}

.planning-export-section-title,
.planning-export-scope strong {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
}

.planning-export-range {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.planning-export-options {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.planning-export-options label {
    align-items: center;
    color: var(--ink);
    display: flex;
    font-size: 13px;
    font-weight: 650;
    gap: 8px;
    min-height: 36px;
    padding: 8px 10px;
}

.planning-export-options input {
    accent-color: var(--sensipode-pink);
}

.planning-export-feedback {
    color: var(--ink-soft);
    min-height: 16px;
}

.planning-export-print-heading {
    display: none;
}

.planning-envelope-options {
    display: grid;
    gap: 8px;
}

.planning-envelope-options label {
    align-items: center;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    gap: 8px;
    min-height: 34px;
    padding: 7px 10px;
}

.planning-envelope-options input {
    accent-color: var(--accent);
    height: 15px;
    padding: 0;
    width: 15px;
}

.planning-envelope-options span {
    color: var(--ink);
    font-size: 12px;
    font-weight: 650;
}

.project-context-panel.is-collapsed {
    align-items: start;
    justify-items: center;
    min-height: 180px;
    padding: 7px 2px;
}

.project-context-panel--milestone {
    gap: 0;
    padding: 0;
}

.project-context-panel__restore {
    align-items: center;
    border: 1px solid #d9cbe3;
    border-radius: 999px;
    color: var(--sensipode-blue);
    display: inline-flex;
    font-size: 18px;
    font-weight: 900;
    height: 26px;
    justify-content: center;
    text-decoration: none;
    width: 26px;
}

.project-milestone-panel__header,
.project-context-panel__header {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.project-milestone-panel__header span,
.project-context-panel__header span,
.project-milestone-panel__list > span {
    color: var(--sensipode-blue);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.project-milestone-panel__header a,
.project-context-panel__header a {
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.project-milestone-side-form {
    display: grid;
    gap: 8px;
}

.project-milestone-side-form label,
.project-milestone-panel__participants {
    display: grid;
    gap: 4px;
}

.project-milestone-side-form label > span,
.project-milestone-panel__participants > span {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.project-milestone-side-form input,
.project-milestone-side-form select,
.project-milestone-side-form textarea {
    background: #fbfafc;
    border: 1px solid #ddd3e6;
    border-radius: 6px;
    color: var(--sensipode-blue);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    min-width: 0;
    padding: 6px 7px;
    width: 100%;
}

.project-milestone-side-form textarea,
.milestone-editor textarea {
    resize: vertical;
}

.project-milestone-panel__pair {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-milestone-panel__delivery,
.project-milestone-panel__billing,
.project-milestone-panel__presence,
.project-milestone-panel__travel {
    border: 1px solid #ede7f1;
    border-radius: 6px;
    display: grid;
    gap: 8px;
    padding: 8px;
}

.project-milestone-panel__presence > span,
.project-milestone-panel__travel > span {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.project-milestone-toggle {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-milestone-toggle label,
.project-milestone-travel-row {
    align-items: center;
    background: #fbfafc;
    border: 1px solid #ede7f1;
    border-radius: 6px;
    display: flex;
    font-size: 0.82rem;
    gap: 7px;
    min-width: 0;
    padding: 7px;
}

.project-milestone-travel-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 58px;
}

.project-milestone-toggle input,
.project-milestone-travel-row input[type="checkbox"] {
    width: auto;
}

.project-milestone-travel-row input:not([type="checkbox"]) {
    padding: 5px 6px;
}

.project-milestone-panel__participants {
    border: 1px solid #ede7f1;
    border-radius: 6px;
    max-height: 118px;
    overflow: auto;
    padding: 7px;
}

.project-milestone-panel__participants label {
    align-items: center;
    display: flex;
    font-size: 11px;
    gap: 6px;
}

.project-milestone-panel__participants input {
    width: auto;
}

.project-milestone-side-form button:not(.date-picker-button):not(.c-btn) {
    background: var(--sensipode-pink);
    border: 0;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    padding: 9px 11px;
}

.project-milestone-side-form__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
}

.project-milestone-linked-option {
    align-items: center;
    background: #f7f3fb;
    border: 1px solid #ede7f1;
    border-radius: 6px;
    color: var(--ink-soft);
    display: flex;
    flex: 1 0 100%;
    font-size: 11px;
    gap: 7px;
    padding: 7px;
}

.project-milestone-delete {
    align-items: center;
    color: var(--ink-soft);
    display: flex;
    font-size: 11px;
    gap: 5px;
}

.project-milestone-delete input {
    width: auto;
}

.project-milestone-linked-option input {
    width: auto;
}

.project-milestone-panel__list {
    border-top: 1px solid var(--line);
    display: grid;
    gap: 7px;
    padding-top: 10px;
}

.project-milestone-panel__list a {
    background: #fbfafc;
    border: 1px solid #ede7f1;
    border-radius: 6px;
    color: var(--sensipode-blue);
    display: grid;
    gap: 2px;
    padding: 7px 8px;
    text-decoration: none;
}

.project-milestone-panel__list a.is-selected {
    background: #fde8ef;
    border-color: #e40046;
}

.project-milestone-panel__list strong {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.project-milestone-panel__list span {
    font-size: 12px;
    font-weight: 700;
}

.project-milestone-panel__list small {
    color: var(--ink-soft);
    font-size: 11px;
}

.project-row-task-link {
    color: var(--sensipode-blue);
    display: inline-block;
    font-weight: inherit;
    min-width: 0;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-row-task-link:hover {
    color: var(--sensipode-pink);
}

.project-context-task {
    display: grid;
    gap: 12px;
}

.project-context-empty {
    background: #fbfafc;
    border: 1px dashed #d9cbe3;
    border-radius: 8px;
    display: grid;
    gap: 5px;
    padding: 12px;
}

.project-context-empty strong {
    color: var(--sensipode-blue);
    font-size: 13px;
}

.project-context-empty span {
    color: var(--ink-soft);
    font-size: 11px;
    line-height: 1.35;
}

.project-context-task > div:first-child {
    display: grid;
    gap: 3px;
}

.project-context-task > div:first-child strong {
    font-size: 15px;
}

.project-context-task > div:first-child span,
.project-context-detail span {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 800;
}

.project-context-stats {
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.project-context-stats div {
    background: #f6f4f8;
    border-radius: 7px;
    padding: 8px;
}

.project-context-stats dt {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 900;
    margin: 0 0 4px;
    text-transform: uppercase;
}

.project-context-stats dd {
    font-size: 15px;
    font-weight: 900;
    margin: 0;
}

.project-context-detail {
    border: 1px solid #ede7f1;
    border-radius: 7px;
    display: grid;
    gap: 5px;
    padding: 8px;
}

.project-context-detail strong,
.project-context-detail a {
    color: var(--sensipode-blue);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.project-context-primary {
    background: var(--sensipode-pink);
    border: 0;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    padding: 10px 12px;
}

.project-context-secondary {
    background: white;
    border: 1px solid #d9cbe3;
    border-radius: 8px;
    color: var(--sensipode-blue);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 850;
    padding: 9px 12px;
}

.project-planning-table--semaine {
    --project-period-width: 118px;
}

.project-planning-table--mois {
    --project-period-width: 118px;
}

.project-planning-table--trimestre {
    --project-period-width: 180px;
}

.project-planning-table--annee {
    --project-period-width: 112px;
}

.project-planning-left,
.project-planning-charge {
    border-bottom: 1px solid var(--line);
    border-right: 1px solid #d9cbe3;
    min-height: 30px;
}

.project-planning-left {
    left: 0;
    position: sticky;
    z-index: 4;
}

.project-planning-left::after {
    background: transparent;
    bottom: 0;
    content: "";
    pointer-events: none;
    position: absolute;
    right: -1px;
    top: 0;
    transition: background 0.12s ease, width 0.12s ease;
    width: 2px;
    z-index: 3;
}

.project-planning-charge {
    align-items: center;
    background: white;
    color: #5b4b6f;
    display: flex;
    font-size: 12px;
    font-weight: 900;
    justify-content: center;
    left: var(--project-left-width);
    padding: 2px 8px;
    position: sticky;
    z-index: 4;
}

.project-planning-header {
    align-items: center;
    background: #fff;
    color: var(--ink-soft);
    display: flex;
    font-size: 12px;
    font-weight: 900;
    padding: 10px 14px;
    position: sticky;
    top: 0;
    text-transform: uppercase;
    z-index: 20;
    z-index: 24;
}

.project-planning-state {
    border-bottom: 1px solid var(--line);
}

.project-planning-timeline {
    border-bottom: 1px solid var(--line);
    min-height: 48px;
    min-width: 100%;
    position: relative;
    width: max(100%, calc(var(--week-count) * var(--project-period-width)));
}

.project-planning-header.project-planning-timeline {
    display: grid;
    grid-template-columns: repeat(var(--week-count), var(--project-period-width));
    padding: 0;
    /* Doit rester sticky : sans ça, `.project-planning-timeline { position: relative }`
       (même spécificité, déclaré plus bas) l'emporte et le header des mois scrolle. */
    position: sticky;
    top: 0;
    z-index: 22;
}

.project-planning-header.project-planning-timeline span {
    align-items: center;
    border-left: 1px solid var(--line);
    display: grid;
    justify-items: center;
    min-height: 48px;
}

.project-planning-header.project-planning-timeline span.is-today {
    background: #eef7fb;
    box-shadow: inset 0 0 0 1px #bfe1ed;
    color: var(--sensipode-blue);
}

.project-planning-table.has-today .project-planning-timeline::after {
    background: #5ea9c4;
    bottom: 0;
    content: "";
    left: var(--point-left);
    opacity: 0.72;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 2px;
    z-index: 2;
}

.project-planning-header.project-planning-timeline strong,
.project-planning-header.project-planning-timeline small {
    display: block;
}

.project-planning-header.project-planning-timeline small {
    color: #a293b0;
    font-size: 10px;
}

.project-contract-boundaries {
    inset: 0 auto 0 var(--bar-left);
    pointer-events: none;
    position: absolute;
    width: var(--bar-width);
    z-index: 3;
}

.project-contract-boundaries::before,
.project-contract-boundaries::after {
    background: rgba(39, 36, 69, 0.42);
    bottom: 0;
    content: "";
    position: absolute;
    top: 0;
    width: 1px;
}

.project-contract-boundaries::before {
    left: 0;
}

.project-contract-boundaries::after {
    right: 0;
}

.project-contract-boundary {
    background: #fbf6fd;
    border: 1px solid #e7dcef;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgb(60 40 80 / 10%);
    color: #6b5b7f;
    display: grid;
    font-size: 9px;
    font-style: normal;
    font-weight: 750;
    line-height: 1.05;
    padding: 1px 5px;
    position: absolute;
    top: 3px;
    white-space: nowrap;
    z-index: 3;
}

.project-contract-boundary b,
.project-contract-boundary small {
    color: inherit;
    font-size: inherit;
}

.project-contract-boundary--start {
    left: 4px;
}

.project-contract-boundary--end {
    right: 4px;
    text-align: right;
}

.project-team-inline-title,
.project-milestone-label {
    align-items: center;
    background: #fffafd;
    color: var(--ink-soft);
    display: flex;
    font-size: 12px;
    font-weight: 900;
    gap: 8px;
    padding: 6px 14px;
    text-transform: uppercase;
}

/* Ligne Jalons : plus basse. */
.project-milestone-label {
    padding-bottom: 2px;
    padding-top: 2px;
}

/* Bouton « + » d'ajout de jalon, posé à droite de la ligne Jalons — compact. */
.project-milestone-label .c-btn {
    border-radius: 6px;
    height: 18px;
    margin-left: auto;
    padding: 0;
    width: 18px;
}

.project-milestone-label .c-btn .material-symbols-outlined {
    font-size: 14px;
}

/* Bouton « Affichage » (gestion de l'affichage) posé sur la ligne « Structure
   projet », aligné à droite et de même dimension que le + Jalon (icône seule). */
.project-planning-header .context-display-menu {
    margin-left: auto;
}

.project-left-resize-handle {
    align-self: stretch;
    background: transparent;
    border: 0;
    bottom: 0;
    cursor: col-resize;
    margin: 0;
    padding: 0;
    position: absolute;
    right: -7px;
    top: 0;
    touch-action: none;
    width: 14px;
    z-index: 35;
}

.project-left-resize-handle::before {
    background: rgba(39, 36, 69, 0);
    border-radius: 999px;
    bottom: 8px;
    content: "";
    left: 6px;
    position: absolute;
    top: 8px;
    transition: background 0.12s ease, width 0.12s ease;
    width: 2px;
}

.project-left-resize-handle > span {
    background: #ffffff;
    border: 1px solid #cbd9f0;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(39, 36, 69, 0.16);
    display: grid;
    height: 28px;
    left: 50%;
    opacity: 0;
    place-items: center;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.12s ease, transform 0.12s ease;
    width: 14px;
}

.project-left-resize-handle > span::before,
.project-left-resize-handle > span::after {
    background: #625d7c;
    border-radius: 999px;
    content: "";
    height: 14px;
    position: absolute;
    top: 6px;
    width: 2px;
}

.project-left-resize-handle > span::before {
    left: 4px;
}

.project-left-resize-handle > span::after {
    right: 4px;
}

.project-left-resize-handle:hover::before,
.project-left-resize-handle:focus-visible::before,
.project-planning-table.is-left-column-resizing .project-left-resize-handle::before {
    background: #58b6d2;
    width: 3px;
}

.project-left-resize-handle:hover > span,
.project-left-resize-handle:focus-visible > span,
.project-planning-table.is-left-column-resizing .project-left-resize-handle > span {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.project-left-resize-handle:focus-visible {
    outline: 2px solid #58b6d2;
    outline-offset: 2px;
}

.project-planning-table.is-left-column-resizing .project-planning-left::after {
    background: #58b6d2;
    width: 3px;
}

body.is-resizing-project-left-column {
    cursor: col-resize;
    user-select: none;
}

.project-planning-header .context-display-menu > summary {
    border-radius: 6px;
    height: 18px;
    min-height: 0;
    min-width: 0;
    padding: 0;
    width: 18px;
}

.project-planning-header .context-display-menu > summary .material-symbols-outlined {
    font-size: 14px;
}

/* Le menu déroulant doit passer au-dessus de la grille (colonne de gauche sticky). */
.project-planning-header .context-display-menu > div {
    z-index: 40;
}

/* Cases « Affichage » : masquage des sections Équipe / Jalons / États. */
.project-planning-table.is-hide-team .project-team-inline-title,
.project-planning-table.is-hide-team .project-team-inline-member,
.project-planning-table.is-hide-team .project-team-inline-hours,
.project-planning-table.is-hide-team .project-team-inline-state,
.project-planning-table.is-hide-team .project-team-inline-capacity {
    display: none;
}

.project-planning-table.is-hide-milestones .project-milestone-label,
.project-planning-table.is-hide-milestones .project-milestone-line {
    display: none;
}

.project-planning-table.is-hide-states .project-planning-state > * {
    display: none;
}

.project-team-inline-state {
    background: white;
    min-height: 30px;
}

.project-team-inline-title {
    min-height: 28px;
    padding-bottom: 6px;
    padding-top: 6px;
    /* Reste visible au scroll vertical, juste sous le header des dates. */
    position: sticky;
    top: var(--planning-header-height);
    z-index: 16;
}

/* Coin haut-gauche de l'équipe : sticky sur les deux axes, au-dessus des autres. */
.project-planning-left.project-team-inline-title {
    z-index: 21;
}

/* Repli de l'équipe projet (comme une phase) : on masque les collaborateurs. */
.project-planning-table.is-team-collapsed .project-team-inline-member,
.project-planning-table.is-team-collapsed .project-team-inline-hours,
.project-planning-table.is-team-collapsed .project-team-inline-state,
.project-planning-table.is-team-collapsed .project-team-inline-capacity {
    display: none;
}

.project-team-toggle {
    cursor: pointer;
    gap: 6px;
    user-select: none;
}

.project-team-toggle:focus-visible {
    outline: 2px solid var(--sensipode-blue);
    outline-offset: -2px;
}

.project-team-chevron {
    border-bottom: 2px solid currentColor;
    border-right: 2px solid currentColor;
    display: inline-block;
    height: 6px;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    width: 6px;
}

.project-planning-table.is-team-collapsed .project-team-chevron {
    transform: rotate(-45deg);
}

/* Lignes gelées (équipe : titre + collaborateurs) : sticky empilé, dont le
   `top` est calculé en JS (hauteurs réelles, nombre de collaborateurs variable).
   Elles restent visibles pendant que le planning défile dessous. */
.project-planning-table .is-frozen {
    position: sticky;
    z-index: 15;
}

/* Colonnes figées à gauche (structure / charge / état) : au-dessus de la timeline
   gelée (z-index 15) pour ne pas être recouvertes lors du scroll horizontal. */
.project-planning-table .project-planning-left.is-frozen,
.project-planning-table .project-planning-charge.is-frozen,
.project-planning-table .project-planning-state.is-frozen {
    z-index: 19;
}

.project-planning-table .project-team-inline-member.is-frozen,
.project-planning-table .project-team-inline-hours.is-frozen,
.project-planning-table .project-team-inline-state.is-frozen,
.project-planning-table .project-team-inline-capacity.is-frozen {
    background: #fff;
}

/* Ligne Jalons gelée : fond opaque pour que le planning ne transparaisse pas au
   défilement. background-color (pas le raccourci) pour préserver le dégradé des
   lignes de grille de la timeline. Les cellules label sont déjà opaques (#fffafd). */
.project-planning-table .project-milestone-line.is-frozen {
    background-color: #fffafd;
}

.project-team-inline-member {
    align-items: center;
    background: white;
    display: flex;
    min-height: 26px;
    padding: 2px 9px;
}

/* Le contenu est le composant collaborator (densité compact) : on le laisse se
   tronquer dans la largeur figée de la colonne gauche. */
.project-team-inline-member .c-person {
    max-width: 100%;
    min-width: 0;
}

.project-team-inline-hours {
    align-items: center;
    display: grid;
    gap: 2px;
    min-height: 26px;
}

.project-team-inline-hours span,
.project-team-inline-hours small {
    display: block;
    line-height: 1.05;
}

.project-team-inline-hours small {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 800;
}

.project-team-inline-capacity {
    align-items: stretch;
    background-image: linear-gradient(to right, var(--line) 1px, transparent 1px);
    background-size: var(--project-period-width) 100%;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(var(--week-count), var(--project-period-width));
    min-height: 30px;
    padding: 0;
}

.project-team-inline-capacity .capacity-cell {
    align-items: center;
    background: transparent;
    border-radius: 0;
    box-sizing: border-box;
    color: #6d7b86;
    display: flex;
    justify-content: center;
    min-height: 26px;
    width: 100%;
}

/* Disponibilité — représentation LÉGÈRE et tonale (design system) : plus d'aplat
   bleu ni d'encadré. Le niveau se lit à la couleur : disponible = neutre discret,
   partiel = ambre léger, indispo = rosé léger. */
.project-team-inline-capacity .capacity-cell--partial {
    background: transparent;
    color: #6d7b86;
}

.project-team-inline-capacity .capacity-cell--off {
    background: #fdeaea;
    box-shadow: none;
    color: #b0474d;
}


.project-milestone-line {
    background-image: linear-gradient(to right, var(--line) 1px, transparent 1px);
    background-size: var(--project-period-width) 100%;
    min-height: 30px;
}

.milestone-dot {
    background: var(--sensipode-pink);
    border: 3px solid white;
    border-radius: 999px;
    box-shadow: 0 0 0 1px var(--sensipode-pink);
    height: 16px;
    left: var(--point-left);
    position: absolute;
    top: 19px;
    transform: translateX(-50%);
    width: 16px;
}

.milestone-dot--livrable {
    background: var(--sensipode-blue);
    box-shadow: 0 0 0 1px var(--sensipode-blue);
}

.milestone-marker {
    align-items: center;
    background: var(--sensipode-pink);
    border-radius: 999px;
    color: white;
    display: inline-flex;
    font-size: 9px;
    font-weight: 900;
    height: 20px;
    justify-content: center;
    left: var(--point-left);
    letter-spacing: 0;
    line-height: 1;
    min-width: 28px;
    padding: 0 6px;
    position: absolute;
    top: 6px;
    transform: translateX(-50%);
    z-index: 3;
}

.milestone-marker--atelier,
.milestone-marker--reunion_lancement,
.milestone-marker--terrain {
    background: #2b6685;
}

.milestone-marker--copil,
.milestone-marker--cotech {
    background: #8e721b;
}

.milestone-marker--livraison,
.milestone-marker--validation {
    background: var(--sensipode-blue);
}

.milestone-marker--facturation {
    background: var(--sensipode-pink);
}

/* « Double jalon » : deux jalons proches (ex. livraison -> facturation) fusionnés
   en une pastille segmentée lisible. Chaque segment garde sa couleur / libellé. */
.milestone-cluster {
    display: inline-flex;
    position: absolute;
    top: 6px;
    z-index: 3;
}

.milestone-cluster .milestone-marker {
    border-radius: 0;
    min-width: 22px;
    position: static;
    top: auto;
}

.milestone-cluster .milestone-marker:first-child {
    border-radius: 999px 0 0 999px;
}

.milestone-cluster .milestone-marker:last-child {
    border-radius: 0 999px 999px 0;
}

.milestone-cluster .milestone-marker + .milestone-marker {
    box-shadow: inset 1px 0 0 rgb(255 255 255 / 55%);
}

.project-milestones-page {
    display: grid;
    gap: 18px;
    padding: 48px clamp(16px, 3vw, 32px);
}

.project-milestone-help {
    background: #f6f4f8;
    border-radius: 8px;
    display: grid;
    gap: 4px;
    padding: 10px 14px;
}

.project-milestone-help strong {
    font-size: 13px;
    text-transform: uppercase;
}

.project-milestone-help span {
    color: var(--ink-soft);
    font-size: 13px;
}

.milestone-editor {
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.milestone-editor--new {
    padding-top: 14px;
}

.milestone-editor--new h2 {
    font-size: 16px;
    font-weight: 800;
    margin: 0 14px 10px;
}

.milestone-editor-grid {
    align-items: stretch;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 0;
    grid-template-columns: minmax(230px, 1.55fr) 122px minmax(178px, 0.95fr) minmax(204px, 1.15fr) minmax(230px, 1.35fr) minmax(210px, 1.2fr) 86px;
}

.milestone-editor-grid--new {
    grid-template-columns: minmax(240px, 1.6fr) 122px minmax(178px, 0.95fr) minmax(204px, 1.15fr) minmax(230px, 1.35fr) minmax(260px, 1.55fr);
}

.milestone-editor-grid--header {
    background: var(--sensipode-blue);
    border-top: 0;
    color: white;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.milestone-editor-grid--header span {
    padding: 9px 10px;
}

.milestone-editor-grid > label,
.milestone-date-fields,
.milestone-status-fields,
.milestone-participants,
.milestone-delete {
    border-left: 1px solid var(--line);
    display: grid;
    gap: 4px;
    padding: 7px;
}

.milestone-editor-grid > label:first-child {
    border-left: 0;
}

.milestone-editor-grid label span,
.milestone-date-fields label span,
.milestone-status-fields label span {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.milestone-editor input,
.milestone-editor select,
.milestone-editor textarea {
    background: #fbfafc;
    border: 1px solid #ddd3e6;
    border-radius: 6px;
    color: var(--sensipode-blue);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    min-width: 0;
    padding: 6px 7px;
    width: 100%;
}

.milestone-specific-fields {
    border-top: 1px solid var(--line);
    display: grid;
    gap: 8px;
    grid-column: 1 / -1;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    padding: 7px;
}

.milestone-specific-fields[hidden],
.project-milestone-panel__delivery[hidden],
.project-milestone-panel__billing[hidden],
.project-milestone-panel__presence[hidden],
.project-milestone-panel__travel[hidden],
.milestone-inspector__conditional[hidden] {
    display: none;
}

.project-milestones-page {
    display: grid;
    gap: 14px;
}

.project-milestones-header {
    align-items: center;
    display: flex;
    gap: 18px;
    justify-content: space-between;
}

.project-milestones-header h1 {
    color: var(--sensipode-blue);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0;
    margin: 0;
}

.project-milestones-header p {
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 600;
    margin: 0 0 3px;
}

.project-milestones-kpis {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(92px, 1fr));
    margin: 0;
}

.project-milestones-kpis div {
    background: #f7f4f8;
    border: 1px solid #ede7f1;
    border-radius: 8px;
    padding: 8px 10px;
}

.project-milestones-kpis div.is-warning {
    background: #fff3cf;
    border-color: #f2d889;
}

.project-milestones-kpis dt {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.project-milestones-kpis dd {
    color: var(--sensipode-blue);
    font-size: 18px;
    font-weight: 800;
    margin: 2px 0 0;
}

.project-milestones-actions {
    align-items: center;
    display: flex;
    gap: 8px;
}

.project-milestones-actions form {
    margin: 0;
}

.project-milestone-primary,
.project-milestone-suggest,
.project-milestones-search {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    gap: 7px;
    min-height: 36px;
    padding: 0 12px;
}

.project-milestone-primary {
    background: #211b46;
    border: 1px solid #211b46;
    color: white;
    text-decoration: none;
}

.project-milestone-suggest {
    background: #f7f3fb;
    border: 1px solid #ddd3e6;
    color: var(--sensipode-blue);
    cursor: pointer;
}

.project-milestones-search {
    background: white;
    border: 1px solid #ddd3e6;
    color: var(--ink-soft);
    flex: 1;
    max-width: 330px;
    padding-right: 8px;
}

.project-milestones-search input {
    background: transparent;
    border: 0;
    color: var(--sensipode-blue);
    font: inherit;
    font-size: 13px;
    min-width: 0;
    outline: 0;
    width: 100%;
}

.project-milestones-workbench {
    align-items: start;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr);
}

.project-milestones-workbench.has-panel {
    grid-template-columns: minmax(0, 1fr) 360px;
}

.project-milestone-list {
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: block;
    overflow: hidden;
}

.milestone-bulk-bar {
    align-items: center;
    background: #f7f3fb;
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
}

.milestone-bulk-bar[hidden] {
    display: none;
}

.milestone-bulk-bar strong {
    color: var(--sensipode-blue);
    font-size: 12px;
    font-weight: 750;
    margin-right: auto;
}

.milestone-bulk-bar select,
.milestone-bulk-bar button {
    border: 1px solid #ddd3e6;
    border-radius: 7px;
    color: var(--sensipode-blue);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    min-height: 30px;
    padding: 5px 8px;
}

.milestone-bulk-bar button {
    background: #211b46;
    border-color: #211b46;
    color: white;
    cursor: pointer;
}

.milestone-group + .milestone-group {
    border-top: 1px solid var(--line);
}

.milestone-group > header {
    align-items: center;
    background: #faf8fc;
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
}

.milestone-group > header strong {
    color: var(--sensipode-blue);
    font-size: 12px;
    font-weight: 700;
}

.milestone-group > header span {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 600;
}

.milestone-list-row {
    align-items: stretch;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
}

.milestone-list-row[hidden] {
    display: none;
}

.milestone-row-check {
    align-items: center;
    display: flex;
    justify-content: center;
}

.milestone-row-check input {
    accent-color: var(--sensipode-pink);
}

.milestone-list-item {
    align-items: center;
    color: var(--sensipode-blue);
    display: grid;
    gap: 10px;
    grid-template-columns: 42px minmax(220px, 1fr) 82px 98px 90px minmax(120px, 0.85fr) 24px 22px;
    min-height: 56px;
    padding: 8px 12px;
    text-decoration: none;
}

.milestone-list-item:hover,
.milestone-list-item.is-selected {
    background: #fbf7fb;
}

.milestone-list-item.is-selected {
    box-shadow: inset 3px 0 0 var(--sensipode-pink);
}

.milestone-list-item[hidden] {
    display: none;
}

.milestone-list-marker {
    align-items: center;
    background: #eee8f2;
    border-radius: 999px;
    color: var(--sensipode-blue);
    display: inline-flex;
    font-size: 10px;
    font-weight: 800;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.milestone-list-item--ok .milestone-list-marker {
    background: #cbf5dd;
    color: #185a46;
}

.milestone-list-item--warning .milestone-list-marker {
    background: #fff0c7;
    color: #705019;
}

.milestone-list-item--risk .milestone-list-marker {
    background: #ffd8d4;
    color: #823640;
}

.milestone-list-main {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.milestone-list-main strong {
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.milestone-list-main small,
.milestone-list-item time,
.milestone-participants-preview {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 600;
}

.milestone-chip {
    align-items: center;
    background: #eee8f2;
    border-radius: 999px;
    color: var(--ink-soft);
    display: inline-flex;
    font-size: 11px;
    font-weight: 700;
    justify-content: center;
    min-height: 24px;
    padding: 3px 9px;
    white-space: nowrap;
}

.milestone-chip--planifie,
.milestone-chip--termine {
    background: #cbf5dd;
    color: #185a46;
}

.milestone-chip--a_planifier {
    background: #fff0c7;
    color: #705019;
}

.milestone-participants-preview {
    align-items: center;
    display: inline-flex;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.milestone-participants-preview .material-symbols-outlined,
.milestone-presence-icon .material-symbols-outlined,
.milestone-list-chevron,
.project-milestone-primary .material-symbols-outlined,
.project-milestone-suggest .material-symbols-outlined,
.project-milestones-search .material-symbols-outlined {
    font-size: 18px;
}

.milestone-presence-icon {
    align-items: center;
    background: #edf5ff;
    border-radius: 999px;
    color: #2f6a99;
    display: inline-flex;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.milestone-list-chevron {
    color: var(--ink-soft);
}

.milestone-empty--list {
    align-items: center;
    background: #fbfafc;
    color: var(--ink-soft);
    display: grid;
    gap: 4px;
    justify-items: center;
    padding: 38px 16px;
    text-align: center;
}

.milestone-empty--list strong {
    color: var(--sensipode-blue);
    font-size: 15px;
}

.milestone-empty__actions {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 10px;
}

.milestone-empty__actions a,
.milestone-empty__actions button {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    min-height: 32px;
    padding: 0 12px;
    text-decoration: none;
}

.milestone-empty__actions a {
    background: white;
    border: 1px solid #d9cbe3;
    color: var(--sensipode-blue);
}

.milestone-empty__actions button {
    background: #211b46;
    border: 1px solid #211b46;
    color: white;
    cursor: pointer;
}

.milestone-inspector {
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 16px 32px rgba(33, 27, 70, 0.08);
    max-height: calc(100vh - 178px);
    overflow: auto;
    position: sticky;
    top: 82px;
}

.milestone-inspector__header {
    align-items: start;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 12px;
}

.milestone-inspector__header span {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.milestone-inspector__header h2 {
    color: var(--sensipode-blue);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    margin: 2px 0 0;
}

.milestone-inspector__header a {
    color: var(--sensipode-blue);
    text-decoration: none;
}

.milestone-inspector-form {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.milestone-inspector-form label,
.milestone-inspector__participants,
.milestone-inspector__conditional {
    display: grid;
    gap: 5px;
}

.milestone-inspector-form label > span,
.milestone-inspector__participants > span,
.milestone-inspector__conditional > span {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.milestone-inspector-form input,
.milestone-inspector-form select,
.milestone-inspector-form textarea {
    background: #fbfafc;
    border: 1px solid #ddd3e6;
    border-radius: 7px;
    color: var(--sensipode-blue);
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    min-height: 34px;
    min-width: 0;
    padding: 7px 8px;
    width: 100%;
}

.milestone-inspector-form .is-invalid,
.project-milestone-side-form .is-invalid {
    border-color: #d93025;
    box-shadow: 0 0 0 2px rgba(217, 48, 37, 0.08);
}

.milestone-field-error {
    color: #9b2634;
    font-size: 11px;
    font-weight: 650;
    margin: -1px 0 0;
}

.milestone-inspector-form textarea {
    resize: vertical;
}

.milestone-inspector__pair {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.milestone-inspector__conditional,
.milestone-inspector__participants {
    background: #fbfafc;
    border: 1px solid #ede7f1;
    border-radius: 8px;
    padding: 9px;
}

.milestone-inspector__participants > div {
    display: grid;
    gap: 5px;
    max-height: 128px;
    overflow: auto;
}

.milestone-inspector__participants label,
.milestone-inspector__conditional label {
    align-items: center;
    display: flex;
    font-size: 12px;
    gap: 7px;
}

.milestone-inspector__participants input,
.milestone-inspector__conditional input[type="checkbox"],
.milestone-inspector__conditional input[type="radio"] {
    min-height: 0;
    width: auto;
}

.milestone-independent-help {
    background: #f7f3fb;
    border: 1px solid #ede7f1;
    border-radius: 7px;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    margin: -2px 0 0;
    padding: 8px 9px;
}

.milestone-staffing-warning {
    background: #fff3cf;
    border: 1px solid #f2d889;
    border-radius: 7px;
    color: #705019;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.35;
    margin: -2px 0 0;
    padding: 8px 9px;
}

.milestone-inherited-card {
    background: #f8fbff;
    border: 1px solid #dceaf8;
    border-radius: 8px;
    display: grid;
    gap: 8px;
    padding: 9px;
}

.milestone-inherited-card > span,
.milestone-inspector__section-title {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.milestone-inherited-card dl {
    display: grid;
    gap: 6px;
    margin: 0;
}

.milestone-inherited-card div {
    align-items: baseline;
    display: grid;
    gap: 8px;
    grid-template-columns: 96px minmax(0, 1fr);
}

.milestone-inherited-card dt {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 650;
}

.milestone-inherited-card dd {
    color: var(--sensipode-blue);
    font-size: 11px;
    font-weight: 750;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.milestone-inspector__footer {
    align-items: center;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 8px;
    justify-content: space-between;
    padding-top: 10px;
}

.milestone-inspector__footer a,
.milestone-inspector__footer button {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    gap: 6px;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    text-decoration: none;
}

.milestone-inspector__save {
    background: #211b46;
    border: 1px solid #211b46;
    color: white;
    cursor: pointer;
}

.milestone-inspector__delete {
    background: white;
    border: 1px solid #f0c9cd;
    color: #9b2634;
    cursor: pointer;
}

.milestone-inspector__delete .material-symbols-outlined {
    font-size: 17px;
}

.app-flash {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.app-flash button {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    opacity: 0.72;
    padding: 0;
}

.app-flash button:hover {
    opacity: 1;
}

.app-flash .material-symbols-outlined {
    font-size: 18px;
}

@media (max-width: 1180px) {
    .project-milestones-header {
        align-items: stretch;
        flex-direction: column;
    }

    .project-milestones-workbench.has-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .milestone-inspector {
        max-height: none;
        position: static;
    }

    .milestone-list-item {
        grid-template-columns: 36px minmax(180px, 1fr) 74px 86px 78px 24px 22px;
    }

    .milestone-participants-preview {
        display: none;
    }
}

.milestone-specific-fields label {
    display: grid;
    gap: 4px;
}

.date-entry {
    position: relative;
}

.date-entry {
    display: block;
}

.date-entry .date-mask {
    box-sizing: border-box;
    width: 100%;
    padding-right: 34px;
}

.date-picker-button {
    background: transparent;
    border: 0;
    cursor: pointer;
    height: 100%;
    inset: 0 0 0 auto;
    padding: 0;
    position: absolute;
    width: 32px;
}

.date-picker-button::before {
    content: "calendar_month";
    font-family: "Material Symbols Outlined";
    font-feature-settings: "liga";
    font-size: 20px;
    line-height: 1;
    color: #7f6f93;
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
}

.date-picker-button::after {
    content: none;
}

.date-entry .date-picker {
    height: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.sensi-datepicker {
    background: white;
    border: 1px solid #d9cbe3;
    border-radius: 10px;
    box-shadow: 0 18px 42px rgba(39, 36, 69, 0.18);
    display: grid;
    gap: 8px;
    padding: 10px;
    position: absolute;
    width: 274px;
    z-index: var(--z-picker);
}

/* Ouvert depuis une <dialog> modale (top layer) : rattaché à la dialog et
   positionné en coordonnées viewport pour passer DEVANT la modale. */
.sensi-datepicker--fixed {
    position: fixed;
}

.sensi-datepicker[hidden] {
    display: none;
}

.sensi-datepicker__header,
.sensi-datepicker__actions {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.sensi-datepicker__header strong {
    color: var(--sensipode-blue);
    font-size: 13px;
    font-weight: 750;
    text-transform: capitalize;
}

.sensi-datepicker__header button,
.sensi-datepicker__actions button {
    background: #fbfafc;
    border: 1px solid #ddd3e6;
    border-radius: 7px;
    color: var(--sensipode-blue);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    min-height: 30px;
    padding: 5px 9px;
}

.sensi-datepicker__header button {
    font-size: 18px;
    height: 30px;
    line-height: 1;
    padding: 0;
    width: 30px;
}

.sensi-datepicker__weekdays,
.sensi-datepicker__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.sensi-datepicker__weekdays span {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 850;
    padding: 2px 0 4px;
    text-align: center;
}

.sensi-datepicker__day {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--sensipode-blue);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    height: 32px;
    position: relative;
}

.sensi-datepicker__day:hover,
.sensi-datepicker__day.is-preview-end {
    background: #eef7fb;
    border-radius: 999px;
}

.sensi-datepicker__day.is-outside {
    color: #b9adbf;
    opacity: 0.62;
}

.sensi-datepicker__day.is-today::after {
    background: #2f80ed;
    border-radius: 999px;
    bottom: 4px;
    content: "";
    height: 4px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 4px;
}

.sensi-datepicker__day.is-selected,
.sensi-datepicker__day.is-range-start,
.sensi-datepicker__day.is-range-end {
    background: var(--sensipode-blue);
    border-radius: 999px;
    color: white;
    font-weight: 850;
}

.sensi-datepicker__day.is-preview-end {
    box-shadow: inset 0 0 0 1px #2f80ed;
}

.sensi-datepicker__day.is-in-range,
.sensi-datepicker__day.is-preview-range {
    background: #edf6fb;
    color: var(--sensipode-blue);
}

.sensi-datepicker__day.is-preview-range {
    background: #f5f1fb;
}

.sensi-datepicker__actions {
    border-top: 1px solid var(--line);
    padding-top: 8px;
}

.milestone-status-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.milestone-date-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.milestone-participants {
    align-content: start;
    grid-template-columns: 1fr;
}

.milestone-participant-list {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
}

.milestone-participants label {
    align-items: center;
    display: flex;
    gap: 6px;
    font-size: 11px;
    line-height: 1.2;
    min-width: 0;
    white-space: nowrap;
}

.milestone-participants input {
    flex: 0 0 auto;
    width: auto;
}

.milestone-participants span {
    background: #ece5ef;
    border-radius: 999px;
    color: var(--sensipode-blue);
    font-size: 10px;
    font-weight: 800;
    padding: 4px 7px;
}

.milestone-participants .muted {
    background: transparent;
    color: var(--ink-soft);
    padding-left: 0;
}

.milestone-delete {
    align-items: center;
    color: var(--ink-soft);
    display: flex;
    font-size: 11px;
    font-weight: 800;
}

.milestone-delete input {
    width: auto;
}

.milestone-comment {
    grid-column: 1 / -1;
}

.milestone-actions {
    background: #fbfafc;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 12px;
}

.milestone-actions button {
    background: var(--sensipode-pink);
    border: 0;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    padding: 10px 14px;
}

.milestone-actions .button-secondary {
    background: white;
    border: 1px solid #d9cbe3;
    color: var(--sensipode-blue);
}

.milestone-empty {
    color: var(--ink-soft);
    padding: 18px;
}

@media (max-width: 1200px) {
    .milestone-editor {
        overflow-x: auto;
    }

    .milestone-editor-grid {
        min-width: 1180px;
    }
}

.project-row-label {
    align-items: center;
    background: white;
    display: flex;
    gap: 6px;
    padding: 2px 8px;
}

/* Hauteur de ligne : SOURCE UNIQUE. data-row-level est porté par les 4 cellules
   (label, charge, état, barre) de chaque ligne -> une règle par niveau suffit,
   au lieu des ~12 min-height dispersés d'avant. Spécificité 0-1-1 : l'emporte
   proprement sur les anciennes règles à classe unique, sans dépendre de l'ordre. */
.project-planning-table [data-row-level="phase"] { min-height: var(--row-h-phase); }
.project-planning-table [data-row-level="step"]  { min-height: var(--row-h-step); }
.project-planning-table [data-row-level="task"]  { min-height: var(--row-h-task); }

.project-row-label strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-row-warning {
    background: #fcece8;
    border-radius: 999px;
    color: var(--color-negative);
    flex: 0 0 auto;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    padding: 2px 7px;
}

.project-row-warning--neutral {
    background: #f1edf4;
    color: #6f5b7c;
}

.project-row-state {
    align-items: center;
    background: transparent;
    display: flex;
    overflow: visible;
    padding: 0;
}

.project-row-state--phase {
    background: transparent;
}

/* Colonne État = largeur 0 (overlay de badges flottants). AUCUNE cellule de cette
   colonne ne doit avoir de padding horizontal, sinon une languette de fond déborde
   sur la timeline — quel que soit le type de ligne (jalons, équipe, section...). */
.project-planning-table .project-planning-state {
    padding-left: 0;
    padding-right: 0;
}

/* Tags d'état du planning (Hors contrat, à planifier, Non planifié…) : typo plus
   discrète, scopée à la colonne État (sans réduire les badges ailleurs). */
.project-row-state .c-badge {
    font-size: .62rem;
    font-weight: 700;
    padding: 2px 7px;
}

.project-row-status {
    border-radius: 999px;
    display: inline-flex;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    padding: 5px 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-row-status--neutral {
    background: #f1edf4;
    color: #8a7a9c;
}

.project-row-status--warning {
    background: #fff6df;
    color: #755718;
}

.project-row-status--risk {
    background: #fcece8;
    color: var(--color-negative);
}

.project-row-label--phase {
    background: #f6f4f8;
}

.project-row-label--step {
    padding-left: 24px;
}

.project-row-label--task {
    padding-left: 42px;
}

.project-row-label--phase strong {
    font-size: 14px;
    font-weight: 750;
}

.project-row-label--step strong {
    font-size: 12px;
    font-weight: 650;
}

.project-row-label--task strong {
    font-size: 12px;
    font-weight: 450;
}

.project-row-label--phase .project-row-task-link {
    font-size: 14px;
    font-weight: 750;
}

.project-row-label--step .project-row-task-link {
    font-size: 12px;
    font-weight: 650;
}

.project-row-label--task .project-row-task-link {
    font-size: 12px;
    font-weight: 450;
}

.project-row-label.is-selected,
.project-row-charge.is-selected,
.project-row-state.is-selected,
.project-row-bar.is-selected {
    background-color: #fdf3f7;
    box-shadow: inset 2px 0 0 var(--sensipode-pink);
}

.project-row-toggle,
.project-row-spacer {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--sensipode-blue);
    display: inline-flex;
    flex: 0 0 19px;
    font: inherit;
    font-size: 15px;
    font-weight: 900;
    height: 19px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 19px;
}

.project-row-label.is-expandable,
.project-row-charge[data-toggle-row],
.project-row-state[data-toggle-row],
.project-row-bar[data-toggle-row] {
    cursor: pointer;
}

.project-row-toggle {
    border-color: #d9cbe3;
}

.project-row-label.is-expandable:hover .project-row-toggle {
    background: #fde8ef;
}

.project-row-charge[data-toggle-row]:hover,
.project-row-state[data-toggle-row]:hover,
.project-row-bar[data-toggle-row]:hover {
    background: #fbf9fc;
}

.project-row-label.is-collapsed,
.project-row-charge.is-collapsed,
.project-row-state.is-collapsed,
.project-row-bar.is-collapsed {
    display: none;
}

.project-row-bar {
    background-image: linear-gradient(to right, var(--line) 1px, transparent 1px);
    background-size: var(--project-period-width) 100%;
    position: relative;
}

.project-row-bar--phase.can-create-period,
.project-row-bar--step.can-create-period,
.project-row-bar--task.can-create-period {
    cursor: crosshair;
}

.project-row-bar--phase.can-create-period:hover,
.project-row-bar--step.can-create-period:hover,
.project-row-bar--task.can-create-period:hover {
    background: linear-gradient(90deg, rgb(46 122 174 / 8%), transparent);
}

.project-row-bar .project-row-period-bar {
    background: #ece5ef;
    border: 1px solid #b7a7c5;
    border-radius: 999px;
    display: block;
    height: 13px;
    left: var(--bar-left);
    position: absolute;
    top: 8px;
    width: max(var(--bar-width), 10px);
    z-index: 2;
}

.project-row-bar--phase .project-row-period-bar {
    background: #272445;
    border-color: #272445;
    height: 15px;
    top: 7px;
}

.project-row-bar--step .project-row-period-bar {
    background: #f1ecf7;
    border-color: #9d89b7;
    height: 11px;
    top: 9px;
}

.project-row-period-bar.is-envelope-draggable {
    cursor: grab;
}

.project-row-period-bar.is-boundary-fixed {
    cursor: default;
}

.project-row-period-bar.is-boundary-fixed::after {
    background: #ffffff;
    border: 1px solid rgb(39 36 69 / 18%);
    border-radius: 999px;
    color: var(--sensipode-blue);
    content: "Fixe";
    font-size: 9px;
    font-weight: 850;
    line-height: 1;
    padding: 2px 5px;
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
}

.project-row-bar--task .project-row-period-bar {
    align-items: center;
    background: #fde8ef;
    border-color: #e10e49;
    cursor: grab;
    display: flex;
    gap: 4px;
    height: 9px;
    justify-content: center;
    top: 10px;
}

.project-row-period-bar.is-dragging {
    box-shadow: 0 8px 18px rgb(39 36 69 / 20%);
    cursor: grabbing;
    opacity: 0.8;
    z-index: 4;
}

.project-row-period-bar.is-creating {
    background: #f1ecf7;
    border-color: #6f5a91;
}

.project-row-period-bar.is-out-of-contract {
    box-shadow: 0 0 0 2px rgb(225 14 73 / 30%);
}

.project-row-period-bar.has-fixed-conflict {
    background: #ffe7cf;
    border-color: #e78b3a;
}

.project-row-period-bar.has-fixed-parent-conflict {
    background: #ffd9d4;
    border-color: #e10e49;
    box-shadow: 0 0 0 3px rgb(225 14 73 / 14%);
}

.project-row-period-bar.has-unavailability {
    box-shadow: 0 0 0 2px rgb(225 14 73 / 18%), 0 0 0 5px rgb(225 14 73 / 7%);
}

.project-row-period-bar b {
    background: white;
    border: 1px solid rgb(225 14 73 / 18%);
    border-radius: 999px;
    color: var(--sensipode-blue);
    display: none;
    font-size: 9px;
    font-weight: 850;
    line-height: 1;
    padding: 2px 5px;
    pointer-events: none;
    white-space: nowrap;
}

.project-row-period-bar.is-dragging b,
.project-row-period-bar:hover b {
    display: inline-flex;
}

.project-row-period-handle {
    background: white;
    border: 1px solid #e10e49;
    border-radius: 999px;
    cursor: ew-resize;
    display: none;
    height: 13px;
    position: absolute;
    top: -3px;
    width: 7px;
}

.project-row-period-bar:hover .project-row-period-handle,
.project-row-period-bar.is-dragging .project-row-period-handle {
    display: block;
}

.project-row-period-handle--start {
    left: -4px;
}

.project-row-period-handle--end {
    right: -4px;
}

.project-planning-drag-toast {
    align-items: start;
    background: var(--sensipode-blue);
    border-radius: 10px;
    bottom: 18px;
    box-shadow: 0 16px 44px rgb(39 36 69 / 22%);
    color: white;
    display: grid;
    gap: 6px;
    left: 50%;
    max-width: min(440px, calc(100vw - 32px));
    padding: 12px 42px 12px 14px;
    position: fixed;
    transform: translateX(-50%);
    z-index: var(--z-toast);
}

.project-planning-drag-toast strong,
.project-planning-drag-toast span {
    font-size: 12px;
}

.project-planning-drag-toast button {
    background: white;
    border: 0;
    border-radius: 7px;
    color: var(--sensipode-blue);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 850;
    justify-self: start;
    padding: 6px 10px;
}

.project-planning-drag-toast .project-planning-toast-close {
    background: transparent;
    color: white;
    font-size: 18px;
    line-height: 1;
    padding: 2px 6px;
    position: absolute;
    right: 8px;
    top: 8px;
}

.project-row-bar .project-row-personal-block {
    align-items: center;
    background: #dff0fb;
    border: 1px solid #bfe0ee;
    border-radius: 6px;
    color: #15546b;
    /* Masqué sur le planning projet (décision : ce planning montre la structure /
       phases / jalons, pas la charge individuelle planifiée dans « Ma charge »).
       Repasser à inline-flex pour les réafficher. Le reste du style est conservé. */
    display: none;
    font-size: 10px;
    font-weight: 750;
    gap: 4px;
    height: 18px;
    justify-content: center;
    left: calc(var(--block-left) + 3px);
    min-width: 42px;
    overflow: hidden;
    padding: 0 5px;
    text-overflow: ellipsis;
    top: 5px;
    white-space: nowrap;
    width: calc(var(--block-width) - 6px);
    z-index: 2;
}

.project-row-bar .project-row-personal-block.is-travel {
    background: #fdf1e3;
    border-color: #f2d2a8;
    color: #985b1b;
}

.project-row-bar .project-row-personal-block small {
    background: transparent;
    border: 0;
    display: inline;
    font-size: 9px;
    font-weight: 850;
    height: auto;
    position: static;
    width: auto;
}

.project-planning-edit-form,
.project-task-split-panel {
    border-top: 1px solid var(--line);
    display: grid;
    gap: 8px;
    padding-top: 10px;
}

.project-planning-edit-form label {
    display: grid;
    gap: 5px;
}

.project-planning-edit-form label span,
.project-task-split-panel span {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.project-planning-edit-form input {
    background: #fbfafc;
    border: 1px solid #ddd3e6;
    border-radius: 7px;
    color: var(--sensipode-blue);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    min-height: 34px;
    padding: 7px 8px;
}

.project-context-warning {
    background: #fcece8;
    border: 1px solid #f3c9c1;
    border-radius: 7px;
    color: var(--color-negative);
    font-size: 12px;
    font-weight: 650;
    margin: 0;
    padding: 8px;
}

.project-task-split-panel {
    background: #fbfafc;
    border: 1px solid #ede7f1;
    border-radius: 7px;
    padding: 9px;
}

.project-task-split-panel summary {
    color: var(--sensipode-blue);
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
}

.project-task-split-panel p {
    color: var(--ink-soft);
    font-size: 11px;
    margin: 0;
}

.project-task-split-panel button {
    background: white;
    border: 1px solid #ddd3e6;
    border-radius: 7px;
    color: var(--sensipode-blue);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    min-height: 32px;
}

.project-section-label {
    align-items: center;
    background: #f6f4f8;
    color: var(--sensipode-blue);
    display: flex;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    min-height: 30px;
    padding: 7px 10px;
    text-transform: uppercase;
}

.project-team-preview {
    align-items: center;
    background: #fcfcfc;
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 20px 10px 34px;
}

.project-team-preview span {
    background: #f4eff8;
    border-radius: 6px;
    color: var(--sensipode-blue);
    font-size: 12px;
    font-weight: 800;
    padding: 5px 8px;
}

.project-test-list {
    display: grid;
    gap: 24px;
    margin-top: 28px;
}

.project-test-card {
    margin-top: 0;
}

.project-test-selector {
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    margin: 24px 0;
    padding: 16px;
}

.project-test-selector label,
.project-test-selector span {
    display: block;
}

.project-test-selector span {
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.project-test-selector select {
    background: white;
    border: 1px solid #d9cbe3;
    border-radius: 8px;
    color: var(--sensipode-blue);
    font: inherit;
    font-weight: 800;
    min-height: 44px;
    padding: 8px 30px 8px 12px;
    width: min(100%, 820px);
}

.project-test-tags {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.project-test-summary {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    background: var(--line);
}

.project-test-summary > div {
    background: white;
    min-height: 74px;
    padding: 14px 16px;
}

.project-test-summary span,
.phase-detail summary span {
    color: var(--ink-soft);
    display: block;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.project-test-summary strong {
    display: block;
    font-size: 18px;
    margin-top: 5px;
}

.project-control-strip {
    align-items: stretch;
    background: #fbf8fc;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 1px;
    grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(110px, 0.7fr));
}

.project-control-strip--mvp {
    grid-template-columns: repeat(6, minmax(120px, 1fr));
}

.project-control-strip > div {
    background: white;
    min-height: 66px;
    padding: 12px 14px;
}

.project-control-strip span,
.project-control-strip em {
    color: var(--ink-soft);
    display: block;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}

.project-control-strip strong {
    display: block;
    font-size: 18px;
    margin-top: 5px;
}

.project-control-strip__main strong {
    font-size: 16px;
}

.project-control-strip__main em {
    color: var(--sensipode-pink);
    margin-top: 4px;
}

.project-test-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    padding: 20px;
}

.project-test-grid--single {
    border-top: 1px solid var(--line);
    grid-template-columns: 1fr;
    padding-top: 0;
}

.project-test-grid h3,
.project-test-phases h3 {
    font-size: 16px;
    margin: 0 0 10px;
}

.project-test-phases {
    border-top: 1px solid var(--line);
    padding: 20px;
}

.phase-detail {
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-top: 10px;
    overflow: hidden;
}

.phase-detail summary {
    align-items: center;
    cursor: pointer;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(280px, 1fr) repeat(3, max-content);
    list-style: none;
    padding: 12px 14px;
}

.phase-detail summary::-webkit-details-marker {
    display: none;
}

.phase-detail summary strong {
    font-size: 15px;
}

.phase-detail > p {
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    margin: 0;
    padding: 12px 14px;
}

.step-block {
    border-top: 1px solid var(--line);
}

.step-heading {
    align-items: center;
    background: #fbf8fc;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 10px 14px;
}

.step-heading strong,
.step-heading span {
    display: block;
}

.step-heading > span {
    background: #ece5ef;
    border-radius: 6px;
    color: var(--sensipode-blue);
    font-size: 12px;
    font-weight: 900;
    padding: 5px 8px;
    white-space: nowrap;
}

.step-heading div span {
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 800;
    margin-top: 3px;
}

.mini-pill {
    background: #ece5ef;
    border-radius: 6px;
    color: var(--sensipode-blue);
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    margin: 2px 4px 2px 0;
    padding: 4px 7px;
    white-space: nowrap;
}

.availability-planner {
    min-width: 760px;
    overflow-x: auto;
}

.availability-grid {
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: minmax(210px, 1.3fr) repeat(5, minmax(92px, 1fr));
}

.availability-grid--header {
    background: var(--sensipode-blue);
    color: white;
}

.availability-name,
.availability-day-heading,
.presence-cell {
    align-items: center;
    display: flex;
    min-height: 54px;
    padding: 10px 12px;
}

.availability-name {
    border-right: 1px solid var(--line);
    flex-direction: column;
    justify-content: center;
}

.availability-name strong,
.availability-name span {
    display: block;
    width: 100%;
}

.availability-name span,
.availability-day-heading span {
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 800;
    margin-top: 3px;
}

.availability-grid--header .availability-name span,
.availability-grid--header .availability-day-heading span {
    color: rgba(255, 255, 255, 0.74);
}

.availability-day-heading {
    border-right: 1px solid rgba(255, 255, 255, 0.16);
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.presence-cell {
    border-right: 1px solid var(--line);
    font-size: 14px;
    font-weight: 900;
    justify-content: center;
}

.presence-cell--p,
.presence-pill--p {
    background: #e2f7e8;
    color: var(--color-positive);
}

.presence-cell--d,
.presence-pill--d {
    background: #fdf1e3;
    color: #985b1b;
}

.presence-cell--t,
.presence-pill--t {
    background: #e7f3f7;
    color: #2b6685;
}

.presence-cell--off,
.presence-pill--off {
    background: transparent;
    color: #c4bdd1;
    font-weight: 600;
}

.presence-pill--neutral {
    background: #f6f4f8;
    color: var(--ink-soft);
}

.presence-pill {
    border-radius: 6px;
    display: inline-flex;
    height: 25px;
    font-size: 12px;
    font-weight: 900;
    justify-content: center;
    min-width: 0;
    padding: 5px 0;
    width: 38px;
}

.presence-pill--off {
    width: 42px;
}

.half-day-pair {
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(62px, 1fr) minmax(62px, 1fr);
    min-width: 132px;
}

.half-day-cell {
    align-items: center;
    display: grid;
    gap: 4px;
    justify-items: center;
}

.half-day-cell > span:first-child,
.half-day-cell small {
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 800;
}

.availability-table td > span:not(.presence-pill) {
    font-size: 12px;
}

.workload-indicator {
    border-radius: 6px;
    display: inline-flex;
    font-size: 13px;
    font-weight: 900;
    min-width: 54px;
    padding: 6px 8px;
}

.workload-indicator--available {
    background: #e2f7e8;
    color: var(--color-positive);
}

.workload-indicator--expired {
    background: #fcf4e1;
    color: #8e721b;
}

.workload-indicator--overload {
    background: #fde4e5;
    color: #bd1632;
}

.tag,
.risk {
    border-radius: 6px;
    font-size: 13px;
    font-weight: 800;
    padding: 6px 8px;
    text-align: center;
}

.tag {
    background: #eaf7fb;
    color: #08759a;
}

.pole-tag {
    background: var(--pole-agency-bg);
    border: 1px solid var(--pole-agency);
    border-radius: 6px;
    color: var(--pole-agency-ink);
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.1;
    padding: 5px 8px;
    text-align: center;
}

.pole-tag + .pole-tag {
    margin-top: 6px;
}

.pole-tag--strategie-a-impact {
    background: var(--pole-strat-bg);
    border-color: color-mix(in srgb, var(--pole-strat) 50%, white);
    color: var(--pole-strat-ink);
}

.pole-tag--innovation-experimentation {
    background: var(--pole-inno-bg);
    border-color: color-mix(in srgb, var(--pole-inno) 50%, white);
    color: var(--pole-inno-ink);
}

.pole-tag--ux-ui-responsable {
    background: var(--pole-ux-bg);
    border-color: color-mix(in srgb, var(--pole-ux) 50%, white);
    color: var(--pole-ux-ink);
}

.pole-tag--design-des-vulnerabilites {
    background: var(--pole-vuln-bg);
    border-color: color-mix(in srgb, var(--pole-vuln) 50%, white);
    color: var(--pole-vuln-ink);
}

.pole-tag--vie-agence,
.pole-tag--agence {
    background: var(--pole-agency-bg);
    border-color: color-mix(in srgb, var(--pole-agency) 50%, white);
    color: var(--pole-agency-ink);
}

.risk {
    background: #f5edf9;
    color: #7b4aa0;
}

.status-pill {
    border-radius: 6px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    padding: 6px 8px;
}

.status-pill--standby {
    background: #fcf4e1;
    color: #8e721b;
}

.status-pill--termine,
.status-pill--fini {
    background: #ece5ef;
    color: #272445;
}

.status-pill--non_realise,
.status-pill--a_venir {
    background: #e7f3f7;
    color: #2b6685;
}

.status-pill--en_cours,
.status-pill--actif {
    background: #e2f7e8;
    color: var(--color-positive);
}

.task-status-pill--standby {
    background: #fcf4e1;
    color: #8e721b;
}

.task-status-pill--termine {
    background: #e2f7e8;
    color: var(--color-positive);
}

.task-status-pill--non_realise {
    background: #ece5ef;
    color: #272445;
}

.task-status-pill--en_cours {
    background: #e7f3f7;
    color: #2b6685;
}

.table-wrap {
    overflow-x: auto;
}

.data-table {
    border-collapse: collapse;
    min-width: 980px;
    width: 100%;
}

.data-table th,
.data-table td {
    border-bottom: 1px solid var(--line);
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
}

.data-table th {
    background: var(--sensipode-blue);
    color: white;
    font-size: 12px;
    text-transform: uppercase;
}

.data-table td {
    font-size: 14px;
}

.data-table--compact {
    min-width: 0;
}

.data-table--compact th,
.data-table--compact td {
    font-size: 12px;
    padding: 9px 10px;
}

/* Cible les textes secondaires en cellule, mais PAS les composants (avatar/person),
   sinon l'avatar passe en block (centrage flex cassé, initiales collées en haut). */
.data-table td > span:not(.tag):not(.c-avatar):not(.c-person) {
    color: var(--ink-soft);
    display: block;
    margin-top: 3px;
}

@media (max-width: 980px) {
    .project-test-grid {
        grid-template-columns: 1fr;
    }

    .project-control-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .project-control-strip__main {
        grid-column: 1 / -1;
    }

    .phase-detail summary {
        grid-template-columns: 1fr;
    }
}

.tag-muted {
    background: #f4eff8;
    color: #6f6090;
    display: inline-block;
    margin-top: 6px;
}

.role-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.role-tag {
    background: #ece5ef;
    border: 1px solid #d8ccdf;
    border-radius: 6px;
    color: var(--sensipode-blue);
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    padding: 5px 8px;
}

.reference-swatch {
    border: 1px solid currentColor;
    border-radius: 6px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    padding: 5px 8px;
}

.reference-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.reference-summary span,
.reference-source,
.reference-tone {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    padding: 6px 8px;
}

.reference-summary span {
    background: #fbf9fc;
    color: var(--ink-soft);
}

.reference-summary strong {
    color: var(--sensipode-blue);
}

.reference-source {
    margin-left: 8px;
    vertical-align: middle;
}

.reference-source--database {
    background: #e7f3f7;
    border-color: #c2e1eb;
    color: #2b6685;
}

.reference-source--catalog {
    background: #f5edfa;
    border-color: #ddcbea;
    color: #624d95;
}

.reference-tone--ok {
    background: #e2f7e8;
    border-color: #bfe8cb;
    color: #107540;
}

.reference-tone--warn {
    background: #fcf4e1;
    border-color: #efdba2;
    color: #8e721b;
}

.reference-tone--risk {
    background: #fcece8;
    border-color: #f1c8c1;
    color: #913d3a;
}

.reference-tone--info {
    background: #e7f3f7;
    border-color: #c2e1eb;
    color: #2b6685;
}

.reference-tone--neutral {
    background: #ece5ef;
    border-color: #d8ccdf;
    color: #272445;
}

.reference-metadata {
    background: #fbf9fc;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink-soft);
    display: inline-block;
    font-size: 12px;
    max-width: 360px;
    overflow-wrap: anywhere;
    padding: 6px 8px;
}

.button-primary,
.table-action {
    border-radius: 6px;
    display: inline-flex;
    font-size: 13px;
    font-weight: 900;
    justify-content: center;
    line-height: 1;
    padding: 10px 12px;
    text-decoration: none;
}

.button-primary {
    background: var(--sensipode-pink);
    border: 0;
    color: white;
}

.table-action {
    background: #ece5ef;
    color: var(--sensipode-blue);
}

.table-muted {
    color: var(--ink-soft);
    display: block;
    font-size: 12px;
    margin-top: 4px;
}

.flash-success {
    background: #e2f7e8;
    border: 1px solid #bfe8cb;
    border-radius: 8px;
    color: var(--color-positive);
    font-weight: 900;
    margin: 20px 0;
    padding: 12px 14px;
}

.form-panel {
    padding: 20px;
}

.form-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.form-panel label {
    display: block;
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.form-panel input,
.form-panel select,
.form-panel textarea {
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--sensipode-blue);
    font: inherit;
    padding: 10px 11px;
    width: 100%;
}

.form-panel textarea {
    min-height: 110px;
    resize: vertical;
}

.form-panel .help-text,
.form-panel .form-text {
    color: var(--ink-soft);
    display: block;
    font-size: 12px;
    margin-top: 4px;
}

.form-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 18px;
}

.form-checks > div {
    align-items: center;
    display: flex;
    gap: 8px;
}

.form-checks input {
    width: auto;
}

.form-checks label {
    margin: 0;
    text-transform: none;
}

.form-actions {
    border-top: 1px solid var(--line);
    margin-top: 22px;
    padding-top: 18px;
}

.status-pill--ok {
    background: #e2f7e8;
    color: var(--color-positive);
}

.status-pill--muted {
    background: #ece5ef;
    color: var(--sensipode-blue);
}

.pilotage-summary {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin: 28px 0 18px;
}

.pilotage-tabs {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.pilotage-tabs a {
    background: #ece5ef;
    border-radius: 6px;
    color: var(--sensipode-blue);
    font-size: 13px;
    font-weight: 900;
    padding: 9px 11px;
    text-decoration: none;
}

.pilotage-panel {
    scroll-margin-top: 72px;
}

.pilotage-table-block {
    border-top: 1px solid var(--line);
    padding: 18px 20px 22px;
}

.pilotage-table-block:first-of-type {
    border-top: 0;
}

.pilotage-table-block h3 {
    font-size: 16px;
    margin: 0 0 12px;
}

.pilotage-table {
    min-width: 1120px;
}

.pilotage-status {
    border-radius: 6px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    padding: 5px 8px;
    white-space: nowrap;
}

.pilotage-status--valide-mvp,
.pilotage-status--ok,
.pilotage-status--production-ok {
    background: #e2f7e8;
    color: var(--color-positive);
}

.pilotage-status--en-cours,
.pilotage-status--a-cadrer,
.pilotage-status--a-surveiller {
    background: #e7f3f7;
    color: #2b6685;
}

.pilotage-status--a-isoler,
.pilotage-status--a-securiser {
    background: #fcf4e1;
    color: #8e721b;
}

.pilotage-status--a-supprimer-avant-prod {
    background: #fcece8;
    color: var(--color-negative);
}

.pilotage-status--acceptable-en-migration,
.pilotage-status--isole-en-fixture {
    background: #ece5ef;
    color: var(--sensipode-blue);
}

.pilotage-empty {
    color: var(--ink-soft);
    font-weight: 800;
    padding: 20px;
}

.status-tag,
.time-balance {
    border-radius: 6px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    padding: 5px 8px;
}

.status-tag {
    background: #f4eff8;
    color: var(--sensipode-blue);
}

.time-balance {
    background: var(--pole-vuln-bg);
    color: var(--pole-vuln-ink);
}

.time-balance--warning {
    background: #ffe8ec;
    color: var(--sensipode-pink);
}

.auth-shell {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: calc(100vh - 56px);
    padding: 32px 18px;
}

.auth-card {
    background: var(--surface-strong);
    border: 1px solid var(--line);
    border-radius: 8px;
    max-width: 430px;
    padding: 32px;
    width: 100%;
}

.auth-card h1 {
    font-size: 40px;
}

.auth-card p:not(.eyebrow) {
    color: var(--ink-soft);
    line-height: 1.5;
}

.auth-error {
    background: #ffe8ec;
    border: 1px solid #f6b6c5;
    border-radius: 6px;
    color: #9f1239;
    font-weight: 800;
    margin: 18px 0;
    padding: 10px 12px;
}

.auth-success {
    background: var(--pole-vuln-bg);
    border: 1px solid color-mix(in srgb, var(--pole-vuln) 50%, white);
    border-radius: 6px;
    color: var(--pole-vuln-ink);
    font-weight: 800;
    margin: 18px 0;
    padding: 10px 12px;
}

.auth-link {
    font-size: 14px;
    font-weight: 800;
    margin: 18px 0 0;
}

.auth-link a,
.auth-test-link a {
    color: var(--sensipode-pink);
}

.auth-test-link {
    background: #f4eff8;
    border: 1px solid #d8ccdf;
    border-radius: 6px;
    margin-top: 18px;
    padding: 12px;
}

.auth-test-link strong,
.auth-test-link a {
    display: block;
}

.auth-test-link a {
    margin-top: 6px;
    overflow-wrap: anywhere;
}

.auth-form {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.auth-form label {
    font-size: 13px;
    font-weight: 900;
}

.auth-form input {
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--sensipode-blue);
    font: inherit;
    padding: 12px;
}

.auth-form input:focus {
    border-color: var(--sensipode-pink);
    outline: 3px solid #f9c8d5;
}

.auth-form button {
    background: var(--sensipode-pink);
    border: 0;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    margin-top: 10px;
    padding: 13px 16px;
}

@media (max-width: 760px) {
    .project-team-context,
    .project-team-summary {
        grid-template-columns: 1fr;
    }

    .project-team-actions {
        justify-content: stretch;
    }

    .project-team-finder,
    .project-team-finder summary {
        width: 100%;
    }

    .project-team-finder > div {
        min-width: min(520px, calc(100vw - 36px));
        right: auto;
        left: 0;
    }

    .project-team-finder__filters {
        grid-template-columns: 1fr;
    }

    .project-row {
        align-items: start;
        grid-template-columns: 1fr;
    }

    .tag,
    .risk {
        text-align: left;
    }
}

/* ============================================================================
   COMPOSANTS RÉUTILISABLES — design system (cf. audit ergonomique 2026-08-28)
   Objets partagés, à utiliser via <twig:Button> / <twig:Badge> / <twig:Person>.
   Remplacent progressivement les classes propres à chaque écran.
   ============================================================================ */
:root {
    /* Tons de statut (badge/Status). */
    --c-ok:      #1e9d8b;  --c-ok-bg:      #e3f6f2;
    --c-warn:    #a86a12;  --c-warn-bg:    #fdf1e3;
    --c-risk:    #c0224c;  --c-risk-bg:    #fce4ea;
    --c-info:    #2b6685;  --c-info-bg:    #e7f3f7;
    --c-neutral: #625d7c;  --c-neutral-bg: #f1eff6;

    /* Indicateurs « bon / mauvais » (dérive, écarts, deltas…) — auparavant codés
       en dur (#107540 / #913d3a) dans ~29 règles. Distincts des tons de badge à
       dessein ; à aligner sur --c-ok / --c-risk plus tard si on veut les unifier. */
    --color-positive: #107540;
    --color-negative: #913d3a;

    /* Échelle z-index des COUCHES globales (valeurs = celles déjà en place, juste
       nommées → aucun changement d'empilement). Standard pour le futur code.
       L'empilement interne fin (grille planning : 1–24, 30–40) reste local et
       n'est volontairement pas remappé. */
    --z-menu:        60;   /* menus déroulants du bandeau */
    --z-context-bar: 90;   /* barre de contexte collante */
    --z-picker:     100;   /* datepicker */
    --z-popover:    120;   /* popovers */
    --z-topbar:     140;   /* bandeau supérieur */
    --z-toast:      220;   /* toasts / notifications */
    --z-modal:     1000;   /* modales & backdrops (couche max) */
}

/* --- Bouton --- */
.c-btn {
    font: inherit;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 9px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: filter .15s ease, background .15s ease;
}
.c-btn:focus-visible { outline: 2px solid var(--sensipode-blue); outline-offset: 2px; }
.c-btn:disabled,
.c-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.c-btn--primary   { background: var(--sensipode-blue); color: #fff; }
.c-btn--primary:hover   { filter: brightness(1.14); }
.c-btn--secondary { background: transparent; color: var(--sensipode-blue); border-color: var(--sensipode-blue); }
.c-btn--secondary:hover { background: var(--pole-agency-bg); }
.c-btn--ghost     { background: transparent; color: var(--sensipode-blue); }
.c-btn--ghost:hover     { background: var(--pole-agency-bg); }
.c-btn--danger    { background: var(--sensipode-pink); color: #fff; }
.c-btn--danger:hover    { filter: brightness(1.08); }
.c-btn--icon      { width: 38px; height: 38px; padding: 0; background: var(--pole-agency-bg); color: var(--sensipode-blue); font-size: 1.15rem; }
.c-btn--sm        { padding: 6px 11px; font-size: .8rem; border-radius: 7px; }

/* --- Badge / état --- */
.c-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: .74rem;
    line-height: 1.2;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.c-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.c-badge--neutral { background: var(--c-neutral-bg); color: var(--c-neutral); }
.c-badge--ok      { background: var(--c-ok-bg);      color: var(--c-ok); }
.c-badge--warn    { background: var(--c-warn-bg);    color: var(--c-warn); }
.c-badge--risk    { background: var(--c-risk-bg);    color: var(--c-risk); }
.c-badge--info    { background: var(--c-info-bg);    color: var(--c-info); }

/* --- Personne (collaborateur) --- */
.c-person { display: inline-flex; align-items: center; gap: 10px; }
.c-avatar {
    align-items: center;
    background: var(--pole-ux-bg);
    border-radius: 10px;
    color: var(--pole-ux-ink);
    /* inline-flex (et pas inline-grid) : en grid la ligne auto se colle en haut
       (align-content: start) et les initiales paraissent trop hautes ; en flex,
       align-items: center centre le texte sur toute la hauteur du carré. */
    display: inline-flex;
    flex: none;
    font-size: .74rem;
    font-weight: 700;
    height: 34px;
    justify-content: center;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    width: 34px;
}

.c-person--sm {
    gap: 8px;
}

.c-avatar--sm {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    font-size: .66rem;
}

.c-avatar--xs {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: .62rem;
}

.c-person--xs {
    gap: 6px;
}

.c-person__who { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.c-person__who strong { font-size: .88rem; }
.c-person__who small  { font-size: .72rem; color: var(--ink-soft); }

/* Densité compact : nom et rôle sur UNE ligne (le rôle à côté du nom, séparé
   d'un point). Le nom se tronque, le rôle reste visible. La densité detailed
   garde son empilement (contexte sous le nom). */
.c-person--compact .c-person__who { flex-direction: row; align-items: baseline; gap: 6px; }
.c-person--compact .c-person__who strong { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-person--compact .c-person__who small { flex: 0 0 auto; white-space: nowrap; }
.c-person--compact .c-person__who small::before { content: "·"; margin-right: 6px; color: #c9bdd6; }

/* --- Mini-jauge KPI (Ma charge) --- */
.kpi-gauge {
    display: block;
    height: 4px;
    margin-top: 8px;
    background: var(--line);
    border-radius: 999px;
    overflow: hidden;
}
.kpi-gauge__fill {
    display: block;
    height: 100%;
    min-width: 2px;
    background: var(--sensipode-blue);
    border-radius: 999px;
}
.kpi-gauge__fill--risk { background: var(--c-risk); }

/* --- Planning : tag ÉTAT en overlay flottant au-dessus de la timeline --- */
/* La colonne ÉTAT n'occupe plus de place ; le badge est épinglé (sticky) et
   flotte par-dessus le début de la timeline, quel que soit le scroll. */
.project-planning-table { --project-state-width: 0px; }

/* Colonne Charge : à l'écran on montre la valeur courante (h:mm ou jours) ; la
   variante « jours » n'apparaît qu'à l'impression (cf. @media print). */
.charge-print-days { display: none; }

@page {
    size: A4 landscape;
    margin: 10mm;
}

@media print {
    body.is-planning-export-print {
        background: white;
    }

    body.is-planning-export-print .topbar,
    body.is-planning-export-print .app-header,
    body.is-planning-export-print .app-topbar,
    body.is-planning-export-print .page-context-bar,
    body.is-planning-export-print .project-context-panel,
    body.is-planning-export-print .planning-version-dialog,
    body.is-planning-export-print .planning-envelope-dialog,
    body.is-planning-export-print .project-planning-drag-toast,
    body.is-planning-export-print .project-planning-hero {
        display: none !important;
    }

    body.is-planning-export-print .project-planning-page {
        background: white !important;
        padding: 0 !important;
    }

    body.is-planning-export-print .project-planning-workbench {
        display: block !important;
        padding: 0 !important;
    }

    body.is-planning-export-print .project-planning-main {
        overflow: visible !important;
    }

    body.is-planning-export-print .planning-export-print-heading {
        align-items: end;
        color: var(--sensipode-blue);
        display: flex;
        justify-content: space-between;
        margin: 0 0 8px;
    }

    body.is-planning-export-print .planning-export-print-heading span,
    body.is-planning-export-print .planning-export-print-heading small {
        color: var(--ink-soft);
        display: block;
        font-size: 8pt;
        font-weight: 700;
        text-transform: uppercase;
    }

    body.is-planning-export-print .planning-export-print-heading strong {
        display: block;
        font-size: 13pt;
        margin-top: 2px;
    }

    body.is-planning-export-print .project-planning-table {
        border: 1px solid #ded8e7 !important;
        box-shadow: none !important;
        font-size: 7.5pt !important;
        max-height: none !important;
        overflow: visible !important;
        width: 100% !important;
    }

    body.is-planning-export-print .project-planning-table * {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Fit A4 : la timeline vaut normalement « semaines × largeur fixe » -> elle
       déborde en Trimestre/Année. On la force à 100% et on rend les colonnes de
       semaine flexibles. Les barres/jalons sont positionnés en % -> ils restent
       alignés ; on met aussi le fond (lignes de grille) à l'échelle. */
    body.is-planning-export-print .project-planning-timeline {
        min-width: 0 !important;
        width: 100% !important;
    }

    body.is-planning-export-print .project-planning-header.project-planning-timeline {
        grid-template-columns: repeat(var(--week-count), minmax(0, 1fr)) !important;
    }

    body.is-planning-export-print .project-planning-timeline,
    body.is-planning-export-print .project-row-bar,
    body.is-planning-export-print .project-milestone-line {
        background-size: calc(100% / var(--week-count)) 100% !important;
    }

    body.is-planning-export-print .project-planning-table .context-display-menu,
    body.is-planning-export-print .project-contract-boundaries i small {
        display: none !important;
    }

    body.is-planning-export-print[data-export-team="0"] .project-team-inline-title,
    body.is-planning-export-print[data-export-team="0"] .project-team-inline-member,
    body.is-planning-export-print[data-export-team="0"] .project-team-inline-hours,
    body.is-planning-export-print[data-export-team="0"] .project-team-inline-state,
    body.is-planning-export-print[data-export-team="0"] .project-team-inline-capacity {
        display: none !important;
    }

    body.is-planning-export-print[data-export-milestones="0"] .project-milestone-label,
    body.is-planning-export-print[data-export-milestones="0"] .project-milestone-line {
        display: none !important;
    }

    body.is-planning-export-print[data-export-phases="0"] [data-row-level="phase"],
    body.is-planning-export-print[data-export-steps="0"] [data-row-level="step"],
    body.is-planning-export-print[data-export-tasks="0"] [data-row-level="task"] {
        display: none !important;
    }

    /* Impression : colonne Charge en JOURS (on masque la valeur écran h:mm/jours
       et on montre la variante jours dédiée). */
    body.is-planning-export-print .charge-print-hide {
        display: none !important;
    }

    body.is-planning-export-print .charge-print-days {
        display: inline !important;
    }

    /* Impression : masquer le trait « aujourd'hui » (repère de travail interne). */
    body.is-planning-export-print .project-planning-timeline::after {
        display: none !important;
    }

    /* Impression : masquer les tags d'état (À planifier / Non planifié / Hors
       contrat…) — infos internes, pas pour le client. La colonne État est un
       overlay 0px, donc rien à réajuster côté grille. */
    body.is-planning-export-print .project-planning-state > * {
        display: none !important;
    }
}

.project-planning-state {
    position: sticky;
    left: calc(var(--project-left-width) + var(--project-charge-width));
    width: 0;
    overflow: visible;
    z-index: 6;
    pointer-events: none;
}
.project-planning-state > * {
    pointer-events: auto;
    position: relative;
    left: 8px;
    white-space: nowrap;
    font-weight: 500;
}
/* En-tête « État » masqué (plus de colonne) */
.project-planning-header.project-planning-state { visibility: hidden; }
/* L'overlay ÉTAT (largeur 0, badge flottant) ne prend pas le style de sélection
   (évite un jitter de reflow au clic). */
.project-planning-state.is-selected {
    background-color: transparent;
    box-shadow: none;
}
/* Barre de période cliquable (ouvre le volet) */
.project-row-bar.is-clickable { cursor: pointer; }

/* --- Présence : en-tête clair, aligné sur le Planning (au lieu du bandeau
   sombre hérité de .data-table th). Les jours passés restent atténués
   (is-past), aujourd'hui reste surligné, le week-end reste clair. --- */
.presence-week-table thead th {
    background: #ffffff;
    color: var(--sensipode-blue);
}
/* Jour + date centrés */
.presence-week-table thead th:not(.presence-week-table__collaborator) {
    text-align: center;
    vertical-align: top;
}
.presence-week-table thead th strong,
.presence-week-table thead th > span {
    text-align: center;
}

/* Avatar + nom dans un conteneur flex INTERNE : la cellule reste une vraie
   cellule de tableau (colonnes alignées header/lignes, pas de trou). */
.presence-collaborator-cell {
    align-items: center;
    display: flex;
    gap: 8px;
    min-width: 0;
}

.presence-collaborator-name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
    min-width: 0;
    text-align: left;
}
.presence-collaborator-name small {
    color: var(--ink-soft);
    font-size: 11px;
}
/* Compacter pour éviter le scroll horizontal */
.presence-week-table__collaborator {
    min-width: 190px !important;
    width: 190px !important;
}
.presence-week-table th:not(.presence-week-table__collaborator),
.presence-week-table td:not(.presence-week-table__collaborator) {
    min-width: 92px;
}
.presence-week-table .half-day-pair,
.presence-half-labels {
    grid-template-columns: 40px 40px;
    min-width: 86px;
}

/* --- Panneau Jalon : compacté (moins de scroll) et remonté sous la barre --- */
.milestone-inspector {
    top: 70px;
    max-height: calc(100vh - 84px);
}
.milestone-inspector-form {
    gap: 6px;
    padding: 10px 12px;
}
.milestone-inspector-form label,
.milestone-inspector__participants,
.milestone-inspector__conditional {
    gap: 3px;
}
.milestone-inspector-form input,
.milestone-inspector-form select,
.milestone-inspector-form textarea {
    min-height: 30px;
    padding: 5px 8px;
}
.milestone-inspector__pair {
    gap: 6px;
}
.milestone-inspector__conditional,
.milestone-inspector__participants {
    padding: 7px;
}
.milestone-inspector__participants > div {
    max-height: 92px;
}

/* --- Barre secondaire (Jalons) : pleine largeur + collée au nav, comme le Planning --- */
.project-milestones-page > .page-context-bar {
    margin: -48px calc(-1 * clamp(16px, 3vw, 32px)) 14px;
}

/* Bulle d'initiales unifiée dans le Planning (prime sur le style bespoke de la grille) */
.project-team-inline-member > span.c-avatar,
.project-team-resource > span.c-avatar {
    background: var(--pole-ux-bg);
    border: 0;
    border-radius: 7px;
    width: 26px;
    height: 26px;
    min-width: 26px;
    color: var(--pole-ux-ink);
    font-size: .66rem;
    font-weight: 700;
    flex: none;
}
.project-team-inline-member > span.c-avatar {
    grid-row: span 2;
}

/* --- Décision explicite §11 (dépassement d'une borne fixe) --- */
.sensi-decision-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(27, 25, 48, 0.42);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    padding: 20px;
}
.sensi-decision {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 54px -18px rgba(27, 25, 48, 0.5);
    padding: 22px 24px;
    max-width: 420px;
    width: 100%;
}
.sensi-decision strong {
    display: block;
    font-size: 1rem;
    color: var(--sensipode-blue);
    margin-bottom: 8px;
}
.sensi-decision p {
    margin: 0 0 16px;
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.4;
}
.sensi-decision__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sensi-decision__actions button {
    font: inherit;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 10px 14px;
    border-radius: 9px;
    border: 1px solid var(--sensipode-blue);
    background: var(--sensipode-blue);
    color: #fff;
    cursor: pointer;
    text-align: left;
}
.sensi-decision__actions button:hover {
    filter: brightness(1.12);
}
.sensi-decision__actions .is-cancel {
    background: transparent;
    color: var(--ink-soft);
    border-color: var(--line);
}

.project-milestone-side-form select,
.milestone-editor select,
.milestone-bulk-bar select,
.milestone-inspector-form select,
.project-export-panel select,
.form-panel select {
    background-color: #fff;
    border-color: #d9cbe3;
    padding-right: 30px;
}

/* --- Admin projets : édition compacte des données importées --- */
.admin-projects-page {
    max-width: 1680px;
    padding-top: 20px;
}

.admin-projects-layout {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr);
}

/* Barre de contexte Admin : réutilise le sélecteur partagé de Planning projet. */
.admin-projects-context-bar{
    border-radius: 10px;
    margin-bottom: 16px;
}

.admin-projects-editor {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 14px 32px rgba(39, 36, 69, 0.06);
    min-width: 0;
    overflow: hidden;
}

.admin-projects-editor__head {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 14px 16px;
}

.admin-projects-readonly-badge {
    align-items: center;
    background: #f7f3f8;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-soft);
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    min-height: 30px;
    padding: 5px 10px;
}

.admin-projects-editor h2 {
    font-size: 20px;
    line-height: 1.15;
    margin: 0;
}

.admin-projects-editor__head p {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    margin: 0 0 4px;
    text-transform: uppercase;
}

.admin-projects-editor form {
    display: grid;
}

.admin-projects-edit-scope {
    border: 0;
    display: grid;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.admin-projects-edit-scope.is-readonly input:not([type="hidden"]),
.admin-projects-edit-scope.is-readonly select,
.admin-projects-edit-scope.is-readonly textarea {
    background: #f8f6f9;
    border-color: #e5ddea;
    color: var(--ink-soft);
    cursor: default;
}

.admin-projects-editor__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.admin-projects-section {
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 10px;
    padding: 14px 16px;
}

.admin-projects-section:last-child {
    border-bottom: 0;
}

.admin-projects-section h3 {
    font-size: 13px;
    letter-spacing: 0;
    margin: 0;
    text-transform: uppercase;
}

/* Récap de charge (Vendu / Réserve / Affecté / Non affecté) en tête du Cadrage. */
.admin-projects-charge-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 4px;
}
.admin-projects-charge-summary > div {
    background: #f7f3f8;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 2px;
    flex: 1 1 120px;
    min-width: 110px;
    padding: 8px 12px;
}
.admin-projects-charge-summary span {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.admin-projects-charge-summary strong {
    color: var(--sensipode-blue);
    font-size: 15px;
    font-weight: 800;
}
.admin-projects-charge-summary__reserve {
    border-color: #cdbfe0 !important;
    background: #f3ecf9 !important;
}
.admin-projects-charge-summary__reserve input {
    font-size: 14px;
    font-weight: 800;
    max-width: 90px;
    padding: 2px 6px;
}
.admin-projects-charge-summary .is-over strong {
    color: var(--sensipode-pink, #d51f6b);
}
/* Compteur EXTERNE (co-traitance) : informatif, visuellement distinct des internes. */
.admin-projects-charge-summary__external {
    border-color: #cfe0e6 !important;
    background: #eef5f7 !important;
}
.admin-projects-charge-summary__external strong {
    color: #1e7d90;
}
/* Marqueur EXT sur les colonnes externes de la matrice. */
.admin-projects-ext {
    background: #1e9d8b;
    border-radius: 999px;
    color: #fff;
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin-left: 3px;
    padding: 1px 4px;
    vertical-align: middle;
}

/* Reste à affecter par tâche (vendu − affecté), affiché en direct sous la charge. */
.admin-projects-task-remaining {
    color: var(--ink-soft);
    display: block;
    font-size: 10px;
    font-weight: 700;
    margin-top: 2px;
}
.admin-projects-task-remaining.is-over {
    color: var(--sensipode-pink, #d51f6b);
}

/* Bouton Annuler (undo charge) : le form ne doit pas casser l'alignement de la barre. */
.admin-projects-undo-form {
    display: contents;
}

/* Enveloppe vendue de la phase, répartie vers les tâches (granularité §4). */
/* En-tête de phase marqué : barre d'accent + code en pastille, avec l'enveloppe
   vendu dans la continuité du titre (plus de bloc séparé en dessous). */
.admin-projects-charge-list summary.admin-projects-phase-head {
    align-items: center;
    background: #f2edf6;
    border-left: 4px solid var(--sensipode-blue);
    display: flex;
    gap: 12px;
    padding: 11px 12px;
}

.admin-projects-phase-head__title {
    align-items: center;
    color: var(--sensipode-blue);
    display: flex;
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 800;
    gap: 8px;
    min-width: 0;
}

.admin-projects-phase-head__code {
    background: white;
    border: 1px solid #d9cbe3;
    border-radius: 5px;
    color: var(--sensipode-blue);
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 2px 7px;
}

.admin-projects-phase-head__vendu {
    align-items: center;
    background: white;
    border: 1px solid #d9cbe3;
    border-radius: 7px;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 6px;
    padding: 4px 8px;
}

.admin-projects-phase-head__label {
    color: #8a7f99;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-projects-phase-head__vendu strong {
    color: var(--sensipode-blue);
    font-variant-numeric: tabular-nums;
}

.admin-projects-phase-head__input {
    font-variant-numeric: tabular-nums;
    max-width: 74px;
    text-align: right;
}

.admin-projects-phase-head__vendu .admin-projects-task-remaining {
    margin-top: 0;
}

/* Ajout / suppression de tâches opérationnelles par le CP (chantier CP). */
.admin-projects-remove-task {
    background: none;
    border: 0;
    color: var(--ink-soft);
    cursor: pointer;
    padding: 0 2px;
    vertical-align: middle;
}
.admin-projects-remove-task:hover,
.admin-projects-remove-task:focus-visible {
    color: var(--sensipode-pink, #d51f6b);
}
.admin-projects-remove-task .material-symbols-outlined {
    font-size: 16px;
}
.admin-projects-add-task input[type="text"] {
    width: 100%;
}
.admin-projects-add-task .c-btn {
    padding-inline: 8px;
}

/* Tâche sur-affectée (Σ affectations > vendu) signalée en direct pendant la saisie. */
.admin-projects-charge-matrix input.is-over-affected {
    background: #fbe9ef;
    border-color: var(--sensipode-pink, #d51f6b) !important;
    color: var(--sensipode-pink, #d51f6b);
}

.admin-projects-section-title {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.admin-projects-risk-score {
    background: #f7f3f8;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
}

.admin-projects-form-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
}

.admin-projects-form-grid--dense {
    grid-template-columns: repeat(4, minmax(140px, 1fr));
}

.admin-projects-form-grid__wide {
    grid-column: span 2;
}

.admin-projects-section label,
.admin-projects-readonly {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.admin-projects-section label span,
.admin-projects-readonly span {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.admin-projects-section input,
.admin-projects-section select,
.admin-projects-section textarea {
    background-color: #fff;
    border: 1px solid #d9cbe3;
    border-radius: 8px;
    color: var(--sensipode-blue);
    font-size: 13px;
    font-weight: 600;
    min-height: 36px;
    padding: 8px 10px;
    width: 100%;
}

.admin-projects-section input:disabled {
    background: #f7f3f8;
    color: var(--ink-soft);
    opacity: 1;
}

.admin-projects-readonly {
    background: #f7f3f8;
    border: 1px solid var(--line);
    border-radius: 8px;
    justify-content: center;
    min-height: 58px;
    padding: 8px 10px;
}

.admin-projects-readonly strong {
    font-size: 15px;
}

.admin-projects-team {
    border: 1px solid var(--line);
    border-radius: 9px;
    overflow: hidden;
}

.admin-projects-team__head,
.admin-projects-team__row {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(220px, 1fr) minmax(150px, 200px) 130px 90px 90px;
    padding: 8px 10px;
}

.admin-projects-team__head {
    background: #fbf8fc;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.admin-projects-team__row {
    border-top: 1px solid var(--line);
}

.admin-projects-team__row small {
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 700;
}

.admin-projects-hour-with-day {
    align-items: center;
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(70px, 1fr) auto;
}

.admin-projects-hour-with-day small {
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.admin-projects-risk-grid,
.admin-projects-team-actions,
.admin-projects-charge-list {
    display: grid;
    gap: 8px;
}

.admin-projects-change-reason {
    background: #fffaf1;
    border: 1px solid #eed8a5;
    border-radius: 8px;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(180px, 260px) minmax(220px, 1fr);
    padding: 10px;
}

.admin-projects-change-reason input,
.admin-projects-change-reason select {
    background: #fff;
}

.admin-projects-justification-dialog {
    width: min(460px, calc(100vw - 32px));
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0;
    color: var(--ink);
    box-shadow: 0 24px 80px rgba(20, 16, 48, 0.22);
}

.admin-projects-justification-dialog::backdrop {
    background: rgba(20, 16, 48, 0.28);
}

.admin-projects-justification-dialog__head,
.admin-projects-justification-dialog label,
.admin-projects-justification-dialog__actions {
    padding: 16px;
}

.admin-projects-justification-dialog__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--border);
}

.admin-projects-justification-dialog__head h3 {
    margin: 0 0 4px;
    font-size: 16px;
}

.admin-projects-justification-dialog__head p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.admin-projects-justification-dialog__head button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
}

.admin-projects-justification-dialog label {
    display: grid;
    gap: 6px;
}

.admin-projects-justification-dialog select,
.admin-projects-justification-dialog textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 10px;
    font: inherit;
}

.admin-projects-justification-dialog__error {
    margin: 0 16px;
    color: var(--sensipode-pink);
    font-size: 13px;
}

.admin-projects-justification-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--border);
}

.admin-projects-risk-row {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(220px, 1fr) minmax(180px, 280px) 34px;
    padding: 10px;
}

.admin-projects-risk-row span {
    display: grid;
    gap: 2px;
}

.admin-projects-risk-row strong {
    color: var(--sensipode-blue);
    font-size: 13px;
}

.admin-projects-risk-row small {
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.35;
}

.admin-projects-risk-row output {
    background: #ece5ef;
    border-radius: 8px;
    color: var(--sensipode-blue);
    font-size: 13px;
    font-weight: 800;
    padding: 7px 0;
    text-align: center;
}

.admin-projects-team-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-projects-team-actions > div {
    border: 1px solid var(--line);
    border-radius: 9px;
    display: grid;
    gap: 8px;
    padding: 10px;
}

.admin-projects-team-actions h4 {
    font-size: 12px;
    margin: 0;
    text-transform: uppercase;
}

.admin-projects-team-action-row {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(160px, 1fr) minmax(130px, 170px) 100px 80px auto;
}

.admin-projects-team-actions > div:last-child .admin-projects-team-action-row {
    grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto;
}

.admin-projects-charge-list details {
    border: 1px solid var(--line);
    border-radius: 9px;
    overflow: hidden;
}

.admin-projects-charge-list summary,
.admin-projects-charge-step,
.admin-projects-charge-task {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) 90px;
}

.admin-projects-charge-list summary {
    background: #fbf8fc;
    cursor: pointer;
    font-size: 13px;
    padding: 9px 10px;
}

.admin-projects-charge-list summary span,
.admin-projects-charge-step strong,
.admin-projects-charge-task strong {
    color: var(--ink-soft);
    font-size: 12px;
    justify-self: end;
}

.admin-projects-charge-step,
.admin-projects-charge-task {
    border-top: 1px solid var(--line);
    font-size: 12px;
    padding: 4px 10px;
}

.admin-projects-charge-step {
    font-weight: 700;
}

.admin-projects-charge-task {
    color: var(--ink-soft);
    /* Fine ligne d'arborescence + indentation progressive (inspiré du Planning). */
    box-shadow: inset 2px 0 0 var(--line);
    padding-left: 28px;
}

/* Cellules numériques en LECTURE (plus d'inputs hors édition) : chiffres alignés,
   tabulaires ; « – » discret quand il n'y a pas de valeur (vide ≠ 0 explicite). */
.admin-projects-num {
    color: var(--sensipode-blue);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.admin-projects-num.is-empty {
    color: #c3bad0;
    font-weight: 400;
}

/* Reste à répartir : discret par défaut, mis en accent seulement s'il reste
   quelque chose à ventiler (information actionnable). */
.admin-projects-phase-head__vendu .admin-projects-task-remaining.is-active {
    color: var(--sensipode-carrot, #e98300);
    font-weight: 800;
}

/* Livrables : ligne compacte repliable (fin du gros textarea permanent). */
.admin-projects-deliverables {
    border-top: 1px solid var(--line);
}

.admin-projects-deliverables > summary {
    align-items: center;
    color: var(--ink-soft);
    cursor: pointer;
    display: flex;
    font-size: 12px;
    gap: 8px;
    padding: 7px 10px;
}

.admin-projects-deliverables__label {
    color: var(--sensipode-blue);
    font-weight: 700;
}

.admin-projects-deliverables__preview {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-projects-deliverables__due {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

.admin-projects-deliverables > textarea {
    margin: 0 10px 10px;
    width: calc(100% - 20px);
}

/* Éditeur de structure : libellé de ligne + menu ⋮ discret (visible au survol /
   focus / ouvert), barres d'ajout compactes, mini-formulaire de renommage. */
.admin-projects-row-label {
    align-items: center;
    display: flex;
    gap: 6px;
    min-width: 0;
}

.admin-projects-row-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Survol de ligne discret (mode édition), dans l'esprit Planning. */
.admin-projects-charge-matrix__row:hover {
    background: #faf8fc;
}

/* Poignée de réordonnancement (drag) : discrète, visible au survol / focus. */
.admin-projects-drag-handle {
    color: #b9afc9;
    cursor: grab;
    flex: 0 0 auto;
    font-size: 18px;
    opacity: 0;
}

.admin-projects-charge-matrix__row:hover .admin-projects-drag-handle,
.admin-projects-drag-handle:focus-visible {
    opacity: 1;
}

.admin-projects-drag-handle:active {
    cursor: grabbing;
}

.admin-projects-charge-matrix__row.is-reordering {
    opacity: 0.4;
}

.admin-projects-row-menu {
    flex: 0 0 auto;
}

/* Le panneau ⋮ hérite de .context-popover > div { display: grid }, qui écrase le
   masquage natif du <details> fermé : on le remasque explicitement à l'état fermé,
   sinon il reste affiché en permanence (boîtes fantômes) et le ⋮ « ne fait rien ». */
.admin-projects-row-menu:not([open]) > .admin-projects-row-menu__panel {
    display: none;
}

/* Sélecteur renforcé pour battre `.admin-projects-charge-list summary` (en-tête de
   phase) qui, sinon, impose une grille au toggle -> « boîte » fantôme de ~140px. */
.admin-projects-row-menu > .admin-projects-row-menu__toggle {
    align-items: center;
    border-radius: 6px;
    color: var(--ink-soft);
    cursor: pointer;
    display: inline-flex;
    grid-template-columns: none;
    height: 24px;
    justify-content: center;
    list-style: none;
    opacity: 0;
    padding: 0;
    transition: background 0.12s, opacity 0.12s;
    width: 24px;
}

.admin-projects-row-menu > .admin-projects-row-menu__toggle:hover,
.admin-projects-row-menu[open] > .admin-projects-row-menu__toggle {
    background: #ece7f2;
    opacity: 1;
}

.admin-projects-row-menu__toggle::-webkit-details-marker {
    display: none;
}

.admin-projects-charge-matrix__row:hover .admin-projects-row-menu__toggle,
.admin-projects-row-menu[open] .admin-projects-row-menu__toggle,
.admin-projects-row-menu__toggle:focus-visible {
    opacity: 1;
}

.admin-projects-row-menu__toggle .material-symbols-outlined {
    font-size: 18px;
}

.admin-projects-row-menu > .admin-projects-row-menu__panel {
    min-width: 160px;
    padding: 6px;
}

.admin-projects-row-menu__item {
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--sensipode-blue);
    cursor: pointer;
    display: block;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 8px;
    text-align: left;
    width: 100%;
}

.admin-projects-row-menu__item:hover {
    background: #f4f1f7;
}

.admin-projects-row-menu__item--danger {
    color: #c0245f;
}

.admin-projects-add-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 7px 10px 9px 28px;
}

.admin-projects-add-ctl {
    align-items: center;
    display: inline-flex;
    gap: 4px;
}

.admin-projects-add-ctl input,
.admin-projects-add-row input {
    background: transparent;
    border: 1px dashed #d4cbe4;
    border-radius: 7px;
    color: var(--sensipode-blue);
    font-size: 12px;
    min-height: 30px;
    padding: 4px 10px;
    transition: border-color 0.12s, background 0.12s;
    width: 210px;
}

.admin-projects-add-ctl input:focus,
.admin-projects-add-row input:focus {
    background: white;
    border-color: var(--sensipode-blue);
    border-style: solid;
    outline: none;
}

.admin-projects-add-ctl input::placeholder,
.admin-projects-add-row input::placeholder {
    color: #9a8fae;
}

/* Bouton d'ajout : léger (ghost), pas de gros aplat foncé. */
.admin-projects-add-row__btn {
    align-items: center;
    background: white;
    border: 1px solid #d9cbe3;
    border-radius: 7px;
    color: var(--sensipode-blue);
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    min-height: 30px;
    transition: background 0.12s;
    width: 30px;
}

.admin-projects-add-row__btn:hover {
    background: #f2edf6;
}

.admin-projects-add-row__btn .material-symbols-outlined {
    font-size: 18px;
}

.admin-projects-add-row .admin-projects-row-label {
    padding-left: 0;
}

.admin-projects-rename-form[hidden] {
    display: none;
}

.admin-projects-rename-form {
    background: white;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(39, 36, 69, 0.24);
    display: flex;
    flex-direction: column;
    gap: 10px;
    left: 50%;
    padding: 16px;
    position: fixed;
    top: 28%;
    transform: translateX(-50%);
    width: min(360px, 92vw);
    z-index: 200;
}

.admin-projects-rename-form label {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    font-weight: 700;
    gap: 4px;
}

.admin-projects-rename-form input[type="text"] {
    font: inherit;
    font-weight: 400;
    min-height: 34px;
    padding: 6px 10px;
}

.admin-projects-rename-form__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.admin-projects-charge-matrix {
    overflow-x: auto;
}

.admin-projects-charge-matrix__head,
.admin-projects-charge-matrix__row {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(260px, 1.4fr) 44px repeat(var(--admin-team-columns), minmax(64px, 72px)) 116px;
    min-width: max-content;
}

.admin-projects-charge-matrix__head {
    background: #fff;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 800;
    padding: 7px 10px;
    text-transform: uppercase;
}

.admin-projects-charge-matrix__head > span:not(:first-child),
.admin-projects-charge-matrix__row > input,
.admin-projects-charge-matrix__row > strong,
.admin-projects-charge-matrix__row > span:not(:first-child) {
    justify-self: center;
}

.admin-projects-charge-matrix__row strong {
    align-items: center;
    display: grid;
    gap: 3px;
    justify-items: stretch;
}

.admin-projects-charge-matrix__row input {
    min-height: 30px;
    padding: 5px 7px;
    text-align: center;
}

.admin-projects-charge-matrix__row small {
    color: var(--ink-soft);
    font-size: 10px;
    text-align: center;
    white-space: nowrap;
}

.admin-projects-charge-matrix .admin-projects-charge-step,
.admin-projects-charge-matrix .admin-projects-charge-task {
    grid-template-columns: minmax(260px, 1.4fr) 44px repeat(var(--admin-team-columns), minmax(64px, 72px)) 116px;
}

.admin-projects-charge-deliverables {
    background: #fffaf1;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    padding: 9px 10px;
}

.admin-projects-charge-deliverables span {
    display: grid;
    gap: 2px;
}

.admin-projects-charge-deliverables strong {
    color: var(--sensipode-blue);
    font-size: 12px;
}

.admin-projects-charge-deliverables small,
.admin-projects-charge-deliverables p {
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.35;
}

.admin-projects-charge-deliverables textarea {
    min-height: 78px;
}

.admin-projects-charge-deliverables p {
    margin: 0;
}

.project-charge-page {
    display: grid;
    gap: 16px;
    padding: 20px 24px 40px;
}

.project-charge-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.project-charge-head h1 {
    margin: 4px 0;
    color: var(--ink);
    font-size: 22px;
    font-weight: 700;
}

.project-charge-head p,
.project-charge-burn__header p,
.project-charge-section-title p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.project-charge-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    gap: 10px;
}

.project-charge-kpis > div,
.project-charge-kpi-group,
.project-charge-burn,
.project-charge-table,
.project-charge-watch {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.project-charge-kpis > div {
    display: grid;
    gap: 4px;
    padding: 12px;
}

.project-charge-kpis span,
.project-charge-kpi-group small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.project-charge-kpis strong,
.project-charge-kpi-group strong {
    color: var(--ink);
    font-size: 20px;
    font-weight: 700;
}

.project-charge-kpis small.is-risk {
    color: var(--sensipode-pink);
}

.project-charge-kpis small.is-ok {
    color: var(--pole-vuln-ink);
}

.project-charge-kpis--split {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
}

.project-charge-kpi-group {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 12px;
    padding: 12px;
}

.project-charge-kpi-group h2 {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
}

.project-charge-kpi-group span {
    display: grid;
    gap: 4px;
}

.project-charge-burn {
    padding: 14px;
}

.project-charge-burn__header,
.project-charge-section-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.project-charge-burn__header h2,
.project-charge-section-title h2,
.project-charge-watch h2 {
    margin: 0;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
}

.project-charge-burn__header > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.project-charge-burn__chart {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 10px 0 4px;
}

.project-charge-burn__budget,
.project-charge-burn__actual,
.project-charge-burn__projection {
    position: relative;
    height: 26px;
    border-radius: 999px;
    background: var(--surface-muted);
    overflow: hidden;
}

.project-charge-burn__budget::before,
.project-charge-burn__actual::before,
.project-charge-burn__projection::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
}

.project-charge-burn__budget::before {
    width: 100%;
    background: var(--ink);
}

.project-charge-burn__actual::before {
    width: var(--actual-ratio);
    background: var(--pole-vuln-bg);
}

.project-charge-burn__projection::before {
    width: min(var(--projection-ratio), 100%);
    background: var(--pole-inno-bg);
}

.project-charge-burn__budget span,
.project-charge-burn__actual span,
.project-charge-burn__projection span {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 10px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
}

.project-charge-burn__budget span {
    color: #fff;
}

.project-charge-tabs {
    display: inline-flex;
    width: fit-content;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.project-charge-tabs a {
    padding: 8px 14px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.project-charge-tabs a.is-active {
    background: #fbe4ec;
}

.project-charge-row,
.project-charge-resource-row {
    display: grid;
    gap: 10px;
    align-items: center;
    min-height: 30px;
    padding: 7px 10px;
    border-top: 1px solid var(--line);
    color: var(--ink);
    font-size: 13px;
}

.project-charge-row--full {
    grid-template-columns: minmax(260px, 1.6fr) repeat(7, minmax(90px, 0.7fr));
}

.project-charge-row--personal {
    grid-template-columns: minmax(300px, 1.8fr) repeat(5, minmax(100px, 0.7fr));
}

.project-charge-resource-row {
    grid-template-columns: minmax(220px, 1.4fr) repeat(5, minmax(90px, 0.7fr));
}

.project-charge-row--head,
.project-charge-resource-row--head {
    border-top: 0;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.project-charge-row--phase {
    background: #faf8fb;
}

.project-charge-row--phase strong {
    font-weight: 800;
}

.project-charge-row--step strong {
    padding-left: 18px;
    font-weight: 700;
}

.project-charge-row--task strong {
    padding-left: 36px;
    font-weight: 500;
}

.project-charge-watch {
    padding: 14px;
}

.project-charge-watch ul {
    display: grid;
    gap: 8px;
    margin: 10px 0 0;
    padding-left: 18px;
    color: var(--ink);
    font-size: 13px;
}

.project-charge-watch p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.admin-project-access-page .admin-projects-section {
    overflow: visible;
}

.admin-project-access-help {
    margin: -4px 0 16px;
    color: var(--muted);
    font-size: 13px;
}

.admin-project-access-table {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.admin-project-access-inherited {
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
}

.admin-project-access-table__head,
.admin-project-access-table__row,
.admin-project-access-inherited__row {
    display: grid;
    grid-template-columns: minmax(240px, 1.3fr) minmax(180px, 0.8fr) minmax(110px, 0.5fr) minmax(260px, 1.4fr);
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
}

.admin-project-access-inherited .admin-project-access-table__head,
.admin-project-access-inherited__row {
    grid-template-columns: minmax(180px, 0.8fr) minmax(160px, 0.6fr) minmax(360px, 2fr);
}

.admin-project-access-table__head {
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.admin-project-access-table__row {
    border-top: 1px solid var(--line);
}

.admin-project-access-inherited__row {
    border-top: 1px solid var(--line);
}

.admin-project-access-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.admin-project-access-chip-list span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 0 8px;
}

.admin-project-access-table__row select,
.admin-project-access-add select {
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    padding: 0 12px;
}

.admin-project-access-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-weight: 700;
}

.admin-project-access-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}

.admin-project-access-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.admin-project-access-add-grid {
    display: grid;
    gap: 12px;
}

.admin-project-access-add {
    display: grid;
    grid-template-columns: minmax(260px, 1.4fr) minmax(180px, 0.8fr) auto;
    gap: 12px;
    align-items: end;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
}

.admin-account-roles-form {
    display: grid;
    gap: 8px;
}

.admin-account-role-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.admin-account-role-options label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    padding: 0 8px;
}

.admin-account-role-options input {
    width: 14px;
    height: 14px;
    accent-color: var(--accent);
}

@media (max-width: 980px) {
    .admin-projects-form-grid,
    .admin-projects-form-grid--dense,
    .admin-projects-team__head,
    .admin-projects-team__row,
    .admin-projects-risk-row,
    .admin-project-access-table__head,
    .admin-project-access-table__row,
    .admin-project-access-inherited .admin-project-access-table__head,
    .admin-project-access-inherited__row,
    .admin-project-access-add,
    .admin-projects-team-actions,
    .admin-projects-team-action-row,
    .admin-projects-team-actions > div:last-child .admin-projects-team-action-row {
        grid-template-columns: 1fr;
    }

    .admin-projects-form-grid__wide {
        grid-column: auto;
    }
}

/* Alerte référentiel (type vide / à compléter). */
.reference-alert {
    color: #b0474d;
    font-weight: 700;
}

/* Périodes Cadrage : même date-entry que Planning, dense dans la ligne. */
.cadrage-period { display: inline-flex; align-items: center; gap: .2rem; margin-left: auto; font-size: .75rem; white-space: nowrap; font-weight: 400; position: relative; }
.cadrage-period .date-entry { width: 7.2rem; min-width: 0; }
.cadrage-period .date-mask { width: 100%; min-width: 0; font-size: .72rem; padding: .3rem 1.4rem .3rem .3rem; }
.cadrage-period .c-btn { padding: .2rem; }
.cadrage-period-status { position: absolute; top: 100%; right: 0; z-index: 5; font-size: .7rem; background: var(--surface-strong); color: var(--sensipode-blue); white-space: normal; min-width: 12rem; }
.cadrage-period-status:empty { display: none; }
.admin-projects-row-label:has(.cadrage-period) { flex-wrap: wrap; }
.cadrage-create-dates { display: flex; align-items: center; gap: .5rem; margin: .75rem 0; }
[data-create-planning-dialog] { max-width: 30rem; }
[data-create-planning-dialog] label { display: block; margin: .5rem 0; }

/* Palette Ma charge : une colonne, phases partagées et lignes compactes. */
.my-workload-backlog-group { gap: 5px; padding: 8px 10px; min-width: 0; }
.my-workload-backlog__head { padding: 10px; grid-template-columns: minmax(0, 1fr) auto; }
.my-workload-backlog__head strong { font-size: 11px; grid-column: 1; }
.my-workload-backlog-group__head { gap: 5px; }
.my-workload-backlog-group__hours { font-size: 10px; }
.my-workload-backlog-phase { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.my-workload-backlog-phase__title { font-size: 11px; color: var(--ink-soft); font-weight: 700; padding: 5px 0 2px 8px; }
.my-workload-backlog-task { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 5px; padding: 5px 3px 5px 12px; border: 0; border-radius: 3px; background: transparent; font-size: 11px; }
.my-workload-backlog-task strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600; }
.my-workload-backlog-task em { font-size: 11px; }
.my-workload-backlog-task:hover { background: var(--surface); }
.my-workload-backlog-task:focus-visible { outline: 2px solid var(--sensipode-blue); outline-offset: -2px; }
.my-workload-backlog-task--future strong { color: var(--ink-soft); opacity: 1; }
.my-workload-backlog [data-backlog-future][hidden] { display: none; }
.my-workload-backlog .my-workload-week-badge { font-size: 10px; padding: 2px 4px; }

/* =========================================================================
   Module Commercial (Lot 1) — Cockpit, Affaires, Objectifs, TODO
   ========================================================================= */
.commercial-page { display: flex; flex-direction: column; gap: 18px; padding-bottom: 48px; }
.commercial-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.commercial-title { font-size: 1.4rem; font-weight: 700; color: var(--sensipode-blue); margin: 0 0 8px; }
.commercial-back { font-size: .82rem; color: var(--ink-soft); text-decoration: none; }
.commercial-back:hover { color: var(--sensipode-pink); }
.commercial-muted { color: var(--ink-soft); font-size: .85rem; }
.commercial-note { color: var(--ink-soft); font-size: .82rem; margin: -6px 0 2px; }
.commercial-empty { color: var(--ink-soft); font-size: .9rem; padding: 14px 2px; }

.commercial-context-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.commercial-field { display: flex; flex-direction: column; gap: 3px; font-size: .72rem; color: var(--ink-soft); }
.commercial-field select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-strong); font-size: .85rem; }

.commercial-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface-strong); color: var(--sensipode-blue); font-size: .84rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.commercial-btn:hover { border-color: var(--sensipode-blue); }
.commercial-btn--primary { background: var(--sensipode-pink); border-color: var(--sensipode-pink); color: #fff; }
.commercial-btn--primary:hover { background: #ba1247; border-color: #ba1247; }

/* Funnel (Cockpit + Objectifs) */
.commercial-funnel-wrap { overflow-x: auto; }
.commercial-funnel { width: 100%; border-collapse: collapse; font-size: .82rem; font-variant-numeric: tabular-nums; }
.commercial-funnel th, .commercial-funnel td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.commercial-funnel thead th { background: var(--sensipode-blue); color: #fff; font-weight: 600; text-align: right; }
.commercial-funnel thead th.commercial-funnel__head { text-align: left; }
.commercial-funnel tbody th[scope="row"] { text-align: left; color: var(--ink-soft); font-weight: 600; }
.commercial-funnel__total { font-weight: 700; background: #faf8fc; }
.commercial-funnel__row--objectif th, .commercial-funnel__row--objectif td { color: var(--sensipode-blue); }
.commercial-funnel__row--signe td { color: var(--color-positive); }
.commercial-funnel__row--reste { border-top: 2px solid var(--sensipode-blue); }
.commercial-funnel__row--reste th, .commercial-funnel__row--reste td { font-weight: 700; }

.commercial-pole-block { border: 1px solid var(--line); border-radius: 10px; padding: 4px 12px; background: var(--surface-strong); }
.commercial-pole-block > summary { cursor: pointer; font-weight: 600; color: var(--sensipode-blue); padding: 8px 2px; }

/* Tables affaires */
.commercial-table { width: 100%; border-collapse: collapse; font-size: .86rem; background: var(--surface-strong); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.commercial-table th, .commercial-table td { padding: 9px 11px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
/* Colonnes texte : on borne la largeur et on garde une ligne propre (fin des lignes qui « sautent »). */
.commercial-table td:first-child, .commercial-table td:nth-child(2) { max-width: 220px; }
.commercial-table .commercial-poles-cell { align-items: center; }
.commercial-table thead th { background: #faf8fc; color: var(--ink-soft); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .02em; }
.commercial-table tbody tr:last-child td { border-bottom: 0; }
.commercial-row:hover { background: var(--surface); }
.commercial-num { text-align: right; font-variant-numeric: tabular-nums; }
.commercial-table a { color: var(--sensipode-blue); font-weight: 600; text-decoration: none; }
.commercial-table a:hover { color: var(--sensipode-pink); }
.commercial-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--pole-inno-bg); color: var(--pole-inno-ink); font-size: .68rem; font-weight: 600; }

.commercial-deals-section { display: flex; flex-direction: column; gap: 10px; }
.commercial-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.commercial-section-head h2 { font-size: 1.05rem; margin: 0; color: var(--sensipode-blue); }

/* Fiche affaire */
.commercial-pill-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.commercial-deal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.commercial-card { background: var(--surface-strong); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.commercial-card h2 { font-size: 1rem; margin: 0 0 12px; color: var(--sensipode-blue); }
.commercial-card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.commercial-card-head h2 { margin: 0; }
.commercial-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: .88rem; }
.commercial-dl dt { color: var(--ink-soft); }
.commercial-dl dd { margin: 0; color: var(--sensipode-blue); }
.commercial-notes { margin: 12px 0 0; font-size: .86rem; color: var(--ink-soft); }

.commercial-forecast-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.commercial-forecast-table th, .commercial-forecast-table td { padding: 5px 8px; border-bottom: 1px solid var(--line); }
.commercial-forecast-table th[scope="row"] { text-align: left; color: var(--ink-soft); font-weight: 500; }
.commercial-forecast-table input { width: 120px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; text-align: right; font-variant-numeric: tabular-nums; }
.commercial-forecast-actions { display: flex; gap: 8px; margin-top: 12px; }

/* Formulaire affaire */
.commercial-form-page { max-width: 900px; }
.commercial-form { background: var(--surface-strong); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.commercial-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 18px; }
.commercial-form-field { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--ink-soft); }
.commercial-form-field--wide { grid-column: 1 / -1; }
.commercial-form-field input, .commercial-form-field select, .commercial-form-field textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: .9rem; background: #fff; color: var(--sensipode-blue); }
.commercial-form-check { flex-direction: row; align-items: center; gap: 8px; }
.commercial-form-check input { width: auto; }
.commercial-form-actions { display: flex; justify-content: flex-end; margin-top: 16px; }

/* Objectifs */
.commercial-objectives-scroll { overflow-x: auto; }
.commercial-obj-input { width: 66px; padding: 4px 5px; border: 1px solid var(--line); border-radius: 6px; text-align: right; font-size: .78rem; font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
    .commercial-deal-grid { grid-template-columns: 1fr; }
    .commercial-form-grid { grid-template-columns: 1fr; }
}

/* ------- TODO transverse (responsive-first) ------- */
.todo-page { display: flex; flex-direction: column; gap: 18px; max-width: 1140px; padding-bottom: 60px; }
.todo-quickadd { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--surface-strong); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.todo-quickadd--inline { margin-bottom: 12px; }
.todo-quickadd__title { flex: 1 1 220px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: .95rem; }
.todo-quickadd__date { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.todo-quickadd__prio { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; color: var(--ink-soft); }
.todo-section { display: flex; flex-direction: column; gap: 8px; }
.todo-section__title { font-size: .95rem; color: var(--sensipode-blue); margin: 4px 0; }
.todo-section__title span { color: var(--ink-soft); font-weight: 400; }
.todo-section--overdue .todo-section__title { color: var(--color-negative); }
.todo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.todo-card { display: flex; align-items: center; gap: 12px; justify-content: space-between; background: var(--surface-strong); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.todo-card--high { border-left-color: var(--sensipode-pink); }
.todo-card--done { opacity: .6; }
.todo-card--done .todo-card__title { text-decoration: line-through; }
.todo-card__body { min-width: 0; }
.todo-card__title { margin: 0; font-size: .95rem; color: var(--sensipode-blue); }
.todo-card__note { margin: 3px 0 0; font-size: .82rem; color: var(--ink-soft); }
.todo-card__meta { margin: 5px 0 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .78rem; }
.todo-due { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.todo-due--over { color: var(--color-negative); font-weight: 700; }
.todo-flag { color: var(--sensipode-pink); font-weight: 600; }
.todo-context { color: var(--pole-inno-ink); text-decoration: none; }
.todo-context:hover { text-decoration: underline; }
.todo-card__actions { display: flex; gap: 6px; flex-shrink: 0; }
.todo-card__actions form { margin: 0; }
.todo-act { width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface-strong); color: var(--sensipode-blue); font-size: 1.1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.todo-act:hover { border-color: var(--sensipode-blue); }
.todo-act--done:hover { background: var(--c-ok-bg); border-color: var(--c-ok); color: var(--c-ok); }
@media (max-width: 560px) {
    .todo-quickadd__title { flex-basis: 100%; }
    .todo-act { width: 44px; height: 44px; }
}

/* =========================================================================
   Module Commercial — refonte design (Opportunités / Devis) — Lot 1b
   ========================================================================= */
/* Chip / pastille colorée depuis un référentiel */
.c-pill { display:inline-flex; align-items:center; font-size:12px; font-weight:700; padding:2px 9px;
  border-radius:999px; line-height:1.5; white-space:nowrap; letter-spacing:.01em; }

/* Menu de niveau 2 (façon Planning projet) : barre collante sous la topbar */
.commercial-subbar { position:sticky; top:var(--topbar-height); z-index:var(--z-context-bar);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--surface-strong); border-bottom:1px solid var(--line);
  margin:-16px -16px 4px; padding:8px 16px; }
.commercial-subbar__tabs { display:flex; gap:2px; }
.commercial-subbar__tabs a { padding:6px 13px; border-radius:8px; font-size:.9rem; font-weight:600;
  color:var(--ink-soft); text-decoration:none; }
.commercial-subbar__tabs a:hover { background:var(--surface); color:var(--sensipode-blue); }
.commercial-subbar__tabs a.is-active { background:var(--sensipode-blue); color:#fff; }
.commercial-subbar__spacer { flex:1 1 auto; }
.commercial-subbar__filters { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.commercial-subbar select, .commercial-filters select { padding:6px 28px 6px 9px; border:1px solid var(--line);
  border-radius:8px; background:var(--surface-strong); font-size:.85rem; color:var(--sensipode-blue);
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23655d80' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; }

.commercial-seg { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.commercial-seg button { border:0; background:var(--surface-strong); padding:6px 11px; font-size:.82rem;
  font-weight:600; color:var(--ink-soft); cursor:pointer; }
.commercial-seg button+button { border-left:1px solid var(--line); }
.commercial-seg button.is-active { background:var(--sensipode-blue); color:#fff; }

/* Bandeau de page (masthead) */
.commercial-mast { padding:6px 0 2px; }
.commercial-kicker { font-size:12px; letter-spacing:.13em; text-transform:uppercase; font-weight:700;
  color:var(--sensipode-pink); display:flex; align-items:center; gap:9px; }
.commercial-kicker::before { content:""; width:22px; height:2px; background:var(--sensipode-pink); border-radius:2px; }
.commercial-h1 { font-size:clamp(24px,3.5vw,32px); font-weight:800; letter-spacing:-.02em; margin:10px 0 4px;
  color:var(--sensipode-blue); text-wrap:balance; }
.commercial-sub { color:var(--ink-soft); margin:0; max-width:60ch; }
.commercial-h3 { font-size:.95rem; font-weight:700; color:var(--sensipode-blue); margin:18px 0 6px; }

/* Cartes KPI */
.commercial-kpis { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:8px 0 2px; }
.commercial-kpi { border:1px solid var(--line); border-left:3px solid var(--ink-soft); border-radius:11px;
  background:var(--surface-strong); padding:12px 14px; box-shadow:0 1px 2px rgba(39,36,69,.05); }
.commercial-kpi__label { display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-soft); font-weight:700; }
.commercial-kpi__value { display:block; font-size:1.3rem; font-weight:800; color:var(--sensipode-blue);
  font-variant-numeric:tabular-nums; margin-top:3px; }
.commercial-kpi--ok { border-left-color:var(--color-positive); }
.commercial-kpi--risk { border-left-color:var(--color-negative); }
.commercial-kpi--blue { border-left-color:var(--pole-inno); }
.commercial-kpi--accent { border-left-color:var(--sensipode-pink); }
@media (max-width:900px){ .commercial-kpis { grid-template-columns:repeat(2,1fr); } }

/* Encart note (callout) — override de l'ancienne .commercial-note */
.commercial-note { border:1px solid var(--line); border-left:3px solid var(--sensipode-pink);
  background:var(--surface-strong); border-radius:0 10px 10px 0; padding:11px 15px; margin:4px 0;
  font-size:.86rem; color:var(--ink-soft); box-shadow:0 1px 2px rgba(39,36,69,.05); }
.commercial-note b { color:var(--sensipode-blue); }
.commercial-note a { color:var(--sensipode-pink); }

/* Table en conteneur arrondi + ombre */
.commercial-tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:12px;
  background:var(--surface-strong); box-shadow:0 1px 2px rgba(39,36,69,.05),0 8px 24px rgba(39,36,69,.05); }
.commercial-tablewrap .commercial-table, .commercial-tablewrap .commercial-funnel { border:0; box-shadow:none; }

/* Filtres */
.commercial-filters { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:2px 0; }
.commercial-search { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line);
  border-radius:8px; padding:5px 10px; background:var(--surface-strong); }
.commercial-search input { border:0; outline:0; background:transparent; font-size:.88rem; min-width:180px; }
.commercial-search .material-symbols-outlined { font-size:18px; color:var(--ink-soft); }

/* Champs de formulaire (ff) */
.commercial-form-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px 18px; }
.ff { display:flex; flex-direction:column; gap:4px; font-size:.76rem; color:var(--ink-soft); }
.ff--wide { grid-column:1 / -1; }
.ff input, .ff select, .ff textarea { padding:8px 10px; border:1px solid var(--line); border-radius:8px;
  font-size:.9rem; background:#fff; color:var(--sensipode-blue); width:100%; min-width:0; box-sizing:border-box; }
.ff--check { flex-direction:row; align-items:center; gap:8px; }
.ff--check input { width:auto; }
.commercial-mono-input { font-family:var(--f-mono,ui-monospace,monospace); }

/* Divers */
.commercial-linklist { list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:5px; font-size:.88rem; }
.commercial-linklist a { color:var(--sensipode-blue); text-decoration:none; font-weight:600; }
.commercial-linklist a:hover { color:var(--sensipode-pink); }
.commercial-mono { font-family:ui-monospace,"SFMono-Regular",Menlo,monospace; font-size:.85em;
  background:#f1ecf7; color:#5a4d78; padding:1px 6px; border-radius:5px; }
.commercial-version-add { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px;
  padding-top:12px; border-top:1px solid var(--line); }
.commercial-version-add input { padding:6px 8px; border:1px solid var(--line); border-radius:7px; font-size:.85rem; max-width:150px; }
.num { text-align:right; font-variant-numeric:tabular-nums; }

/* Menu de niveau 2 en pleine largeur (full-bleed viewport).
   Concerne les pages en .page-shell (bornées à 1600) ; Ma charge et Planning sont
   déjà pleine largeur (pas de shell). Aligne le contenu sur la gouttière du shell. */
.my-projects-page .page-context-bar,
.presence-page .page-context-bar,
.admin-projects-page .page-context-bar,
.admin-project-access-page .page-context-bar,
.commercial-page .page-context-bar {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: max(16px, calc(50vw - 50%));
    padding-right: max(16px, calc(50vw - 50%));
    border-radius: 0;
    max-width: none;
}
/* Commercial : barre de niveau 2 collée au menu bleu (même composant que Planning). */
.commercial-page > .page-context-bar { margin-top: -32px; margin-bottom: 14px; }
.commercial-context-bar { flex-wrap: wrap; gap: 10px; }
.commercial-ctx-spacer { flex: 1 1 auto; }
/* Groupe de filtres : reste d'un bloc (nowrap) et passe à la ligne entier quand la barre
   déborde, plutôt que d'orpheliner « Filtrer ». Le reste de la barre (.commercial-context-bar)
   wrappe, lui, entre les grands groupes. */
.commercial-ctx-filters { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; flex: 0 1 auto; min-width: 0; }
/* Menus de filtre = composant Projet (.sensi-select-menu), resserrés à 34px pour la barre. */
.commercial-ctx-filters .context-select-field { flex: 0 0 auto; }
.commercial-ctx-filters .sensi-select-menu { min-width: 148px; }
.commercial-ctx-filters .sensi-select-menu summary { min-height: 34px; padding: 6px 10px; font-size: 12px; }
/* Champ de recherche (réutilise .context-search-field de Projet) resserré pour la barre. */
.commercial-ctx-filters .context-search-field { flex: 0 1 240px; min-width: 150px; }
.commercial-ctx-filters .context-search-field input { min-height: 34px; }
.commercial-ctx-filters .commercial-btn { min-height: 34px; flex: 0 0 auto; }
/* Action principale (+ Opportunité / + Offre / + Ajouter / + Nouvelle brique) collée à droite,
   même après un retour à la ligne (margin auto plutôt qu'un spacer qui l'orpheline à gauche). */
.commercial-ctx-action { margin-left: auto; }
/* Ajout rapide (ex. « + Ajouter » client) à droite de la barre blanche. */
.commercial-ctx-add { display: inline-flex; align-items: center; gap: 6px; }
.commercial-ctx-add input { padding: 6px 10px; border: 1px solid #d9cbe3; border-radius: 7px;
    background: #fff; font-size: 12px; font-weight: 600; color: var(--sensipode-blue);
    min-height: 34px; min-width: 150px; }
.commercial-ctx-add .commercial-btn { min-height: 34px; }
.brick-intro { margin: 0 0 12px; }

/* Chaîne commerciale (liste des devis) : Offre → Chiffrage → Projet. Étape présente =
   pastille cliquable ; étape absente = pastille grisée ; maillon aval manquant (projet) =
   bouton « + Projet » pour le créer sans quitter la liste. */
.devis-chain { display: inline-flex; align-items: center; gap: 5px; flex-wrap: nowrap; white-space: nowrap; }
.devis-chain form { display: inline; margin: 0; }
.devis-chain__step { font-size: .74rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
    text-decoration: none; white-space: nowrap; }
.devis-chain__step.is-on { color: var(--sensipode-blue); background: #ece5f4; }
a.devis-chain__step.is-on:hover { background: #ddd1ec; }
.devis-chain__step.is-off { color: #b7abc4; background: #f4f1f7; }
.devis-chain__sep { color: #c7bdd6; font-size: .78rem; }
.devis-chain__add { font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer;
    padding: 2px 9px; border-radius: 999px; border: 1px dashed var(--sensipode-pink);
    color: var(--sensipode-pink); background: #fff; }
.devis-chain__add:hover { background: var(--sensipode-pink); color: #fff; border-style: solid; }

/* Cockpit : UN SEUL tableau, à plat (pas de boîte), pôles repliables, colonnes alignées. */
.commercial-funnel-scroll { overflow-x: auto; margin-top: 4px; background: var(--surface-strong);
    border: 1px solid var(--line); border-radius: 12px; padding: 4px; box-shadow: 0 1px 2px rgba(39, 36, 69, .04); }
.commercial-funnel--single { width: 100%; border-collapse: collapse; font-size: .82rem;
    font-variant-numeric: tabular-nums; background: var(--surface-strong); }
.commercial-funnel--single th, .commercial-funnel--single td { padding: 6px 10px; text-align: right;
    border-bottom: 1px solid var(--line); white-space: nowrap; }
/* En-tête des mois : simple ligne de tête du tableau (pas de position collante, qui
   provoquait un chevauchement / une ligne flottante au-dessus du tableau). */
.commercial-funnel--single thead th { background: var(--sensipode-blue); color: #fff; font-weight: 600; }
.commercial-funnel--single thead th.cf-corner { text-align: left; }
/* Lignes opaques : elles glissent proprement sous l'en-tête collant. */
.commercial-funnel--single tbody th, .commercial-funnel--single tbody td { background: var(--surface-strong); }
.commercial-funnel--single tbody th[scope="row"] { text-align: left; color: var(--ink-soft); font-weight: 600; padding-left: 22px; }
.cf-total { font-weight: 700; }
.cf-row--objectif th, .cf-row--objectif td { color: var(--sensipode-blue); font-weight: 600; }
.cf-row--signe td { color: var(--color-positive); }
.cf-row--reste { border-top: 2px solid var(--line-strong, #cdbfe0); }
.cf-row--reste th, .cf-row--reste td { font-weight: 700; }
.cf-grouphead th { text-align: left; background: #efeaf6; color: var(--sensipode-blue); font-weight: 700;
    cursor: pointer; padding-left: 12px; }
.cf-grouphead:hover th { background: #e7e0f2; }
.cf-caret { display: inline-block; transition: transform .15s ease; }
.cf-group.is-collapsed .cf-caret { transform: rotate(-90deg); }
.cf-group.is-collapsed .cf-body { display: none; }

/* Fiche : titre d'enregistrement (pas un titre de page décoratif) */
.commercial-recordhead { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 6px; }
.commercial-recordname { font-size: 1.25rem; font-weight: 800; color: var(--sensipode-blue); margin: 0; }

/* Ma charge / Déclarer : un seul bouton d'ajout par jour, en tête */
.my-workload-add-slot--top { width: 100%; margin-bottom: 8px; justify-content: center; }

/* ------- Mes tâches : liste compacte, réorganisable, catégories ------- */
.todo-quickadd__cat { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: .85rem; background: #fff; color: var(--sensipode-blue); }
.todo-filters { display: flex; gap: 6px; margin: 4px 0 2px; }
.todo-filters a { font-size: .82rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; padding: 4px 10px; border-radius: 999px; }
.todo-filters a:hover { background: var(--surface-strong); }
.todo-filters a.is-active { background: var(--sensipode-blue); color: #fff; }

.todo-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.todo-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; background: var(--surface-strong);
    border: 1px solid var(--line); border-left: 3px solid transparent; border-radius: 8px; padding: 6px 10px; min-height: 38px; }
.todo-row.is-high { border-left-color: var(--sensipode-pink); }
.todo-row.is-dragging { opacity: .4; }
.todo-row.is-done .todo-row__title { text-decoration: line-through; color: var(--ink-soft); }
.todo-grip { cursor: grab; color: var(--ink-faint, #a99fc2); font-size: .8rem; line-height: 1; user-select: none; letter-spacing: -2px; }
.todo-check { width: 20px; height: 20px; flex: 0 0 auto; border: 1.5px solid var(--line-strong, #cdbfe0); border-radius: 50%; background: #fff; cursor: pointer; padding: 0; }
.todo-check:hover { border-color: var(--color-positive); background: var(--c-ok-bg); }
.todo-row__title { font-size: .9rem; color: var(--sensipode-blue); }
.todo-cat { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.todo-link { color: var(--pole-inno-ink); text-decoration: none; font-weight: 700; }
.todo-row__spacer { flex: 1 1 auto; }
.todo-date { font-size: .82rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.todo-date.is-over { color: var(--color-negative); font-weight: 700; }
.todo-iconbtn { border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: .95rem; padding: 4px 6px; border-radius: 6px; }
.todo-iconbtn:hover { background: var(--surface); color: var(--sensipode-blue); }

/* Formulaire d'édition inline (révélé par .is-editing) */
.todo-edit { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line); }
.todo-row.is-editing .todo-edit { display: flex; }
.todo-edit__title { flex: 1 1 200px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; }
.todo-edit__note { flex: 1 1 160px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; }
.todo-edit select { padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; }

.todo-done-block { margin-top: 14px; }
.todo-done-block > summary { cursor: pointer; color: var(--ink-soft); font-size: .85rem; font-weight: 600; }

/* ------- Mes tâches v2 : édition inline façon outil de todo ------- */
.todo-quickadd { display: flex; align-items: center; gap: 8px; }
.todo-quickadd__icon { color: var(--ink-soft); font-size: 20px; }
.todo-toolbar { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; }
.todo-toolbar__label { font-size: .78rem; color: var(--ink-soft); font-weight: 600; }

.todo-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.todo-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; background: var(--surface-strong);
    border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px 6px 8px; min-height: 42px; }
.todo-row.is-dragging { opacity: .4; }
.todo-grip { cursor: grab; color: #c3b9d6; font-size: .8rem; line-height: 1; user-select: none; flex: 0 0 auto; }
.todo-list[data-reorder="off"] .todo-grip { visibility: hidden; }

.todo-flag { border: 0; background: transparent; cursor: pointer; padding: 2px; flex: 0 0 auto; display: inline-flex; }
.todo-flag .material-symbols-outlined { font-size: 18px; }
.todo-row.prio-basse .todo-flag { color: #9aa0a6; }
.todo-row.prio-moyenne .todo-flag { color: #e98300; }
.todo-row.prio-haute .todo-flag { color: #d51f6b; }
.todo-row.prio-moyenne .todo-flag .material-symbols-outlined,
.todo-row.prio-haute .todo-flag .material-symbols-outlined { font-variation-settings: 'FILL' 1; }

.todo-check { width: 19px; height: 19px; flex: 0 0 auto; border: 1.5px solid #c9bdda; border-radius: 50%;
    background: #fff; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; color: transparent; }
.todo-check:hover { border-color: var(--color-positive); background: #e2f4ec; }
.todo-check.is-checked { border-color: var(--color-positive); background: var(--color-positive); color: #fff; }

.todo-title-input { flex: 1 1 auto; min-width: 60px; border: 0; background: transparent; font: inherit;
    font-size: .9rem; color: var(--sensipode-blue); padding: 4px 4px; border-radius: 6px; }
.todo-title-input:focus { outline: 0; background: #f3eff9; }
.todo-title-static { flex: 1 1 auto; font-size: .9rem; color: var(--ink-soft); }
.todo-row.is-done .todo-title-static { text-decoration: line-through; }

.todo-cat-select { appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px; cursor: pointer;
    font-size: 11px; font-weight: 700; padding: 3px 10px; background: #eee; color: #655d80; flex: 0 0 auto; }
.todo-cat-select.is-empty { background: transparent; color: var(--ink-faint, #a99fc2); border: 1px dashed var(--line); }
.todo-cat { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.todo-cat--none { background: #eeecf4; color: var(--ink-soft); }

.todo-link { font-size: .78rem; color: var(--pole-inno-ink); text-decoration: none; font-weight: 600;
    white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.todo-link--static { color: var(--ink-soft); }
.todo-row__spacer { flex: 1 1 auto; }

.todo-date-cell { flex: 0 0 auto; }
.todo-date-cell .date-entry { width: 128px; }
.todo-date-cell .date-mask { border: 0; background: transparent; text-align: right; font-size: .82rem;
    color: var(--ink-soft); padding: 4px 32px 4px 4px; width: 100%; font-variant-numeric: tabular-nums; }
.todo-date-cell .date-mask:focus { outline: 0; background: #f3eff9; border-radius: 6px; }
.todo-date-cell.is-over .date-mask { color: var(--color-negative); font-weight: 700; }

.todo-group { margin-top: 12px; }
.todo-group__head { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: .8rem; }
.todo-group__count { color: var(--ink-faint, #a99fc2); font-weight: 600; }

/* Composant tâches embarqué dans une fiche (opportunité / devis / projet) : à plat,
   sans double cadre, le quick-add allégé posé sur le fond de la carte. */
.commercial-card--todo .todo-root { display: flex; flex-direction: column; gap: 8px; }
.commercial-card--todo .todo-quickadd { border: 0; background: transparent; padding: 0 0 4px; }
.commercial-card--todo .todo-quickadd__title { flex: 1 1 200px; }

/* Sélecteur multi-pôle (opportunité / devis) : cases + % de répartition. */
.pole-picker { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 0; }
.pole-picker legend { font-size: .82rem; font-weight: 600; color: var(--sensipode-blue); padding: 0 4px; }
.pole-picker__hint { margin: 0 0 8px; font-size: .74rem; color: var(--ink-soft); }
.pole-picker__row { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.pole-picker__name { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--sensipode-blue); }
.pole-picker__pct { flex: 0 0 72px; width: 72px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; text-align: right; font-variant-numeric: tabular-nums; }
.commercial-poles-cell { display: flex; flex-wrap: wrap; gap: 4px; }

/* Colonnes triables (listes opportunités / devis). */
.is-sortable th.is-sortable-col { cursor: pointer; user-select: none; white-space: nowrap; }
.is-sortable th.is-sortable-col::after { content: '↕'; opacity: .35; margin-left: 5px; font-size: .8em; }
.is-sortable th.is-sortable-col[data-dir="asc"]::after { content: '↑'; opacity: .9; }
.is-sortable th.is-sortable-col[data-dir="desc"]::after { content: '↓'; opacity: .9; }
.commercial-amount--sm { font-size: .78rem; color: var(--ink-soft); }

/* Édition inline dans la liste des opportunités. */
.opp-inline-pill { appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px; cursor: pointer;
    font-size: 11px; font-weight: 700; padding: 3px 10px; max-width: 130px; }
.opp-inline-input { width: 62px; border: 1px solid transparent; border-radius: 6px; background: transparent;
    font: inherit; font-size: .82rem; padding: 3px 5px; color: var(--sensipode-blue); }
.opp-inline-input--num { text-align: right; }
.opp-inline-input:hover { border-color: var(--line); }
.opp-inline-input:focus { outline: 0; border-color: var(--sensipode-pink); background: #fff; }
.commercial-table td[data-opp-date] .date-entry { width: 118px; }
.commercial-table td[data-opp-date] .date-mask { border: 1px solid transparent; background: transparent; font-size: .82rem; }
.commercial-table td[data-opp-date] .date-mask:hover { border-color: var(--line); }

/* Sélecteur recherchable en champ de formulaire (contact) : pleine largeur. */
.sensi-select-field { display: block; width: 100%; min-width: 0; }
.sensi-select-field > summary { font-weight: 600; }

/* Indicateur d'auto-enregistrement (fiche opportunité éditable en place). */
.commercial-autosave { font-size: .78rem; font-weight: 600; padding: 4px 8px; border-radius: 999px; }
.commercial-autosave.is-saving { color: var(--ink-soft); }
.commercial-autosave.is-saved { color: var(--color-positive); background: var(--c-ok-bg, #e2f4ec); }
.commercial-autosave.is-error { color: var(--color-negative); background: #fbe9e7; }

/* Pastille-menu colorée (statut / type / suivi) : un select stylé en tag avec flèche. */
.commercial-pill-select { appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px; cursor: pointer;
    font-weight: 700; font-size: 12px; padding: 5px 26px 5px 12px; color: var(--sensipode-blue); background-color: #ece5f4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23655d80' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 9px center; }
.commercial-pill-select--neutral { background-color: #eeecf4; color: var(--ink-soft); font-weight: 600; }

/* Champ numéro : étroit. */
.ff--num { max-width: 150px; }
.commercial-mono-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Bouton désactivé (ex. « Transformer en projet » à venir). */
.commercial-btn--disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* Pôle compact : cases en ligne (fin de l'espace perdu). */
/* Compact = occupe UNE colonne du formulaire (pas pleine largeur) ; pôles listés serré. */
.pole-picker--compact { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; grid-column: auto; align-self: start; }
.pole-picker--compact legend { padding: 0 0 2px; }
.pole-picker--compact .pole-picker__row { width: auto; gap: 8px; padding: 1px 0; }
.pole-picker--compact .pole-picker__name { flex: 1 1 auto; font-size: .82rem; }
.pole-picker--compact .pole-picker__pct { flex: 0 0 52px; width: 52px; padding: 3px 6px; }

/* Champ + bouton d'ajout rapide (ex. contact) : le sélecteur s'étire, le « + » reste carré. */
.field-with-add { display: flex; align-items: stretch; gap: 6px; }
.field-with-add > .sensi-select-field { flex: 1 1 auto; min-width: 0; }
.field-add-btn { flex: 0 0 auto; width: 36px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--sensipode-blue); font-size: 20px; line-height: 1; cursor: pointer; }
.field-add-btn:hover { background: var(--sensipode-blue); color: #fff; border-color: var(--sensipode-blue); }

/* Popin réutilisable de création rapide de contact. */
.sensi-dialog { width: min(560px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 12px; padding: 0; color: var(--ink); box-shadow: 0 24px 80px rgba(20, 16, 48, 0.22); }
.sensi-dialog::backdrop { background: rgba(20, 16, 48, 0.28); }
.contact-add-form { padding: 18px; }
.contact-add-form__title { margin: 0 0 14px; font-size: 16px; color: var(--sensipode-blue); }
.contact-add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-add-grid .ff { display: flex; flex-direction: column; gap: 4px; }
.contact-add-grid .ff--wide { grid-column: 1 / -1; }
.contact-add-grid .ff > span { font-size: .78rem; color: var(--ink-soft); }
.contact-add-grid input, .contact-add-grid select { padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; font: inherit; }
.contact-add-form__error { margin: 12px 0 0; color: #c0243f; font-size: .82rem; }
.contact-add-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
@media (max-width: 560px) { .contact-add-grid { grid-template-columns: 1fr; } }

/* Liste des chiffrages (versions de l'offre). */
.commercial-btn--small { padding: 3px 9px; font-size: .8rem; }
.est-version-table td, .est-version-table th { vertical-align: middle; }
.est-issue-form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.est-issue-form .date-entry { width: 148px; }

/* Fiche offre — lignes multi-champs (span pleine largeur, sous-colonnes). */
.quote-row { display: grid; gap: 14px 18px; align-items: start; }
.quote-row--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.quote-row--numclientprospect { grid-template-columns: minmax(110px, .55fr) minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 720px) { .quote-row--2, .quote-row--numclientprospect { grid-template-columns: 1fr; } }

/* Flèche de menu déroulant sur les selects de formulaire commercial. */
.commercial-form .ff select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23655d80' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px;
}

/* Sous-section « Répartition & cadrage ». */
.commercial-subsection { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 16px 0 0; }
.commercial-subsection > legend { padding: 0 6px; font-size: .82rem; font-weight: 600; color: var(--sensipode-blue); }

/* Traitance : label, tri oui/non, puis sélecteur de contact conditionnel. */
.ff--trait { display: flex; flex-direction: column; gap: 4px; }
.ff--trait > span { font-size: .78rem; color: var(--ink-soft); }
.trait-picker { margin-top: 2px; }
.trait-picker[hidden] { display: none; }

/* Les cellules restent des cellules ; seuls leurs contenus peuvent être flex. */
td.commercial-poles-cell { display: table-cell; vertical-align: middle; }
.commercial-probability { white-space: nowrap; }
.commercial-probability .opp-inline-input { display: inline-block; width: 48px; }

/* Navigation des univers : une barre globale puis un seul contexte local. */
.universe-links { display: flex; align-items: center; gap: 2px; min-width: 0; }
.universe-links > a { white-space: nowrap; }
.universe-account { margin-left: auto; flex-shrink: 0; }
.universe-subnav { gap: 0; padding: 0; max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
.universe-subnav > *, .universe-future { white-space: nowrap; flex-shrink: 0; }
.universe-future { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-soft); padding: 7px 10px; font-size: 12px; }
.universe-future small { font-size: 10px; font-weight: normal; }
.project-universe-home { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; height: 36px; color: var(--sensipode-blue); border: 1px solid var(--line); border-radius: 6px; text-decoration: none; }
.project-universe-home:focus-visible, .universe-links a:focus-visible { outline: 2px solid var(--sensipode-pink); outline-offset: 2px; }
.home-todo { min-width: 0; margin: 22px 0; }
.home-todo-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.contacts-table-wrap { max-width: 100%; overflow-x: auto; }
@media (max-width: 1100px) {
    .topbar-session { flex-wrap: wrap; }
    .universe-links { flex: 1 1 100%; overflow-x: auto; padding-bottom: 3px; }
    .universe-account { margin-left: auto; }
    .universe-subnav { padding: 0; }
    .commercial-context-bar .context-view-tabs { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .commercial-context-bar .context-view-tabs > * { flex-shrink: 0; white-space: nowrap; }
}

/* Même barre et mêmes segments que Commercial / Projet. */
.context-view-tabs > .universe-future { min-height: 34px; padding: 0 11px; border-right: 1px solid var(--line); background: var(--surface-strong); }
.context-view-tabs > .universe-future:last-child { border-right: 0; }
.universe-context-bar { padding-inline: max(18px, calc((100vw - 1600px) / 2)); }
.my-workload-context-bar, .workload-context-bar, .presence-context-bar, .billing-context { flex-wrap: wrap; justify-content: flex-start; }
.presence-context-bar > .context-period-nav, .billing-context > .context-period-nav { margin-left: auto; }
.billing-page > .page-context-bar { margin: -32px calc(50% - 50vw) 14px; padding-inline: max(16px, calc(50vw - 50%)); border-radius: 0; }
@media (max-width: 900px) {
    .page-context-bar > .universe-subnav { flex-shrink: 1; min-width: 0; }
    .presence-context-bar > .context-period-nav, .billing-context > .context-period-nav { margin-left: 0; }
}

/* ------------------------------------------------------------------ *
 * Bouton global « + Tâche » (barre de menu) + popin de tâches.
 * Réutilise le composant todo (todo/_widget) rendu dans un <dialog>.
 * ------------------------------------------------------------------ */
.topbar-add-task {
    align-items: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    color: white;
    cursor: pointer;
    display: inline-flex;
    font-size: 13px;
    font-weight: 600;
    gap: 6px;
    min-height: 34px;
    padding: 6px 14px 6px 10px;
}

.topbar-add-task:hover,
.topbar-add-task:focus-visible {
    background: var(--sensipode-pink);
    border-color: var(--sensipode-pink);
}

.topbar-add-task .material-symbols-outlined {
    font-size: 19px;
}

@media (max-width: 720px) {
    .topbar-add-task__label {
        display: none;
    }
    .topbar-add-task {
        padding: 6px 10px;
    }
}

.todo-modal {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(39, 36, 69, 0.28);
    max-width: 1040px;
    padding: 0;
    width: min(94vw, 1040px);
}

.todo-modal::backdrop {
    background: rgba(39, 36, 69, 0.45);
}

.todo-modal__head {
    align-items: center;
    background: var(--sensipode-blue);
    border-radius: 16px 16px 0 0;
    color: white;
    display: flex;
    justify-content: space-between;
    padding: 14px 18px;
}

.todo-modal__head h2 {
    color: white;
    font-size: 16px;
    margin: 0;
}

.todo-modal__close {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.82);
    cursor: pointer;
    display: inline-flex;
    padding: 4px;
}

.todo-modal__close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: white;
}

.todo-modal__body {
    max-height: min(70vh, 620px);
    overflow-y: auto;
    padding: 16px 18px 20px;
}

/* Onglets de portée du gestionnaire de tâches (widget + popin). */
.todo-scope {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.todo-scope a {
    background: var(--sensipink-50, #fdf1f4);
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--sensipode-blue, #272445);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    text-decoration: none;
}

.todo-scope a:hover {
    border-color: var(--sensipode-pink, #e10e49);
}

.todo-scope a.is-active {
    background: var(--sensipode-pink, #e10e49);
    color: white;
}

/* Bouton de suppression (fiche commerciale) + cellule non sécable (date de création). */
.commercial-btn--danger {
    border-color: #e7b0c0;
    color: var(--sensipode-pink, #e10e49);
}

.commercial-btn--danger:hover,
.commercial-btn--danger:focus-visible {
    background: var(--sensipode-pink, #e10e49);
    border-color: var(--sensipode-pink, #e10e49);
    color: #fff;
}

.commercial-nowrap {
    white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * Espace Contacts : tableau blanc, tri, édition en ligne.
 * ------------------------------------------------------------------ */
.contacts-head {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.contacts-head h1 {
    margin: 0;
}

.contacts-table-wrap {
    background: #fff;
    border: 1px solid var(--line, #e6e1ee);
    border-radius: 12px;
    overflow-x: auto;
}

.contacts-table {
    background: #fff;
    width: 100%;
}

.contacts-table th {
    white-space: nowrap;
}

.contacts-table td {
    padding: 2px 6px;
    vertical-align: middle;
}

.contact-cell {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: inherit;
    font: inherit;
    padding: 7px 8px;
    width: 100%;
}

.contact-cell:hover {
    border-color: var(--line, #e6e1ee);
}

.contact-cell:focus {
    background: #fff;
    border-color: var(--sensipode-pink, #e10e49);
    outline: none;
}

.contact-cell.is-error {
    border-color: #e10e49;
    background: #fdf1f4;
}

/* ------------------------------------------------------------------ *
 * Chiffrage (Estimate) — éditeur de structure Phase/Étape/Tâche (3a).
 * ------------------------------------------------------------------ */
.est-versions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.est-version {
    align-items: center; background: var(--sensipink-50, #fdf1f4); border: 1px solid transparent;
    border-radius: 999px; color: var(--sensipode-blue, #272445); display: inline-flex; gap: 6px;
    font-size: 13px; font-weight: 600; padding: 5px 12px; text-decoration: none;
}
.est-version:hover { border-color: var(--sensipode-pink, #e10e49); }
.est-version.is-active { background: var(--sensipode-pink, #e10e49); color: #fff; }
.est-version__status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.est-status--brouillon { color: #9a7b12; }
.est-status--valide { color: #107540; }
.est-version.is-active .est-version__status { color: rgba(255,255,255,.85); }
.est-version-list li { align-items: center; display: flex; gap: 10px; }

.est-tree-card { display: flex; flex-direction: column; gap: 12px; }

/* Éditeur de chiffrage en MATRICE profils × tâches. */
.est-matrix-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.est-matrix-head [data-est-saved] { color: var(--sensi-green, #00af3f); font-size: .78rem; }
.est-matrix-wrap { overflow-x: auto; }
.est-matrix { border-collapse: collapse; width: 100%; font-size: .86rem; }
.est-matrix th, .est-matrix td { border: 1px solid var(--line, #e6e1ee); padding: 4px 6px; }
.est-matrix thead th { background: #faf8fc; vertical-align: bottom; position: sticky; top: 0; z-index: 1; }
.est-matrix th.est-mname { text-align: left; min-width: 360px; position: sticky; left: 0; background: #fff; z-index: 2; }
.est-matrix thead th.est-mname { z-index: 3; background: #faf8fc; }
.est-mname .est-type { min-width: 20px; padding: 2px 5px; margin-right: 4px; }
.est-type--phase { background: #272445; color: #fff; }
.est-type--step { background: #e3f6f2; color: #216b6d; }
.est-mname .est-name { width: auto; min-width: 120px; }
.est-mrow--phase th.est-mname { font-weight: 700; }
.est-mrow--phase > td, .est-mrow--step > td { background: #f7f5fb; color: #8b83a3; }
.est-mprofile { min-width: 108px; text-align: center; }
.est-mprofile .est-pname { width: 100%; text-align: center; font-weight: 600; }
.est-prate-wrap { display: inline-flex; align-items: center; gap: 3px; font-size: .78rem; color: var(--ink-soft, #655d80); }
.est-prate { width: 56px; text-align: right; }
.est-pname, .est-prate, .est-cell { border: 1px solid transparent; border-radius: 5px; padding: 3px 5px; font: inherit; background: transparent; }
.est-pname:hover, .est-prate:hover, .est-cell:hover { border-color: var(--line, #e6e1ee); }
.est-pname:focus, .est-prate:focus, .est-cell:focus { background: #fff; border-color: var(--sensipode-pink, #e10e49); outline: none; }
.est-cell { width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.est-cell.is-error { border-color: #e10e49; background: #fdf1f4; }
.est-mcell { text-align: right; }
.est-mtotal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.est-mfoot th, .est-mfoot td { background: #f1eef7; font-weight: 600; }
.est-mfoot__price { display: block; font-size: .76rem; color: var(--ink-soft, #655d80); font-weight: 400; }
.est-matrix-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.est-profile-add { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.est-profile-add input { padding: 5px 8px; border: 1px solid var(--line, #e6e1ee); border-radius: 7px; }
.est-profile-add .est-line__num { width: 90px; text-align: right; }

.est-tree, .est-children { list-style: none; margin: 0; padding: 0; }
.est-children { margin-left: 22px; border-left: 2px solid var(--line, #e6e1ee); padding-left: 12px; }
.est-node { margin: 4px 0; }
.est-row { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.est-type {
    background: #ece5f4; border-radius: 6px; color: #655d80; flex: 0 0 auto; font-size: 11px;
    font-weight: 700; padding: 3px 8px; text-transform: uppercase; letter-spacing: .03em; min-width: 54px; text-align: center;
}
.est-node--phase > .est-row > .est-type { background: #272445; color: #fff; }
.est-node--step > .est-row > .est-type { background: #e7f3f7; color: #2b6685; }
.est-name {
    background: transparent; border: 1px solid transparent; border-radius: 6px; color: inherit;
    flex: 1 1 240px; font: inherit; min-width: 160px; padding: 6px 8px;
}
.est-node--phase > .est-row > .est-name { font-weight: 700; }
.est-name:hover { border-color: var(--line, #e6e1ee); }
.est-name:focus { background: #fff; border-color: var(--sensipode-pink, #e10e49); outline: none; }
.est-name.is-error { border-color: #e10e49; background: #fdf1f4; }
.est-name--static { border-color: transparent; }
.est-inline-form { display: inline-flex; margin: 0; }
.est-btn { background: transparent; border: 1px solid var(--line, #e6e1ee); border-radius: 6px; cursor: pointer;
    font-size: 12px; font-weight: 600; padding: 5px 9px; color: var(--sensipode-blue, #272445); }
.est-btn--add:hover { border-color: var(--sensipode-pink, #e10e49); color: var(--sensipode-pink, #e10e49); }
.est-btn--del { color: #9aa0a6; }
.est-btn--del:hover { border-color: #e10e49; color: #e10e49; }
.est-add-root { margin-top: 6px; }
.est-note { margin-top: 10px; }

/* Chiffrage 3b — lignes commerciales, prix, remise, résumé économique. */
.est-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .est-layout { grid-template-columns: 1fr; } }
.est-row__totals { display: inline-flex; gap: 12px; margin-left: auto; align-items: baseline; white-space: nowrap; }
.est-row__days { color: #655d80; font-size: 12px; font-variant-numeric: tabular-nums; }
.est-row__price { color: var(--sensipode-blue, #272445); font-weight: 700; font-variant-numeric: tabular-nums; }
.est-node--phase > .est-row > .est-row__totals .est-row__price { color: var(--sensipode-pink, #e10e49); }
.est-lines { border-collapse: collapse; margin: 6px 0 6px 62px; width: calc(100% - 62px); font-size: 13px; }
.est-lines th { color: #8a8397; font-size: 11px; font-weight: 600; text-align: left; padding: 2px 8px; text-transform: uppercase; letter-spacing: .03em; }
.est-lines th.num, .est-lines td.num { text-align: right; font-variant-numeric: tabular-nums; }
.est-lines td { padding: 2px 8px; border-top: 1px solid var(--line, #f0edf5); }
.est-line__in { background: transparent; border: 1px solid transparent; border-radius: 6px; font: inherit; padding: 4px 6px; width: 100%; }
.est-line__in:hover { border-color: var(--line, #e6e1ee); }
.est-line__in:focus { background: #fff; border-color: var(--sensipode-pink, #e10e49); outline: none; }
.est-line__in.is-error { border-color: #e10e49; background: #fdf1f4; }
.est-line__num { text-align: right; max-width: 90px; }
.est-lines td.num .est-line__num { margin-left: auto; }
.est-line__actions { text-align: right; }
.est-line-add { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px 62px; }
.est-line-add input { border: 1px solid var(--line, #e6e1ee); border-radius: 6px; font: inherit; padding: 5px 8px; }
.est-line-add input[name="rate_category"] { flex: 1 1 180px; min-width: 140px; }
.est-summary { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 12px; }
.est-summary__grid { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; }
.est-summary__grid dt { color: #655d80; font-size: 13px; }
.est-summary__grid dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.est-summary__hint { color: #8a8397; font-weight: 400; }
.est-summary__strong { font-size: 16px; font-weight: 800; color: var(--sensipode-pink, #e10e49); border-top: 1px solid var(--line, #e6e1ee); padding-top: 6px; }
.est-discount { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.est-discount select, .est-discount input { border: 1px solid var(--line, #e6e1ee); border-radius: 6px; font: inherit; padding: 6px 8px; }
.est-discount input[name="value"] { max-width: 90px; }
.est-grid-attach { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line, #e6e1ee); padding-top: 10px; }
.est-grid-form { display: flex; gap: 6px; align-items: center; }
.est-grid-form select { flex: 1 1 auto; min-width: 0; border: 1px solid var(--line, #e6e1ee); border-radius: 6px; font: inherit; padding: 6px 8px; }
.est-grid-pick { border: 1px solid var(--line, #e6e1ee); border-radius: 6px; font: inherit; padding: 5px 8px; max-width: 200px; color: #655d80; }

/* Chiffrage 3c — coût & marge. */
.est-margin-card { margin-top: 16px; }
.est-margin-badge { border-radius: 999px; font-size: 12px; font-weight: 700; padding: 4px 12px; }
.est-margin-badge--ok { background: var(--c-ok-bg); color: var(--color-positive, var(--c-ok)); }
.est-margin-badge--alert { background: var(--c-risk-bg); color: var(--c-risk); }
[data-m-color] { color: inherit; }
.est-margin-value--ok { color: var(--color-positive, var(--c-ok)); }
.est-margin-value--alert { color: var(--c-risk); }
.est-margin-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 12px; }
.est-margin-side { max-width: 460px; }
.est-subhead { font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: #655d80; margin: 0 0 8px; }
.est-alloc { border-collapse: collapse; width: 100%; font-size: 13px; }
.est-alloc th { color: #8a8397; font-size: 11px; font-weight: 600; text-align: left; padding: 2px 8px; text-transform: uppercase; letter-spacing: .03em; }
.est-alloc th.num, .est-alloc td.num { text-align: right; font-variant-numeric: tabular-nums; }
.est-alloc td { padding: 3px 8px; border-top: 1px solid var(--line, #f0edf5); }
.est-alloc-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.est-alloc-add .search-select, .est-alloc-add > :first-child { flex: 1 1 200px; min-width: 160px; }
.est-alloc-hint { font-size: 12px; color: #8a8397; margin: 6px 0 0; }
.est-alloc-hint.is-warn { color: #c0123c; }
.est-margin-params { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.est-margin-params .ff { display: flex; flex-direction: column; gap: 3px; }
.est-margin-params .ff span { font-size: 12px; color: #655d80; }
.est-margin-params input { border: 1px solid var(--line, #e6e1ee); border-radius: 6px; font: inherit; padding: 6px 8px; }
.est-margin-result dt.est-summary__strong, .est-margin-result dd.est-summary__strong { font-size: 15px; }
.est-pilotage-fields { border: 1px solid var(--line, #e6e1ee); border-radius: 8px; padding: 8px 10px; margin: 4px 0; display: flex; flex-direction: column; gap: 8px; }
.est-pilotage-fields legend { font-size: 12px; font-weight: 700; color: #655d80; padding: 0 4px; }
.est-pilotage-fields select, .est-pilotage-fields input { border: 1px solid var(--line, #e6e1ee); border-radius: 6px; font: inherit; padding: 6px 8px; width: 100%; }
.est-extras-card { margin-top: 16px; }
.est-extras td:first-child { min-width: 120px; }
.est-extras .est-line__in[data-field="label"] { min-width: 160px; }
.est-extra-add select, .est-extra-add input { border: 1px solid var(--line, #e6e1ee); border-radius: 6px; font: inherit; padding: 5px 8px; }
.est-extra-add input[name="label"] { flex: 1 1 200px; min-width: 150px; }

/* Chiffrage — refonte UX (lot A) : 3 zones. */
.est-zone1 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
@media (max-width: 900px) { .est-zone1 { grid-template-columns: 1fr; } }

/* Zone 1 — équipe pressentie (= colonnes de la matrice). */
.est-team-table { border-collapse: collapse; width: 100%; font-size: 13px; margin-top: 4px; }
.est-team-table th { color: #8a8397; font-size: 11px; font-weight: 600; text-align: left; padding: 2px 8px; text-transform: uppercase; letter-spacing: .03em; }
.est-team-table th.num, .est-team-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.est-team-table td { padding: 3px 8px; border-top: 1px solid var(--line, #f0edf5); }
.est-team-table .est-pname { width: 100%; font-weight: 600; }
.est-team-table .est-prate { max-width: 80px; }
.est-team-table .est-line__num { max-width: 72px; }
.est-team-table select.est-line__in { width: 100%; min-width: 92px; border: 1px solid transparent; border-radius: 6px; padding: 3px 4px; background: transparent; font: inherit; }
.est-team-table select.est-line__in:hover { border-color: var(--line, #e6e1ee); }
.est-team-table select.est-line__in:focus { background: #fff; border-color: var(--sensipode-pink, #e10e49); outline: none; }
.est-team-days { color: #655d80; font-variant-numeric: tabular-nums; }
.est-team-row--lead td { background: #faf3f6; }
.est-cp-badge { display: inline-block; background: #272445; color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 3px 10px; }

/* Zone 1 — nature du projet. */
.est-nature-switch { display: inline-flex; border: 1px solid var(--line, #e6e1ee); border-radius: 999px; overflow: hidden; margin: 4px 0 8px; }
.est-nature-opt { padding: 6px 16px; font-size: 13px; font-weight: 600; color: #655d80; }
button.est-nature-opt { background: transparent; border: 0; cursor: pointer; font-family: inherit; }
.est-nature-opt + .est-nature-opt { border-left: 1px solid var(--line, #e6e1ee); }
button.est-nature-opt:hover:not(.is-active) { background: #f5f2fa; }
.est-nature-opt.is-active { background: var(--sensipode-pink, #e10e49); color: #fff; }
.est-nature-dialog { padding: 20px 22px; }
.est-nature-dialog h3 { margin: 0 0 6px; }
.est-nature-dialog p { margin: 0 0 16px; }
.est-nature-dialog__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.est-nature-dialog__cancel { margin-left: auto; }
.est-regie-card { margin: 0; }
.est-regie-table { width: 100%; margin: 6px 0; }
.est-regie-table td, .est-regie-table th { padding: 4px 8px; }
.est-regie-table th:last-child, .est-regie-table td:last-child { text-align: right; white-space: nowrap; }
.est-regie-table tfoot th, .est-regie-table tfoot td { font-weight: 700; border-top: 2px solid var(--line, #e6e1ee); padding-top: 4px; }

/* Zone 2 — matrice pleine largeur, en-têtes de colonnes compacts. */
.est-matrix-card { margin: 0; }
/* Colonne Intitulé gourmande ; colonnes de charge/total au plus étroit (shrink-to-fit). */
.est-matrix th.est-mname { width: 100%; min-width: 420px; }
.est-matrix .est-mprofile, .est-matrix .est-mcell, .est-matrix .est-mtotal { width: 1%; white-space: nowrap; }
.est-matrix thead th.est-mprofile { min-width: 76px; max-width: 100px; padding: 3px 4px; line-height: 1.15; text-align: center; }
.est-mprofile__code { display: block; font-weight: 700; font-size: 12px; letter-spacing: .02em; }
.est-mprofile__rate { display: block; font-size: 10px; color: var(--ink-soft, #655d80); font-weight: 400; }
.est-matrix .est-mcell { padding: 2px 4px; }
.est-matrix .est-cell { width: 68px; padding: 2px 4px; }
.est-matrix .est-mqty { width: 1%; white-space: nowrap; text-align: right; padding: 2px 4px; }
.est-matrix thead th.est-mqty { min-width: 38px; }
.est-matrix .est-qty { width: 44px; text-align: right; font-variant-numeric: tabular-nums; border: 1px solid transparent; border-radius: 5px; padding: 2px 4px; font: inherit; background: transparent; }
.est-matrix .est-qty:hover { border-color: var(--line, #e6e1ee); }
.est-matrix .est-qty:focus { background: #fff; border-color: var(--sensipode-pink, #e10e49); outline: none; }
.est-matrix .est-qty.is-error { border-color: #e10e49; background: #fdf1f4; }
.est-matrix td, .est-matrix th { padding-top: 3px; padding-bottom: 3px; }
/* Outils de ligne (ajouter enfant / supprimer) révélés au survol. */
.est-rowtools { display: inline-flex; gap: 2px; margin-left: 6px; opacity: 0; transition: opacity .12s; }
.est-mrow:hover .est-rowtools, .est-mrow:focus-within .est-rowtools { opacity: 1; }
.est-rowtool { background: transparent; border: 1px solid var(--line, #e6e1ee); border-radius: 5px; cursor: pointer; font-size: 11px; line-height: 1; padding: 2px 5px; color: #655d80; }
.est-rowtool:hover { border-color: var(--sensipode-pink, #e10e49); color: var(--sensipode-pink, #e10e49); }
.est-rowtool--del:hover { border-color: #e10e49; color: #e10e49; }
.est-matrix .est-name { width: calc(100% - 112px); min-width: 180px; max-width: none; box-sizing: border-box; }
.est-matrix .est-mtotal { min-width: 88px; padding-left: 10px; padding-right: 10px; }
/* Poignée de drag + menu ⋮ + indicateur livrable (révélés au survol). */
.est-drag { color: #c3bdd0; cursor: grab; font-size: 16px; opacity: 0; transition: opacity .12s; vertical-align: middle; }
.est-mrow:hover .est-drag, .est-mrow:focus-within .est-drag { opacity: 1; }
.est-mrow.is-reordering { opacity: .45; }
.est-deliv { font-size: 15px; color: #c3bdd0; vertical-align: middle; margin-left: 2px; }
.est-deliv.is-set { color: var(--sensipode-pink, #e10e49); }
.est-rowmenu { display: inline-block; position: relative; }
.est-rowmenu__btn { list-style: none; cursor: pointer; color: #9aa0a6; font-size: 18px; border-radius: 6px; padding: 1px; opacity: 0; transition: opacity .12s; vertical-align: middle; }
.est-rowmenu[open] .est-rowmenu__btn, .est-mrow:hover .est-rowmenu__btn, .est-mrow:focus-within .est-rowmenu__btn { opacity: 1; }
.est-rowmenu__btn::-webkit-details-marker { display: none; }
.est-rowmenu__panel { position: fixed; z-index: 1000; overflow-y: auto; min-width: 190px; background: #fff; border: 1px solid var(--line, #e6e1ee); border-radius: 8px; box-shadow: 0 6px 20px rgba(39,36,69,.14); padding: 4px; display: flex; flex-direction: column; gap: 2px; }
/* Cellule « Intitulé » (sticky) dont le menu ⋮ est ouvert : au-dessus des lignes suivantes. */
.est-matrix th.est-mname.est-mname--menu { z-index: 40; }
.est-rowmenu__item { display: block; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 6px; cursor: pointer; font: inherit; font-size: 13px; padding: 6px 10px; color: var(--sensipode-blue, #272445); }
.est-rowmenu__item:hover { background: #f5f2fa; }
.est-rowmenu__item--danger { color: #c0123c; }
.est-rowmenu form { margin: 0; }
.est-rowmenu__deliv { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-top: 1px solid var(--line, #e6e1ee); margin-top: 2px; }
.est-rowmenu__deliv input { border: 1px solid var(--line, #e6e1ee); border-radius: 6px; font: inherit; font-size: 13px; padding: 5px 7px; }
.est-rowmenu__deliv input.is-error { border-color: #e10e49; background: #fdf1f4; }

/* Chip CP sur le 1er profil de l'équipe. */
.est-cp-chip { display: inline-block; background: #272445; color: #fff; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: .03em; padding: 1px 5px; margin-right: 5px; vertical-align: middle; }

/* Hiérarchie « Charges vendues » : PHASE = bloc marqué, ÉTAPE = sous-bloc, TÂCHE = ligne simple. */
.est-matrix .est-mrow--phase > th, .est-matrix .est-mrow--phase > td { background: #efe9f7; border-top: 2px solid #d8cdee; }
.est-matrix .est-mrow--phase th.est-mname { font-weight: 700; color: #272445; border-left: 3px solid var(--sensipode-pink, #e10e49); }
.est-matrix .est-mrow--phase .est-name { font-weight: 700; color: #272445; }
.est-matrix .est-mrow--step > th, .est-matrix .est-mrow--step > td { background: #f7f4fb; }
.est-matrix .est-mrow--step th.est-mname { font-weight: 600; color: #3a3550; }
.est-matrix .est-mrow--step .est-name { font-weight: 600; color: #3a3550; }
.est-matrix .est-mrow--task th.est-mname, .est-matrix .est-mrow--task .est-name { font-weight: 400; color: var(--sensipode-blue, #272445); }
.est-matrix .est-mrow--phase > td, .est-matrix .est-mrow--step > td { color: #655d80; }

/* Zone 3 — coût & marge + résumé sticky. */
.est-zone3 { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; margin-top: 16px; }
@media (max-width: 900px) { .est-zone3 { grid-template-columns: 1fr; } }
.est-zone3__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.est-zone3 .est-margin-card, .est-zone3 .est-extras-card { margin: 0; }
.est-summary__target { font-size: 12px; color: #8a8397; margin: 10px 0 0; }

/* Grilles tarifaires — page consultation (3b-2). */
.pricegrid-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.pricegrid-card { display: flex; flex-direction: column; gap: 8px; }
.pricegrid-tag { border-radius: 999px; font-size: 11px; font-weight: 700; padding: 3px 10px; text-transform: uppercase; letter-spacing: .03em; }
.pricegrid-tag--client { background: #e7f3f7; color: #2b6685; }
.pricegrid-tag--default { background: #ece5f4; color: #655d80; }
.pricegrid-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.pricegrid-table th { color: #8a8397; font-size: 11px; font-weight: 600; text-align: left; padding: 3px 6px; text-transform: uppercase; letter-spacing: .03em; }
.pricegrid-table th.num, .pricegrid-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pricegrid-table td { padding: 3px 6px; border-top: 1px solid var(--line, #f0edf5); }
.pricegrid-years { display: flex; flex-wrap: wrap; gap: 4px; }
.pricegrid-year { background: transparent; border: 1px solid var(--line, #e6e1ee); border-radius: 999px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; padding: 3px 10px; color: #655d80; }
.pricegrid-year:hover { border-color: var(--sensipode-pink, #e10e49); }
.pricegrid-year.is-active { background: var(--sensipode-pink, #e10e49); border-color: var(--sensipode-pink, #e10e49); color: #fff; }
.pricegrid-year-label { color: #8a8397; font-size: 12px; font-weight: 600; margin: 0 0 2px; }
.pricegrid-year-panel.is-hidden { display: none; }

/* ----- Référentiel de briques de chiffrage ----- */
.brick-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.brick-head .commercial-muted { margin: 2px 0 0; max-width: 60ch; }
.brick-crumb { display: flex; align-items: center; gap: 12px; }
.brick-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.brick-actions form { margin: 0; }
.brick-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; letter-spacing: .02em; }
.brick-badge--archived { background: #efe9f7; color: #655d80; }
.brick-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 14px; }
.brick-filters input[type="search"] { min-width: 220px; flex: 1 1 220px; }
.brick-filters input, .brick-filters select { padding: 6px 10px; border: 1px solid var(--line, #e6e1ee); border-radius: 8px; font: inherit; }
.brick-list tr.is-archived { opacity: .55; }
.brick-name { font-weight: 600; color: var(--sensipode-black, #272445); }
.brick-tag { display: inline-block; background: #ece5f4; color: #655d80; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; margin: 0 3px 2px 0; }

.brick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 6px 0 20px; }
.brick-grid .ff--wide { grid-column: span 1; }
.brick-grid .ff--full { grid-column: 1 / -1; }
.brick-grid .ff { display: flex; flex-direction: column; gap: 3px; }
.brick-grid .ff > span { font-size: 12px; font-weight: 600; color: #655d80; }
.brick-grid input, .brick-grid textarea { width: 100%; min-width: 0; box-sizing: border-box; padding: 7px 10px; border: 1px solid var(--line, #e6e1ee); border-radius: 8px; font: inherit; }
.brick-grid textarea { resize: vertical; }
.brick-poles { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 4px 0; }
.brick-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; color: var(--sensipode-black, #272445); }

.brick-section-title { font-size: 15px; font-weight: 700; color: var(--sensipode-black, #272445); margin: 22px 0 8px; }
.brick-section-title .commercial-muted { font-weight: 400; }
.brick-tasks, .brick-params { width: 100%; }
.brick-tasks th, .brick-params th { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: #8a8397; }
.brick-tasks td input, .brick-tasks td select, .brick-params td input { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid transparent; border-radius: 6px; padding: 5px 7px; font: inherit; background: transparent; }
.brick-tasks td input:hover, .brick-params td input:hover, .brick-tasks td select:hover { border-color: var(--line, #e6e1ee); }
.brick-tasks td input:focus, .brick-tasks td select:focus, .brick-params td input:focus { border-color: var(--sensipode-pink, #e10e49); outline: none; background: #fff; }
.brick-tasks .brick-day { text-align: right; max-width: 72px; }
.brick-tasks .num { width: 1%; white-space: nowrap; }
.brick-drag-col { width: 24px; }
.brick-tasks tr.is-reordering { opacity: .5; }
.brick-x { background: transparent; border: 0; color: #b0a8bf; cursor: pointer; font-size: 14px; padding: 2px 6px; }
.brick-x:hover { color: var(--sensipode-pink, #e10e49); }
.brick-tasks form, .brick-params form { margin: 0; }

/* Sélecteur de briques depuis le chiffrage (dialog) */
.sensi-dialog:has(.est-brick-dialog) { width: min(960px, calc(100vw - 32px)); max-width: calc(100vw - 32px); background: var(--surface, #fff); }
.est-brick-dialog { width: 100%; min-width: 0; box-sizing: border-box; padding: 16px; display: flex; flex-direction: column; gap: 0; }
.est-brick-dialog__head { display: flex; align-items: center; justify-content: space-between; padding: 2px 0 10px; border-bottom: 1px solid var(--line, #e6e1ee); }
.est-brick-x { background: transparent; border: 0; font-size: 16px; color: #8a8397; cursor: pointer; }
.est-brick-dialog__body { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 1.4fr); gap: 20px; padding: 12px 0; max-height: 65vh; overflow: auto; }
.est-brick-search { width: 100%; box-sizing: border-box; padding: 7px 10px; border: 1px solid var(--line, #e6e1ee); border-radius: 8px; font: inherit; margin-bottom: 8px; }
.est-brick-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.est-brick-item { width: 100%; text-align: left; background: #faf8fd; border: 1px solid transparent; border-radius: 8px; padding: 8px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.est-brick-item:hover { border-color: var(--sensipode-pink, #e10e49); }
.est-brick-item__name { font-weight: 600; color: var(--sensipode-black, #272445); }
.est-brick-item__meta { font-size: 12px; color: #8a8397; }
.est-brick-empty { color: #8a8397; font-size: 13px; padding: 8px; }
.est-brick-pick, .est-brick-detail { min-width: 0; }
.est-brick-detail > h3 { margin: 0 0 12px; overflow-wrap: anywhere; }
.est-brick-item.is-selected { border-color: var(--sensipode-pink); }
.est-brick-detail h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: #8a8397; margin: 10px 0 6px; }
.est-brick-param { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; font-size: 13px; }
.est-brick-param > span { color: #655d80; font-weight: 600; }
.est-brick-param input, .est-brick-param select { padding: 6px 9px; border: 1px solid var(--line, #e6e1ee); border-radius: 8px; font: inherit; }
.est-brick-tasks ul { list-style: none; margin: 0; padding: 0; }
.est-brick-tasks li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 13px; border-bottom: 1px dashed #efe9f7; }
.est-brick-tasks li span { color: #8a8397; white-space: nowrap; }
.est-brick-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line, #e6e1ee); }
@media (max-width: 640px) { .est-brick-dialog__body { grid-template-columns: 1fr; } }

/* ===== Base clients (Commercial → Clients) ===== */
.client-new { display: flex; gap: .5rem; align-items: center; }
.client-new input { padding: .4rem .6rem; }
.client-form { display: flex; flex-direction: column; gap: 1rem; }
.client-form fieldset { border: 1px solid var(--commercial-border, #e2e2ea); border-radius: 8px; padding: .75rem 1rem 1rem; }
.client-form legend { font-weight: 600; padding: 0 .4rem; color: var(--sensi-black, #272445); }
.client-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1rem; }
.client-grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.client-grid label { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; color: var(--commercial-muted, #5b4b6f); }
.client-grid input, .client-grid textarea { padding: .4rem .55rem; border: 1px solid var(--commercial-border, #e2e2ea); border-radius: 6px; font: inherit; }
.client-grid input[readonly], .client-grid textarea[readonly] { background: #f6f6f9; color: #333; }
.client-grid .client-span { grid-column: 1 / -1; }
.client-actions { display: flex; justify-content: flex-end; }
.client-contact-add { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.client-contact-add input, .client-contact-add select { padding: .4rem .55rem; border: 1px solid var(--commercial-border, #e2e2ea); border-radius: 6px; }
.client-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.client-link-col h3 { margin: 0 0 .5rem; font-size: .9rem; }
.client-link-row { display: flex; justify-content: space-between; gap: .5rem; padding: .25rem 0; border-bottom: 1px solid #f0f0f4; font-size: .82rem; }
@media (max-width: 900px) {
    .client-grid, .client-links { grid-template-columns: 1fr; }
}

/* Fusion de clients (fiche) */
.client-merge { border: 1px solid #f3c0b4; background: #fdf4f1; }
.client-merge-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.client-merge-form select { padding: .4rem .55rem; border: 1px solid var(--commercial-border, #e2e2ea); border-radius: 6px; min-width: 18rem; max-width: 100%; }
.client-merge-delete { margin-top: .9rem; padding-top: .75rem; border-top: 1px dashed #f3c0b4; }
.client-merge-delete form { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

/* ===== Grilles TJM — édition ===== */
.commercial-btn--sm { padding: 3px 9px; font-size: .78rem; }
.pricegrid-toolbar { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; }
.pricegrid-syntec, .pricegrid-newgrid, .pricegrid-addrate { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.pricegrid-syntec input, .pricegrid-newgrid input, .pricegrid-newgrid select, .pricegrid-addrate input {
    padding: .35rem .5rem; border: 1px solid var(--line, #e2e2ea); border-radius: 6px; font: inherit; }
.pricegrid-newgrid select { min-width: 14rem; max-width: 100%; }
.pricegrid-year-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: .4rem 0; }
.pricegrid-year-actions { display: inline-flex; gap: .4rem; }
.pricegrid-year-actions form { display: inline; }
.pricegrid-input { width: 100%; border: 1px solid transparent; border-radius: 5px; padding: .3rem .4rem; font: inherit; background: transparent; }
.pricegrid-input:hover { border-color: var(--line, #e2e2ea); }
.pricegrid-input:focus { border-color: var(--sensipode-blue, #3095b4); outline: none; background: #fff; }
.pricegrid-input--num { text-align: right; }
.pricegrid-input.is-saved { background: #eefaf1; }
.pricegrid-input.is-error { background: #fdecec; border-color: #e0736b; }
.pricegrid-del { border: 0; background: transparent; color: #b4474d; cursor: pointer; font-size: .9rem; padding: .2rem .4rem; }
.pricegrid-del:hover { color: #e10e49; }
.pricegrid-addrate { margin-top: .5rem; }

/* Ma charge : panneau à hauteur de fenêtre, défilement interne et repli par projet. */
.my-workload-backlog[open] { height: var(--backlog-height, calc(100dvh - 200px)); overflow-y: auto; position: sticky; top: 12px; display: block; }
.my-workload-backlog__head { position: sticky; top: 0; background: var(--surface, white); z-index: 2; }
.my-workload-backlog [hidden] { display: none !important; }
.my-workload-backlog-more { border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; padding: 6px 12px; }
@media (max-width: 900px) { .my-workload-backlog[open] { position: static; height: auto; max-height: 60dvh; } }

/* Suivi des échanges et contacts (opportunité → offre → devis) */
.exchange-log__form { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
.exchange-log__form .date-entry { width: 148px; }
.exchange-log__comment { flex: 1 1 260px; min-width: 0; }
.exchange-log__list { list-style: none; margin: 0; padding: 0; }
.exchange-log__item { display: grid; grid-template-columns: 90px 1fr auto auto; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line); font-size: .88rem; }
.exchange-log__date { font-variant-numeric: tabular-nums; font-weight: 600; }
.exchange-log__text { min-width: 0; overflow-wrap: anywhere; }
.exchange-log__meta { font-size: .8rem; }
.exchange-log__source { font-family: ui-monospace, monospace; margin-right: 6px; }
.exchange-log__item form { margin: 0; }
.exchange-log__delete { border: 0; background: none; color: var(--muted, #8a83a0); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 4px; }
.exchange-log__delete:hover { color: var(--sensipode-pink); }
@media (max-width: 640px) { .exchange-log__item { grid-template-columns: 80px 1fr auto; } .exchange-log__meta { grid-column: 2; } }
.est-status--envoye { color: #2B6685; }
.devis-chain-col { min-width: 380px; white-space: nowrap; }
.devis-chain__step.is-current { background: var(--sensipode-blue); color: #fff; }
a.devis-chain__step.is-current:hover { background: var(--sensipode-pink); }
.estimate-detail__tree .estimate-detail__row--phase td, .estimate-detail__tree .estimate-detail__row--section td { font-weight: 700; }
.estimate-detail__deliverables { font-size: .8rem; color: var(--muted, #8a83a0); margin-top: 2px; }
.estimate-detail .commercial-h3 { margin: 14px 0 6px; }
.est-deliverables__form { display: flex; gap: 8px; align-items: center; margin: 0; }
.est-deliverables__form input { flex: 1 1 auto; min-width: 0; }
.est-deliv-text { font-weight: 400; font-size: .78rem; color: var(--sensipode-pink, #e10e49); margin: 1px 0 0 28px; white-space: normal; }
.admin-projects-qty { text-align: right; font-variant-numeric: tabular-nums; }
.admin-projects-deliverable-line { display: flex; align-items: baseline; gap: 10px; padding: 5px 12px; font-size: .82rem; }
.admin-projects-deliverable-line--step { padding-left: 28px; border-bottom: 1px solid var(--line); }
.admin-projects-deliverable-line--phase { border-top: 1px solid var(--line); }
.admin-projects-deliverable-line__label { flex: none; font-size: .72rem; font-weight: 700; color: var(--sensipode-pink, #e10e49); }
.admin-projects-deliverable-line__text { flex: 1 1 auto; min-width: 0; }
.admin-projects-deliverable-line textarea { flex: 1 1 auto; min-width: 0; min-height: 28px; resize: vertical; font: inherit; }
.admin-projects-deliverable-line__due { flex: none; margin-left: auto; color: #8a83a0; font-variant-numeric: tabular-nums; }
.admin-projects-matrix-rate { display: block; font-size: .68rem; font-weight: 400; color: #8a83a0; white-space: nowrap; }