pta/assets/style.css

:root {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #17202a;
    background: #f4f6f8;
    font-synthesis: none;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background: #f4f6f8;
}

button, input, select { font: inherit; }

.app-shell {
    width: min(1440px, calc(100% - 32px));
    margin: 0 auto;
    padding: 32px 0 48px;
}

.page-header,
.section-heading,
.actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.page-header { margin-bottom: 24px; }

.eyebrow {
    margin: 0 0 4px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #546e7a;
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 6px; font-size: clamp(1.8rem, 4vw, 2.6rem); }
h2 { margin-bottom: 18px; font-size: 1.15rem; }
.subtitle, .section-subtitle, .hint { color: #66737d; }
.subtitle, .section-subtitle { margin-bottom: 0; }
.hint { margin: 14px 0 0; font-size: 0.88rem; }

.card {
    background: #fff;
    border: 1px solid #e4e8eb;
    border-radius: 16px;
    padding: 22px;
    margin-bottom: 20px;
    box-shadow: 0 6px 24px rgba(23, 32, 42, 0.05);
}

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

.entry-grid {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 1fr 1fr auto;
    align-items: end;
    gap: 14px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-weight: 700;
    font-size: 0.9rem;
}

.field strong { color: #c62828; }

select, input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #cfd8dc;
    border-radius: 10px;
    background: #fff;
    color: inherit;
    outline: none;
}

select:focus, input:focus {
    border-color: #607d8b;
    box-shadow: 0 0 0 3px rgba(96, 125, 139, 0.14);
}

select:disabled, input:disabled {
    background: #f3f5f6;
    color: #9aa4aa;
    cursor: not-allowed;
}

.button {
    border: 0;
    border-radius: 10px;
    min-height: 44px;
    padding: 10px 18px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.1s ease, opacity 0.15s ease;
}

.button:not(:disabled):active { transform: translateY(1px); }
.button:disabled { opacity: 0.45; cursor: not-allowed; }
.button-primary { background: #263238; color: #fff; }
.button-secondary { background: #e8ecef; color: #263238; }
.button-success { background: #256d3b; color: #fff; }
.button-warning { background: #b06a00; color: #fff; }
.button-add { white-space: nowrap; }

.status-badge {
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 800;
    white-space: nowrap;
}
.status-neutral { background: #e9eef1; color: #52616b; }
.status-draft { background: #fff4d6; color: #7d5c00; }
.status-valid { background: #dff3e5; color: #256d3b; }

.totals {
    min-width: 150px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #f4f7f8;
    text-align: right;
}
.totals span { display: block; color: #65737b; font-size: 0.78rem; }
.totals strong { font-size: 1.15rem; }

.planning-board {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.day-column {
    min-width: 150px;
    border: 1px solid #e1e6e9;
    border-radius: 12px;
    overflow: hidden;
    background: #fafbfb;
}

.day-header {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 12px;
    background: #eef2f4;
    border-bottom: 1px solid #e1e6e9;
}
.day-header span { color: #68757d; font-size: 0.8rem; }
.day-entries { padding: 10px; }
.day-empty { margin: 8px 0; color: #98a1a7; font-size: 0.83rem; text-align: center; }

.planning-entry {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px;
    margin-bottom: 8px;
    background: #fff;
    border: 1px solid #dde3e6;
    border-radius: 10px;
}
.planning-entry:last-child { margin-bottom: 0; }
.entry-content { display: flex; flex-direction: column; gap: 2px; }
.entry-motif { font-size: 0.77rem; font-weight: 800; color: #546e7a; }
.entry-content strong { font-size: 0.9rem; }
.entry-content small { color: #7b878e; }
.remove-entry {
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: #f1f3f4;
    color: #7f1d1d;
    font-size: 1.1rem;
    cursor: pointer;
}

.empty-state {
    padding: 36px 18px;
    border: 1px dashed #cfd8dc;
    border-radius: 12px;
    text-align: center;
    color: #7b878e;
}

.actions-bar {
    position: sticky;
    bottom: 12px;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #dfe5e8;
    border-radius: 14px;
    box-shadow: 0 10px 34px rgba(23, 32, 42, 0.13);
    backdrop-filter: blur(8px);
}
.action-buttons { display: flex; gap: 10px; }
.message { flex: 1; white-space: pre-line; font-size: 0.9rem; }
.message-success { color: #256d3b; }
.message-warning { color: #8a6100; }
.message-error { color: #b3261e; }

@media (max-width: 980px) {
    .selection-grid { grid-template-columns: 1fr; }
    .entry-grid { grid-template-columns: repeat(2, 1fr); }
    .button-add { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    .app-shell { width: min(100% - 20px, 1440px); padding-top: 18px; }
    .page-header, .section-heading, .actions-bar { align-items: stretch; flex-direction: column; }
    .entry-grid { grid-template-columns: 1fr; }
    .action-buttons { display: grid; grid-template-columns: 1fr; }
    .status-badge { align-self: flex-start; }
    .totals { text-align: left; }
}

/* ============================================================
   V4 - Navigation, quota et vues d'ensemble
   ============================================================ */
.view-tabs {
    display: flex;
    gap: 0.65rem;
    margin: 0 0 1.25rem;
    padding: 0.35rem;
    border: 1px solid #dbe3ee;
    border-radius: 14px;
    background: #f8fafc;
    overflow-x: auto;
}

.view-tab {
    border: 0;
    border-radius: 10px;
    padding: 0.8rem 1rem;
    background: transparent;
    color: #4b5563;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.view-tab.is-active {
    background: #ffffff;
    color: #172033;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08);
}

.app-view[hidden] {
    display: none !important;
}

.quota-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.quota-card {
    display: flex;
    min-height: 100px;
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
    padding: 1rem 1.15rem;
    border: 1px solid #dbe3ee;
    border-radius: 14px;
    background: #ffffff;
}

.quota-card span,
.quota-card small {
    color: #6b7280;
}

.quota-card strong {
    color: #172033;
    font-size: 1.35rem;
}

.quota-card-emphasis {
    border-color: #b9c7ff;
    background: #f4f6ff;
}

.quota-negative {
    color: #b42318 !important;
}

.overview-filters {
    align-items: end;
}

.filter-button {
    min-height: 46px;
}

.overview-card {
    min-height: 280px;
}

.overview-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.overview-title-row h3 {
    margin: 0;
    font-size: 1.35rem;
}

.overview-title-row p {
    margin: 0.25rem 0 0;
    color: #6b7280;
}

.overview-count {
    display: inline-flex;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-weight: 700;
}

.table-scroll {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
}

.planning-table {
    width: 100%;
    min-width: 1280px;
    border-collapse: collapse;
    background: #ffffff;
}

.planning-table th,
.planning-table td {
    padding: 0.75rem;
    border-right: 1px solid #edf0f4;
    border-bottom: 1px solid #edf0f4;
    vertical-align: top;
    text-align: left;
}

.planning-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc;
    color: #334155;
    font-size: 0.82rem;
}

.planning-table thead th span {
    display: block;
    margin-top: 0.15rem;
    color: #94a3b8;
    font-weight: 500;
}

.agent-cell {
    min-width: 155px;
    background: #fcfcfd;
}

.agent-cell strong,
.agent-cell span,
.quota-cell strong,
.quota-cell span,
.quota-cell small {
    display: block;
}

.agent-cell span,
.quota-cell span,
.quota-cell small {
    margin-top: 0.2rem;
    color: #6b7280;
    font-size: 0.78rem;
}

.quota-cell {
    min-width: 135px;
}

.overview-entry {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 112px;
    margin-bottom: 0.45rem;
    padding: 0.55rem 0.6rem;
    border-left: 4px solid #64748b;
    border-radius: 8px;
    background: #f8fafc;
    font-size: 0.78rem;
}

.overview-entry strong {
    font-size: 0.8rem;
}

.overview-entry span,
.overview-entry small {
    color: #475569;
}

.overview-entry em {
    margin-top: 0.15rem;
    color: #92400e;
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 700;
}

.motif-travail { border-left-color: #2563eb; }
.motif-formation { border-left-color: #7c3aed; }
.motif-conge { border-left-color: #059669; }
.motif-maladie { border-left-color: #dc2626; }
.motif-autre { border-left-color: #64748b; }

.cell-empty {
    color: #cbd5e1;
}

.agent-week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(150px, 1fr));
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.agent-day-card {
    min-width: 150px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
}

.agent-day-card > header {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.7rem;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}

.agent-day-card > header span {
    color: #6b7280;
    font-size: 0.8rem;
}

.agent-day-body {
    padding: 0.65rem;
}

.overview-quota-strip {
    margin-bottom: 1.25rem;
}

@media (max-width: 900px) {
    .quota-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .quota-strip {
        grid-template-columns: 1fr;
    }

    .view-tabs {
        width: 100%;
    }
}

/* ============================================================
   V4.2 - Saisie hebdomadaire des affectations du lundi au vendredi
   ============================================================ */
.weekly-entry-toolbar {
    display: flex;
    align-items: end;
    gap: 24px;
    margin-bottom: 18px;
}

.weekly-motif-field {
    width: min(420px, 100%);
    flex: 0 0 min(420px, 100%);
}

.weekly-entry-help {
    margin: 0 0 4px;
    color: #66737d;
    font-size: 0.9rem;
    line-height: 1.45;
}

.weekly-entry-scroll {
    overflow-x: auto;
    border: 1px solid #e1e6e9;
    border-radius: 12px;
}

.weekly-entry-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    background: #fff;
}

.weekly-entry-table th,
.weekly-entry-table td {
    padding: 11px 12px;
    border-right: 1px solid #e7ebed;
    border-bottom: 1px solid #e7ebed;
    text-align: center;
    vertical-align: middle;
}

.weekly-entry-table tr:last-child th,
.weekly-entry-table tr:last-child td {
    border-bottom: 0;
}

.weekly-entry-table th:last-child,
.weekly-entry-table td:last-child {
    border-right: 0;
}

.weekly-entry-table thead th {
    background: #eef2f4;
    color: #42515a;
    font-size: 0.84rem;
}

.weekly-entry-table thead tr:first-child th {
    padding-bottom: 7px;
    font-size: 0.9rem;
}

.weekly-entry-subhead th {
    padding-top: 7px !important;
    font-weight: 700;
    color: #6b7780 !important;
}

.weekly-day-cell {
    width: 150px;
    min-width: 150px;
    background: #fafbfb;
    text-align: left !important;
}

.weekly-day-cell strong,
.weekly-day-cell span {
    display: block;
}

.weekly-day-cell span {
    margin-top: 2px;
    color: #7b878e;
    font-size: 0.8rem;
    font-weight: 500;
}

.weekly-entry-table input[type="time"] {
    min-width: 116px;
    min-height: 40px;
    padding: 8px 9px;
}

.weekly-motif-select {
    min-width: 190px;
    min-height: 40px;
    padding: 8px 10px;
}

.weekly-entry-placeholder {
    padding: 30px 18px !important;
    color: #7b878e;
}

.weekly-entry-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

/* Le planning affiché couvre désormais uniquement les cinq jours ouvrés. */
.planning-board {
    grid-template-columns: repeat(5, minmax(170px, 1fr));
}

@media (max-width: 760px) {
    .weekly-entry-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .weekly-motif-field {
        width: 100%;
        flex-basis: auto;
    }

    .weekly-entry-actions .button {
        width: 100%;
    }
}

/* ============================================================
   V4.4 - Planning global agent et contrôle inter-structures
   ============================================================ */
.agent-week-grid {
    grid-template-columns: repeat(5, minmax(170px, 1fr));
}

.entry-location {
    display: block;
    margin-top: 3px;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 700;
}

.planning-entry-external {
    background: #f8fafc;
    border-style: dashed;
}

.entry-locked {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 0.68rem;
    font-weight: 800;
    white-space: nowrap;
}
.message-info { color: #1d4ed8; }

/* ============================================================
   V4.5 - Association unique agent / structure
   ============================================================ */
.assignment-table .agent-structure-select {
    min-width: 260px;
    width: 100%;
}

.assignment-table td:last-child {
    width: 150px;
    text-align: right;
}

#assignment-message:not(:empty) {
    margin-bottom: 1rem;
}

/* ============================================================
   V4.8 - Administration des structures et des agents
   ============================================================ */
.admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.admin-card {
    min-width: 0;
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.admin-field-wide {
    grid-column: 1 / -1;
}

.admin-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
}

.admin-form-actions .message {
    flex: 1;
    margin: 0;
}

.input-suffix {
    display: flex;
    align-items: stretch;
}

.input-suffix input {
    flex: 1;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-suffix span {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-left: 0;
    border-radius: 0 8px 8px 0;
    background: #f8fafc;
    font-weight: 700;
    color: #475569;
}

@media (max-width: 900px) {
    .admin-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .admin-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-field-wide {
        grid-column: auto;
    }

    .admin-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-form-actions .button {
        width: 100%;
    }
}


/* ============================================================
   V4.9 - Lieux d’affectation et plages horaires dynamiques
   ============================================================ */
.weekly-ranges-cell {
    min-width: 720px;
    text-align: left !important;
}

.weekly-time-ranges {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
}

.weekly-time-range {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: minmax(190px, 240px) 120px auto 120px 38px;
    align-items: end;
    gap: 8px;
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
}

.weekly-time-range label {
    display: grid;
    gap: 4px;
}

.weekly-range-motif {
    min-width: 190px;
    min-height: 40px;
    padding: 8px 10px;
}

.weekly-time-range label span {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
}

.weekly-time-separator {
    padding-bottom: 10px;
    color: #64748b;
    font-weight: 800;
}

.add-time-range {
    margin-top: 8px;
}

.remove-time-range {
    min-width: 36px;
    min-height: 40px;
    padding: 0;
    font-size: 1.2rem;
}

.assignment-table .agent-type-select {
    min-width: 180px;
    width: 100%;
}

@media (max-width: 760px) {
    .weekly-time-range {
        grid-template-columns: 1fr 1fr 1fr 38px;
    }

    .weekly-time-separator {
        display: none;
    }
}

.weekly-mixed-motif-warning {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    line-height: 1.35;
}

/* ---------------------------------------------------------
   Édition directe d'un créneau depuis la vue agent
   --------------------------------------------------------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.55);
    overflow-y: auto;
}

.modal-backdrop[hidden] {
    display: none;
}

.modal-card {
    width: min(760px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
    padding: 24px;
}

.modal-heading {
    align-items: flex-start;
}

.modal-close {
    min-width: 42px;
    min-height: 42px;
    padding: 6px 12px;
    font-size: 1.5rem;
    line-height: 1;
}

.edit-time-range-field {
    align-self: end;
}

.edit-time-range {
    display: flex;
    align-items: center;
    gap: 10px;
}

.edit-time-range input {
    min-width: 0;
    flex: 1;
}

.modal-actions {
    justify-content: flex-end;
    gap: 10px;
}

.overview-entry-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.overview-entry-edit {
    padding: 5px 9px;
    font-size: 0.78rem;
}

body.modal-open {
    overflow: hidden;
}

@media (max-width: 640px) {
    .modal-backdrop {
        padding: 12px;
        align-items: end;
    }

    .modal-card {
        max-height: 92vh;
        border-radius: 18px 18px 0 0;
        padding: 18px;
    }

    .edit-time-range {
        flex-wrap: wrap;
    }
}


/* ============================================================
   V5.3 - Actions d'export PDF
   ============================================================ */
.planning-summary-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.button-pdf {
    white-space: nowrap;
}

.overview-filter-actions {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
}

.overview-filter-actions .button {
    flex: 1;
}

@media (max-width: 640px) {
    .planning-summary-actions,
    .overview-filter-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
}

/* ============================================================
   V5.6 - Contrat horaire PDF depuis la vue agent
   ============================================================ */
.agent-overview-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

@media (max-width: 760px) {
    .overview-title-row {
        align-items: stretch;
        flex-direction: column;
    }

    .agent-overview-actions,
    .agent-overview-actions .button {
        width: 100%;
    }
}

/* ============================================================
   V5.8 - Déplacement / duplication des créneaux par glisser-déposer
   ============================================================ */
.planning-entry-interactive {
    position: relative;
    cursor: grab;
    user-select: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.planning-entry-interactive:hover,
.planning-entry-interactive:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
    outline: none;
}

.planning-entry-interactive:active {
    cursor: grabbing;
}

.planning-entry-interactive.is-dragging {
    opacity: 0.45;
    transform: scale(0.98);
}

.entry-drag-hint {
    flex: 0 0 auto;
    align-self: center;
    color: #94a3b8;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: -0.25rem;
    writing-mode: vertical-rl;
    pointer-events: none;
}

.day-column.is-drop-target {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
    background: #eff6ff;
}

.day-column.is-copy-target {
    outline-style: dashed;
    background: #f5f3ff;
}

.day-column.is-drop-target .day-header::after {
    content: 'Déplacer ici';
    margin-left: auto;
    color: #1d4ed8;
    font-size: 0.68rem;
    font-weight: 800;
}

.day-column.is-copy-target .day-header::after {
    content: 'Dupliquer ici';
    color: #6d28d9;
}

.planning-entry-action-card {
    width: min(620px, 100%);
}

.entry-action-mode {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

.entry-action-mode legend {
    grid-column: 1 / -1;
    margin-bottom: 4px;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 800;
}

.entry-action-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid #dbe3e8;
    border-radius: 12px;
    background: #f8fafc;
    cursor: pointer;
}

.entry-action-option:has(input:checked) {
    border-color: #2563eb;
    background: #eff6ff;
}

.entry-action-option input {
    margin-top: 3px;
}

.entry-action-option span,
.entry-action-option strong,
.entry-action-option small {
    display: block;
}

.entry-action-option small {
    margin-top: 3px;
    color: #64748b;
}

@media (max-width: 640px) {
    .entry-action-mode {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   V5.9 - Semaines types par agent
   ============================================================ */
.week-template-modal-card {
    width: min(720px, 100%);
}

.week-template-context,
.week-template-details {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid #dbe3e8;
    border-radius: 12px;
    background: #f8fafc;
}

.week-template-context strong,
.week-template-context span,
.week-template-detail-card strong,
.week-template-detail-card span {
    display: block;
}

.week-template-context span,
.week-template-detail-card span {
    margin-top: 3px;
    color: #64748b;
    font-size: 0.85rem;
}

.week-template-mode {
    margin-top: 4px;
}

.week-template-danger {
    padding: 12px 14px;
    border: 1px solid #fecaca;
    border-radius: 12px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 0.88rem;
    font-weight: 700;
}

.week-template-modal-actions {
    align-items: center;
}

.modal-action-spacer {
    flex: 1;
}

.button-danger {
    border-color: #dc2626;
    background: #fff;
    color: #b91c1c;
}

.button-danger:hover:not(:disabled) {
    background: #fef2f2;
}

@media (max-width: 760px) {
    .week-template-modal-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .modal-action-spacer {
        display: none;
    }
}

/* ============================================================
   V5.11 - Vue agent mensuelle, glisser-déposer inter-semaines
   ============================================================ */
.agent-month-title-row {
    align-items: flex-start;
}

.agent-month-planner {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.agent-month-help {
    margin: 0.9rem 0 0;
    color: #64748b;
    font-size: 0.84rem;
}

.agent-month-week {
    border: 1px solid #dbe3ec;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.agent-month-week-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.85rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.agent-month-week-header > div {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.agent-month-week-header span {
    color: #64748b;
    font-size: 0.78rem;
}

.agent-month-week-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(165px, 1fr));
    min-width: 825px;
}

.agent-month-week {
    overflow-x: auto;
}

.agent-month-day-card {
    min-height: 150px;
    border-right: 1px solid #e2e8f0;
    background: #fff;
    transition: background 0.15s ease, outline 0.15s ease;
}

.agent-month-day-card:last-child {
    border-right: 0;
}

.agent-month-day-card.is-outside-month {
    background: #f8fafc;
}

.agent-month-day-card.is-outside-month .agent-month-day-header {
    opacity: 0.65;
}

.agent-month-day-header {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    border-bottom: 1px solid #edf2f7;
    background: rgba(248, 250, 252, 0.85);
}

.agent-month-day-header span {
    color: #64748b;
    font-size: 0.78rem;
}

.agent-month-day-body {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    padding: 0.55rem;
    min-height: 105px;
}

.agent-month-entry {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.45rem;
    padding: 0.5rem 0.55rem;
    border-left-width: 4px;
}

.agent-month-entry .overview-entry-edit {
    grid-column: 1 / -1;
    justify-self: end;
}

.agent-month-entry-content {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.agent-month-entry-content small {
    overflow-wrap: anywhere;
}

.agent-month-day-card.is-drop-target {
    outline: 3px solid #2563eb;
    outline-offset: -3px;
    background: #eff6ff;
}

.agent-month-day-card.is-copy-target {
    outline-style: dashed;
    outline-color: #7c3aed;
    background: #f5f3ff;
}

.agent-month-day-card.is-drop-target .agent-month-day-header::after {
    content: 'Déplacer ici';
    margin-left: auto;
    color: #1d4ed8;
    font-size: 0.66rem;
    font-weight: 800;
}

.agent-month-day-card.is-copy-target .agent-month-day-header::after {
    content: 'Dupliquer ici';
    color: #6d28d9;
}

@media (max-width: 900px) {
    .agent-month-week-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .agent-month-week-header .button {
        width: 100%;
    }
}


/* ============================================================
   V5.12 - File de validation des plannings
   ============================================================ */
.pending-validation-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.validation-tab-badge {
    display: inline-grid;
    min-width: 1.55rem;
    height: 1.55rem;
    place-items: center;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: #b42318;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 900;
    line-height: 1;
}

.pending-validation-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.pending-summary-card {
    padding: 1rem 1.1rem;
    border: 1px solid #dbe3ee;
    border-radius: 14px;
    background: #f8fafc;
}

.pending-summary-card span,
.pending-summary-card small {
    display: block;
    color: #6b7280;
}

.pending-summary-card strong {
    display: block;
    margin: 0.15rem 0;
    color: #172033;
    font-size: 1.45rem;
}

.pending-validation-table-wrap {
    overflow-x: auto;
}

.pending-validation-table {
    width: 100%;
    min-width: 1040px;
    border-collapse: collapse;
}

.pending-validation-table th,
.pending-validation-table td {
    padding: 0.9rem 0.8rem;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: middle;
}

.pending-validation-table th {
    background: #f8fafc;
    color: #4b5563;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pending-validation-table td strong,
.pending-validation-table td small {
    display: block;
}

.pending-validation-table td small {
    margin-top: 0.2rem;
    color: #6b7280;
}

.pending-validation-row {
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.pending-validation-row:hover,
.pending-validation-row:focus {
    background: #fffaf0;
    outline: none;
    box-shadow: inset 4px 0 0 #b06a00;
}

.pending-count-chip {
    display: inline-grid;
    min-width: 2rem;
    height: 2rem;
    place-items: center;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: #fff4d6;
    color: #7d5c00;
    font-weight: 900;
}

.pending-validation-action-cell {
    text-align: right !important;
}

.pending-validation-action-cell .button {
    white-space: nowrap;
}

@media (max-width: 760px) {
    .pending-validation-summary {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   V5.13 - Contrôle de couverture des lieux
   ============================================================ */
.coverage-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.coverage-tab-badge {
    background: #b42318;
}

.coverage-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.coverage-summary-card {
    padding: 1rem 1.1rem;
    border: 1px solid #dbe3ee;
    border-radius: 14px;
    background: #f8fafc;
}

.coverage-summary-card span,
.coverage-summary-card small {
    display: block;
    color: #6b7280;
}

.coverage-summary-card strong {
    display: block;
    margin: 0.15rem 0;
    color: #172033;
    font-size: 1.45rem;
}

.coverage-summary-danger {
    border-color: #fecaca;
    background: #fff7f7;
}

.coverage-summary-danger strong {
    color: #b42318;
}

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

.coverage-table {
    width: 100%;
    min-width: 1050px;
    border-collapse: collapse;
}

.coverage-table th,
.coverage-table td {
    padding: 0.9rem 0.8rem;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: middle;
}

.coverage-table th {
    background: #f8fafc;
    color: #4b5563;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.coverage-table td strong,
.coverage-table td small {
    display: block;
}

.coverage-table td small {
    margin-top: 0.2rem;
    color: #6b7280;
}

.coverage-alert-row {
    background: #fffafa;
}

.coverage-missing-chip {
    display: inline-flex;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: #fee2e2;
    color: #991b1b;
    font-weight: 800;
}

.coverage-action-cell {
    text-align: right !important;
}

.coverage-unconfigured {
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid #f6d58b;
    border-radius: 12px;
    background: #fffbeb;
    color: #7c5b00;
}

.coverage-unconfigured strong,
.coverage-unconfigured p {
    display: block;
    margin: 0;
}

.coverage-unconfigured p {
    margin-top: 0.35rem;
    font-size: 0.88rem;
}

.coverage-inline-notice {
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid;
    border-radius: 12px;
}

.coverage-inline-notice strong,
.coverage-inline-notice span {
    display: block;
}

.coverage-inline-notice span {
    margin-top: 0.25rem;
    font-size: 0.88rem;
}

.coverage-inline-notice ul {
    margin: 0.55rem 0 0 1.1rem;
    padding: 0;
}

.coverage-inline-info {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1e40af;
}

.coverage-inline-success {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.coverage-inline-danger {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.coverage-rules-editor {
    display: grid;
    gap: 0.85rem;
    margin-top: 1rem;
}

.coverage-rule-day {
    border: 1px solid #dbe3ee;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.coverage-rule-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
}

.coverage-rule-day-ranges {
    display: grid;
    gap: 0.7rem;
    padding: 0.85rem;
}

.coverage-rule-row {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr) minmax(110px, 0.7fr) auto;
    gap: 0.7rem;
    align-items: end;
}

.coverage-rule-empty {
    margin: 0;
    color: #7b8794;
    font-size: 0.88rem;
}

.coverage-rules-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

@media (max-width: 900px) {
    .coverage-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .coverage-rule-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .coverage-summary,
    .coverage-rule-row {
        grid-template-columns: 1fr;
    }

    .coverage-rule-day-header {
        align-items: stretch;
        flex-direction: column;
    }
}

/* V5.14 - actions directes sur les créneaux de la vue par agent */
.agent-month-entry-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    justify-content: flex-end;
}

.agent-month-entry-actions .button {
    padding: 0.45rem 0.65rem;
    font-size: 0.78rem;
}


/* V5.15 - suppression déplacée dans la modale de modification de la vue agent */
.agent-entry-modal-actions {
    align-items: center;
}

@media (max-width: 760px) {
    .agent-entry-modal-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .agent-entry-modal-actions .modal-action-spacer {
        display: none;
    }
}

/* ============================================================
   V5.16 - Informations complémentaires des agents
   ============================================================ */
button, input, select, textarea { font: inherit; }

textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cfd8dc;
    border-radius: 10px;
    background: #fff;
    color: inherit;
    outline: none;
    resize: vertical;
}

textarea:focus {
    border-color: #607d8b;
    box-shadow: 0 0 0 3px rgba(96, 125, 139, 0.14);
}

textarea:disabled {
    background: #f3f5f6;
    color: #9aa4aa;
    cursor: not-allowed;
}

.agent-information-table .agent-row-qualification,
.agent-information-table .agent-row-phone,
.agent-information-table .agent-row-structure {
    min-width: 150px;
}

.agent-information-table td:last-child {
    width: 120px;
    text-align: right;
}

/* PTA V5.17 - Calendrier des vacances scolaires */
.vacation-api-note {
    margin: 0 0 1rem;
    padding: .9rem 1rem;
    border: 1px solid var(--border, #d9dee7);
    border-radius: 10px;
    background: #f7f9fc;
    line-height: 1.5;
}

.vacation-filters {
    align-items: end;
}

.vacation-preview-panel {
    margin-top: 1rem;
}

.compact-heading {
    gap: 1rem;
    align-items: center;
}

.vacation-select-all {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    white-space: nowrap;
    font-weight: 600;
}

.vacation-table input[type="text"],
.vacation-table input[type="date"] {
    min-width: 150px;
    width: 100%;
}

.vacation-table td small {
    display: block;
    margin-top: .3rem;
    color: #667085;
}

.vacation-source-badge,
.weekly-period-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    padding: .2rem .55rem;
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.2;
}

.vacation-source-badge {
    background: #eef2f7;
    color: #344054;
}

.weekly-period-badge.is-peri {
    background: #e8f1ff;
    color: #174ea6;
}

.weekly-period-badge.is-extra {
    background: #fff1dc;
    color: #9a4d00;
}

.weekly-period-detail {
    display: block;
    max-width: 150px;
    color: #667085;
    font-size: .72rem;
    line-height: 1.25;
}

.button-danger {
    border-color: #d92d20;
    color: #b42318;
    background: #fff;
}

.button-danger:hover {
    background: #fff1f0;
}

@media (max-width: 760px) {
    .compact-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ============================================================
   V5.19 - Application d'une semaine type sur une période
   ============================================================ */
.week-template-period-modal-card {
    width: min(1080px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: auto;
}

.week-template-period-grid {
    display: grid;
    grid-template-columns: minmax(240px, 1.5fr) repeat(2, minmax(170px, 0.8fr));
    gap: 1rem;
}

.week-template-period-rule-note {
    padding: 0.9rem 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    color: #334155;
    line-height: 1.5;
}

.week-template-period-preview-actions {
    display: flex;
    justify-content: flex-start;
}

.week-template-period-preview {
    display: grid;
    gap: 1rem;
    padding-top: 0.25rem;
}

.week-template-period-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.week-template-period-summary article {
    display: grid;
    gap: 0.25rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
}

.week-template-period-summary span {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.week-template-period-summary strong {
    font-size: 1.25rem;
}

.week-template-period-vacations,
.week-template-period-alert {
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid #dbe4ee;
    background: #f8fafc;
}

.week-template-period-vacations ul {
    margin: 0.55rem 0 0;
    padding-left: 1.2rem;
}

.week-template-period-alert.is-success {
    border-color: #a7d7b7;
    background: #effaf2;
    color: #166534;
}

.week-template-period-alert.is-warning {
    border-color: #f2d38a;
    background: #fff9e8;
    color: #854d0e;
}

.week-template-period-alert.is-error {
    border-color: #f0a8a8;
    background: #fff1f1;
    color: #991b1b;
}

.week-template-period-table-wrap {
    max-height: 360px;
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.week-template-period-table {
    margin: 0;
}

.week-template-period-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc;
}

@media (max-width: 820px) {
    .week-template-period-grid,
    .week-template-period-summary {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   V6 - Navigation multipage
   ============================================================ */
.view-tab {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.page-content {
    display: block;
}
.page-content > .card:first-child {
    margin-top: 0;
}

/* PTA V7 — synthèse annuelle et équipes */
.view-tabs { overflow-x: auto; flex-wrap: nowrap; }
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.summary-card { padding: 14px; border: 1px solid var(--border-color, #d8dee8); border-radius: 12px; background: #fff; display: grid; gap: 6px; }
.summary-card span { font-size: .82rem; color: #5f6b7a; }
.summary-card strong { font-size: 1.15rem; }
.summary-card small { color: #6b7280; }
.compact-summary { margin: 14px 0; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.control-list { display: grid; gap: 9px; }
.control-item { display: flex; gap: 12px; align-items: flex-start; padding: 11px 13px; border-radius: 10px; border-left: 5px solid #64748b; background: #f8fafc; }
.control-item strong { min-width: 68px; font-size: .78rem; }
.control-erreur { border-left-color: #b91c1c; background: #fef2f2; }
.control-alerte { border-left-color: #d97706; background: #fffbeb; }
.control-info { border-left-color: #2563eb; background: #eff6ff; }
.stack-list { display: grid; gap: 10px; margin-top: 16px; }
.stack-item { display: flex; justify-content: space-between; gap: 14px; align-items: center; border: 1px solid #dbe3ed; border-radius: 10px; padding: 12px; background: #fff; }
.stack-item p { margin: 4px 0 0; color: #64748b; }
.button-group { display: flex; gap: 8px; flex-wrap: wrap; }
.button-danger { background: #fff; color: #b91c1c; border: 1px solid #fecaca; }
.button-danger:hover { background: #fef2f2; }
.check-field { display: flex; align-items: center; gap: 8px; padding-top: 26px; }
.team-list { display: grid; gap: 18px; margin-top: 16px; }
.team-card { border: 1px solid #cbd5e1; }
.inline-form { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(170px, 1fr) minmax(180px, 2fr) auto; align-items: end; gap: 10px; margin: 16px 0; padding: 12px; background: #f8fafc; border-radius: 10px; }
@media (max-width: 900px) { .inline-form { grid-template-columns: 1fr; } .stack-item { align-items: flex-start; flex-direction: column; } }

/* ============================================================
   V7.2 - Vue annuelle de contrôle type tableau d'annualisation
   ============================================================ */
.annual-overview-page {
    --annual-border: #aab2b8;
    --annual-month: #f3c623;
    --annual-blue: #dcecf8;
    --annual-grey: #d5d5d5;
    --annual-dark-blue: #164a78;
}

.annual-filters {
    grid-template-columns: minmax(280px, 1.8fr) minmax(150px, 0.6fr) auto;
    align-items: end;
}

.annual-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.annual-sheet {
    margin-bottom: 24px;
    border: 1px solid #b9c1c7;
    background: #fff;
    box-shadow: 0 8px 28px rgba(23, 32, 42, 0.09);
}

.annual-sheet:fullscreen {
    overflow: auto;
    padding: 14px;
    background: #fff;
}

.annual-sheet-header {
    border-bottom: 1px solid var(--annual-border);
    background: #fff;
}

.annual-title-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 70px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--annual-border);
}

.annual-title-row h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.3rem, 2.5vw, 2rem);
    letter-spacing: 0.04em;
    text-align: center;
}

.annual-direction,
.annual-updated {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
}

.annual-updated { text-align: right; }

.annual-identity-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid var(--annual-border);
}

.annual-identity-grid > div {
    min-height: 56px;
    padding: 8px 12px;
    border-right: 1px solid #d7dcdf;
    border-bottom: 1px solid #d7dcdf;
}

.annual-identity-grid > div:nth-child(4n) { border-right: 0; }
.annual-identity-grid > div:nth-last-child(-n + 4) { border-bottom: 0; }
.annual-identity-grid span { display: block; margin-bottom: 4px; color: #5e6a71; font-size: 0.72rem; }
.annual-identity-grid strong { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88rem; }

.annual-quota-periods {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 14px;
    background: #f6f8f9;
    border-bottom: 1px solid var(--annual-border);
}

.annual-quota-chip {
    min-width: 245px;
    padding: 8px 10px;
    border: 1px solid #cfd6da;
    border-radius: 8px;
    background: #fff;
}

.annual-quota-chip span,
.annual-quota-chip small { display: block; color: #647178; font-size: 0.7rem; }
.annual-quota-chip strong { display: block; margin: 3px 0; font-size: 0.76rem; }

.annual-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
}
.annual-toolbar p { margin: 0 0 0 auto; color: #66737d; font-size: 0.78rem; }

.annual-summary-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid var(--annual-border);
    background: #f5f7f8;
}
.annual-summary-strip article { padding: 10px 14px; border-right: 1px solid #d7dcdf; }
.annual-summary-strip article:last-child { border-right: 0; }
.annual-summary-strip span { display: block; color: #65737b; font-size: 0.7rem; }
.annual-summary-strip strong { font-size: 0.9rem; }

.annual-grid-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    background: #fff;
    scrollbar-color: #71808a #e9edef;
    scrollbar-width: auto;
}

.annual-months {
    display: flex;
    align-items: flex-start;
    width: max-content;
    min-width: 100%;
}

.annual-month {
    width: 280px;
    flex: 0 0 280px;
    border-right: 2px solid #7f8a91;
}
.annual-month:last-child { border-right: 0; }

.annual-month table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
}

.annual-month th,
.annual-month td {
    height: 24px;
    padding: 2px 3px;
    border: 1px solid var(--annual-border);
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.annual-month-title {
    position: sticky;
    top: 0;
    z-index: 3;
    height: 30px !important;
    background: var(--annual-month);
    color: #111;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.annual-column-headings th {
    position: sticky;
    top: 30px;
    z-index: 2;
    background: #f8fafb;
    font-weight: 900;
}

.annual-column-headings th:first-child { width: 37px; }
.annual-column-headings th:nth-child(2) { width: 26px; }

.annual-day-cell {
    width: 37px;
    background: #fff;
    font-weight: 800;
    cursor: pointer;
}
.annual-day-cell span { margin-right: 3px; color: #78848b; font-size: 8px; }
.annual-week-cell {
    width: 26px;
    background: #3d7fb9;
    color: #fff;
    font-weight: 800;
}

.annual-data-cell {
    cursor: pointer;
    font-weight: 700;
    transition: outline 0.1s ease, filter 0.1s ease;
}
.annual-month tbody tr:hover .annual-data-cell,
.annual-month tbody tr:hover .annual-day-cell { outline: 2px solid rgba(22, 74, 120, 0.35); outline-offset: -2px; }
.annual-month tbody tr:hover .annual-data-cell { filter: brightness(0.97); }

.annual-weekend td,
.annual-weekend .annual-day-cell { background: var(--annual-grey); color: #6a7175; }
.annual-vacation-row .annual-day-cell { background: #c9e3f7; }
.annual-vacation-row .annual-data-cell { background: #e8f4fc; }

.annual-work { background: #e8f4fc !important; color: #123c5d; }
.annual-extra { background: #cfe5f6 !important; color: #123c5d; }
.annual-preparation { background: #fff0a8 !important; color: #5b4b00; }
.annual-training { background: #dcc8f5 !important; color: #4d2675; }
.annual-leave { background: #cfe9c8 !important; color: #29552a; }
.annual-absence { background: #f6c4c4 !important; color: #8b1919; }
.annual-other-absence { background: #cfd5da !important; color: #37434b; }
.annual-jnt { background: #f7d7dc !important; color: #b11f35; }
.annual-fraction { background: #d52020 !important; color: #fff; }
.annual-cell-draft { box-shadow: inset 0 0 0 2px #f09b24; }

.annual-month tfoot th,
.annual-month tfoot td {
    height: 30px;
    background: #f7c8d3;
    font-weight: 900;
}

.annual-sheet-footer {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--annual-border);
    background: #f8fafb;
}

.annual-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-bottom: 10px;
}
.annual-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; }
.annual-legend-item i { width: 15px; height: 15px; border: 1px solid #9ba5aa; border-radius: 3px; }
.annual-abbreviations { display: flex; flex-wrap: wrap; gap: 8px 16px; color: #59666e; font-size: 0.72rem; }

@media (max-width: 900px) {
    .annual-filters { grid-template-columns: 1fr; }
    .annual-identity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .annual-identity-grid > div:nth-child(4n) { border-right: 1px solid #d7dcdf; }
    .annual-identity-grid > div:nth-child(2n) { border-right: 0; }
    .annual-summary-strip { grid-template-columns: repeat(2, 1fr); }
    .annual-title-row { grid-template-columns: 1fr; text-align: center; }
    .annual-updated { text-align: center; }
    .annual-toolbar { align-items: stretch; flex-direction: column; }
    .annual-toolbar p { margin-left: 0; }
}

@media print {
    @page { size: A3 landscape; margin: 7mm; }
    body { background: #fff; }
    .app-shell { width: 100%; max-width: none; margin: 0; padding: 0; }
    .page-header, .view-tabs, .no-print { display: none !important; }
    .annual-sheet { border: 0; box-shadow: none; margin: 0; }
    .annual-grid-scroll { overflow: visible; }
    .annual-months { display: grid; grid-template-columns: repeat(6, 1fr); width: 100%; }
    .annual-month { width: auto; min-width: 0; border-right: 1px solid #555; break-inside: avoid; }
    .annual-month:nth-child(6n) { border-right: 0; }
    .annual-month table { font-size: 6.8px; }
    .annual-month th, .annual-month td { height: 14px; padding: 0 1px; }
    .annual-month-title, .annual-column-headings th { position: static; }
    .annual-month-title { height: 18px !important; }
    .annual-sheet-footer { padding: 5px 8px; }
    .annual-legend-item, .annual-abbreviations { font-size: 6.5px; }
}

/* ============================================================
   PTA V7.4 - Choix de rôle et contexte d'accès
   ============================================================ */
.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.access-profile-badge {
    display: grid;
    gap: 1px;
    min-width: 190px;
    padding: 9px 12px;
    border: 1px solid #d8e0e5;
    border-radius: 12px;
    background: #f7fafb;
    line-height: 1.2;
}
.access-profile-badge span {
    color: #607079;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.access-profile-badge strong { color: #17384e; font-size: 0.88rem; }
.access-profile-badge small { color: #66767f; font-size: 0.72rem; }
.switch-role-link { white-space: nowrap; }

.nav-count-badge {
    display: inline-flex;
    min-width: 19px;
    height: 19px;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    padding: 0 5px;
    border-radius: 999px;
    background: #c72f3f;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
}
.role-access-warning,
.role-page-notice { margin: 0 0 16px; }
.entry-locked {
    display: inline-flex;
    align-items: center;
    padding: 4px 7px;
    border-radius: 999px;
    background: #edf1f3;
    color: #69777e;
    font-size: 0.68rem;
    font-weight: 800;
}

.role-page-body {
    min-height: 100vh;
    margin: 0;
    padding: 28px 16px;
    background:
        radial-gradient(circle at 15% 15%, rgba(40, 121, 167, 0.15), transparent 34%),
        radial-gradient(circle at 85% 85%, rgba(62, 143, 103, 0.12), transparent 30%),
        #eef3f5;
    color: #1f303a;
}
.role-page-shell {
    width: min(980px, 100%);
    margin: 0 auto;
    padding: 30px;
    border: 1px solid #d7e0e5;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 55px rgba(27, 58, 76, 0.13);
}
.role-intro { margin-bottom: 22px; text-align: center; }
.role-intro h1 { margin: 3px 0 8px; font-size: clamp(1.75rem, 4vw, 2.45rem); }
.role-intro > p:not(.eyebrow) { margin: 0 auto; max-width: 650px; color: #61717a; }
.role-current-profile {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin-top: 14px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #edf5f8;
    color: #31556a;
    font-size: 0.82rem;
}
.role-selection-form { display: grid; gap: 18px; }
.role-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.role-choice-card { position: relative; cursor: pointer; }
.role-choice-card input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.role-choice-content {
    display: grid;
    align-content: start;
    min-height: 150px;
    padding: 20px;
    border: 2px solid #dce4e8;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 15px rgba(25, 54, 69, 0.05);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.role-choice-card:hover .role-choice-content {
    transform: translateY(-2px);
    border-color: #9cbccd;
    box-shadow: 0 10px 24px rgba(25, 54, 69, 0.1);
}
.role-choice-card input:focus-visible + .role-choice-content {
    outline: 3px solid rgba(25, 113, 164, 0.25);
    outline-offset: 3px;
}
.role-choice-card input:checked + .role-choice-content {
    border-color: #1971a4;
    background: #f0f8fc;
    box-shadow: 0 0 0 4px rgba(25, 113, 164, 0.1);
}
.role-choice-content strong { margin-bottom: 9px; color: #163d55; font-size: 1.03rem; }
.role-choice-content small { color: #5e6f79; font-size: 0.82rem; line-height: 1.5; }
.role-context-card {
    padding: 18px;
    border: 1px solid #d8e2e7;
    border-radius: 14px;
    background: #f8fafb;
}
.role-context-card[hidden] { display: none; }
.role-form-actions { display: flex; justify-content: center; }
.role-form-actions .button { min-width: 210px; }
.role-security-note {
    margin-top: 20px;
    padding: 13px 15px;
    border-left: 4px solid #d9911e;
    border-radius: 8px;
    background: #fff8e8;
    color: #664d21;
    font-size: 0.79rem;
    line-height: 1.5;
}

@media (max-width: 850px) {
    .page-header { align-items: flex-start; }
    .header-actions { justify-content: flex-start; width: 100%; }
    .access-profile-badge { flex: 1 1 220px; }
    .role-choice-grid { grid-template-columns: 1fr; }
    .role-choice-content { min-height: 0; }
}

@media (max-width: 560px) {
    .role-page-body { padding: 12px 8px; }
    .role-page-shell { padding: 20px 14px; border-radius: 16px; }
    .header-actions { align-items: stretch; }
    .header-actions > * { width: 100%; }
    .switch-role-link { justify-content: center; }
}

/* PTA V7.7 - Validation annuelle depuis la vue de contrôle */
.annual-validation-card {
    margin: 18px 12px 12px;
    padding: 18px;
    border: 1px solid #d7dde1;
    border-radius: 12px;
    background: #fff;
}
.annual-validation-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.annual-validation-heading h3 { margin: 2px 0 4px; }
.annual-validation-heading p { margin: 0; }
.annual-validation-note {
    margin: 12px 0 0;
    font-size: .88rem;
    color: #56616a;
}
.annual-validation-result { margin-top: 14px; }
.annual-validation-summary {
    padding: 12px 14px;
    border-radius: 9px;
    background: #f4f7f8;
    border: 1px solid #d9e0e4;
}
.annual-validation-summary.is-error { background: #fff3f2; border-color: #e7b7b2; }
.annual-validation-summary.is-success { background: #f0f8f2; border-color: #b9d8bf; }
.annual-validation-summary.is-warning { background: #fff8e8; border-color: #e5cf96; }
.annual-validation-issues {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}
.annual-validation-issue {
    padding: 12px;
    border: 1px solid #e0c0bc;
    border-radius: 9px;
    background: #fff;
}
.annual-validation-issue header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.annual-validation-issue h4 { margin: 0; font-size: .98rem; }
.annual-validation-issue ul { margin: 6px 0 10px 20px; padding: 0; }
.annual-validation-issue li { margin: 4px 0; }
.annual-validation-open-link::after { content: ' ↗'; }
@media (max-width: 760px) {
    .annual-validation-heading,
    .annual-validation-issue header { align-items: stretch; flex-direction: column; }
}
@media print {
    .annual-validation-card { display: none !important; }
}