* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background: linear-gradient(135deg, #ffffff 0%, #838383 100%);
    min-height: 100vh;
    padding: 10px;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    overflow: hidden;
}

.header {
    background: linear-gradient(135deg, #0867c7 0%, #05407a 100%);
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.header h1 {
    font-size: 24px;
    font-weight: 600;
}

.mode-switch {
    display: flex;
    gap: 10px;
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s;
}

.btn-primary {
    background: white;
    color: #0a4d8f;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.btn-secondary {
    background: rgba(255,255,255,0.2);
    color: white;
    border: 1px solid white;
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.3);
}

.navigation {
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #f0f0f0;
    flex-wrap: wrap;
    gap: 15px;
    background: linear-gradient(to right, #e3f2fd 0%, #bbdefb 100%);
}

.week-nav {
    display: flex;
    align-items: center;
    gap: 15px;
}

.week-nav button {
    background: #1e88e5;
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s;
    flex-shrink: 0;
}

.week-nav button:hover:not(:disabled) {
    background: #0a4d8f;
    transform: scale(1.1);
}

.week-nav button:disabled {
    background: #90caf9;
    cursor: not-allowed;
    opacity: 0.5;
}

.week-info {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.week-dates {
    color: #666;
    font-size: 13px;
    font-weight: normal;
}

.admin-controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.planning-grid {
    padding: 15px;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    min-width: 900px;
}

th {
    background: #f8f9fa;
    padding: 12px 8px;
    text-align: center;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #dee2e6;
    position: sticky;
    top: 0;
    z-index: 10;
    font-size: 13px;
    transition: background 0.3s;
}

th:first-child {
    text-align: left;
}

th:last-child {
    text-align: right;
}

th.today-column {
    background: linear-gradient(135deg, #fff3cd 0%, #ffe082 100%);
    border-left: 3px solid #ffc107;
    border-right: 3px solid #ffc107;
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.3);
}

th.past-column {
    background: #e9ecef;
    opacity: 0.6;
}

.day-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.day-name {
    font-weight: 600;
}

.day-date {
    font-size: 11px;
    color: #666;
    font-weight: normal;
}

td {
    padding: 8px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: top;
    transition: background 0.3s;
}

td.today-column {
    background: linear-gradient(135deg, #fffbf0 0%, #fff8e1 100%);
    border-left: 3px solid #ffc107;
    border-right: 3px solid #ffc107;
}

td.past-column {
    background: #f5f5f5;
    opacity: 0.6;
}

.employee-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}

.employee-photo {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    background: #1e88e5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 16px;
    flex-shrink: 0;
}

.employee-info {
    display: flex;
    flex-direction: column;
}

.employee-name {
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.employee-team {
    font-size: 11px;
    color: #666;
}

.employee-position {
    font-size: 11px;
    color: #666;
}


.day-cell {
    display: flex !important;
    flex-direction: column !important;
    min-width: 110px;
    min-height: 90px;
    background: transparent;
    border-radius: 8px;
    padding: 8px !important;
    gap: 8px !important;
    transition: background 0.3s;
}

.shift {
    color: white;
    padding: 6px 8px;
    margin: 0 !important;
    border-radius: 6px;
    cursor: move;
    font-size: 11px;
    transition: all 0.3s;
    position: relative;
    background: #1e88e5;
    border: 2px solid #1976d2;
    display: block !important;
    width: 100%;
    box-sizing: border-box;
}

.shift.absent {
    background: #f44336 !important;
    border: 2px solid #e53935 !important;
}

.shift.absent::before {
    content: '🌈 ';
}

.shift:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 136, 229, 0.4);
}

.shift.clickable {
    cursor: pointer;
}

.shift.clickable:hover {
    box-shadow: 0 6px 16px rgba(30, 136, 229, 0.6);
}

.shift.not-allowed {
    cursor: not-allowed;
    opacity: 0.7;
}

.shift-time {
    font-weight: 600;
    margin-bottom: 2px;
}

.shift-break {
    font-size: 10px;
    opacity: 0.9;
}

.shift-hours {
    font-size: 10px;
    opacity: 0.9;
}
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: white;
    padding: 25px;
    border-radius: 15px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.modal-content.large {
    max-width: 800px;
}

.modal-header {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.close-modal {
    background: #e9ecef;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    flex-shrink: 0;
}

.close-modal:hover {
    background: #dc3545;
    color: white;
    transform: rotate(90deg);
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #555;
    font-size: 14px;
}

.form-group input, .form-group select {
    width: 100%;
    padding: 10px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s;
}

.form-group input:focus, .form-group select:focus {
    outline: none;
    border-color: #1e88e5;
}

.form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 25px;
    flex-wrap: wrap;
}

.btn-success {
    background: #28a745;
    color: white;
}

.btn-success:hover {
    background: #218838;
}

.btn-danger {
    background: #dc3545;
    color: white;
}

.btn-danger:hover {
    background: #c82333;
}

.btn-warning {
    background: #ffc107;
    color: #333;
}

.btn-warning:hover {
    background: #e0a800;
}

.total-hours {
    text-align: right;
    font-weight: 600;
    color: #1e88e5;
    font-size: 14px;
}

.employee-list {
    display: grid;
    gap: 15px;
    margin-top: 20px;
}

.employee-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s;
}

.employee-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.employee-card.archived {
    opacity: 0.5;
}

.employee-card-photo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    background: #1e88e5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 24px;
    flex-shrink: 0;
}

.employee-card-info {
    flex: 1;
}

.employee-card-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.employee-card-team {
    font-size: 13px;
    color: #666;
}

.employee-card-actions {
    display: flex;
    gap: 8px;
}

.btn-icon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 16px;
}

.btn-edit {
    background: #1e88e5;
    color: white;
}

.btn-edit:hover {
    background: #0d47a1;
    transform: scale(1.1);
}

.btn-archive {
    background: #ffc107;
    color: #333;
}

.btn-archive:hover {
    background: #e0a800;
    transform: scale(1.1);
}

.btn-activate {
    background: #28a745;
    color: white;
}

.btn-activate:hover {
    background: #218838;
    transform: scale(1.1);
}

.history-item {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    border-left: 4px solid #1e88e5;
}

.history-item.delete {
    border-left-color: #dc3545;
}

.history-item.modify {
    border-left-color: #ffc107;
}

.history-date {
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
}

.history-user {
    font-weight: 600;
    color: #0a4d8f;
    margin-bottom: 5px;
}

.history-details {
    font-size: 13px;
    color: #333;
}

.team-separator {
    background: linear-gradient(to right, #e3f2fd, #bbdefb);
    padding: 10px 15px;
    font-weight: 600;
    color: #0a4d8f;
    font-size: 14px;
}

.admin-list {
    display: grid;
    gap: 10px;
}

.admin-item {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.delete-zone-inline {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    border: 2px dashed rgba(255, 255, 255, 0.6);
    transition: all 0.3s;
}

.delete-zone-inline.drag-over {
    transform: scale(1.1);
    border-color: white;
    box-shadow: 0 5px 20px rgba(220, 53, 69, 0.6);
}
/* Responsive pour mobile */
@media (max-width: 768px) {
    .container {
        padding: 0;
        border-radius: 0;
    }
    
    .header {
        flex-direction: column;
        padding: 15px;
    }
    
    .navigation {
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }
    
    .week-nav {
        width: 100%;
        justify-content: center;
    }
    
    .admin-controls {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .planning-grid {
        padding: 5px;
        overflow-x: auto;
    }
    
    table {
        min-width: 100%;
        font-size: 12px;
    }
    
    th, td {
        padding: 8px 4px;
    }
    
    .employee-cell {
        min-width: 120px;
    }
    
    .employee-photo {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
    
    .employee-name {
        font-size: 13px;
    }
    
    .employee-team {
        font-size: 10px;
    }

        .employee-position {
        font-size: 10px;
    }
    
    .day-cell {
        min-width: 100%;
        min-height: 80px;
    }
    
    .shift {
        font-size: 11px;
        padding: 5px 6px;
    }
    
    .shift-time {
        font-size: 11px;
    }
    
    .shift-break {
        font-size: 9px;
    }
    
    .total-hours {
        font-size: 13px;
    }
    
    .btn {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .delete-zone-inline {
        padding: 8px 12px;
        font-size: 12px;
    }
}
/* Styles pour les zones de service séparées */

.day-cell {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 60px;
    padding: 8px;
}

.service-zone {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.5);
    position: relative;
}

/* Zone service midi (avant 17h) */
.service-zone-midi {
    border-left: 3px solid #FF9800; /* Orange pour le midi/soleil */
    background: linear-gradient(to right, rgba(255, 152, 0, 0.08), transparent);
}

.service-zone-midi::before {
    content: '☀️';
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 10px;
    opacity: 0.6;
}

/* Zone service soir (après 17h) */
.service-zone-soir {
    border-left: 3px solid #3F51B5; /* Bleu pour le soir/lune */
    background: linear-gradient(to right, rgba(63, 81, 181, 0.08), transparent);
}

.service-zone-soir::before {
    content: '🌙';
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 10px;
    opacity: 0.6;
}

/* Shifts individuels */
.shift {
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 13px;
    transition: all 0.2s;
    margin-left: 16px; /* Espace pour l'icône */
}

.shift:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.shift.service-midi {
    border-left: 2px solid #FF9800;
}

.shift.service-soir {
    border-left: 2px solid #3F51B5;
}

.shift.absent {
    background: #ffebee;
    border-color: #f44336;
    opacity: 0.7;
}

.shift-time {
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.shift-hours {
    font-size: 11px;
    color: #666;
}

/* Ajustements pour le drag & drop */
.shift[draggable="true"] {
    cursor: grab;
}

.shift[draggable="true"]:active {
    cursor: grabbing;
}

/* Responsive - mobile */
@media (max-width: 768px) {
    .service-zone {
        padding: 4px;
    }
    
    .shift {
        padding: 4px 6px;
        font-size: 12px;
        margin-left: 12px;
    }
    
    .service-zone-midi::before,
    .service-zone-soir::before {
        font-size: 9px;
    }
}

/* Animation au chargement */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.service-zone {
    animation: slideIn 0.3s ease-out;
}

/* Séparateur visuel entre les zones */
.service-zone-midi + .service-zone-soir {
    margin-top: 4px;
}

/* État de survol de la zone pendant le drag & drop */
.day-cell[style*="background-color"] .service-zone {
    background: rgba(76, 175, 80, 0.15);
}

/* Amélioration visuelle pour les cellules vides */
.day-cell:empty::after {
    content: '➕';
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 18px;
    opacity: 0;
    transition: opacity 0.2s;
}

.day-cell:empty:hover::after {
    opacity: 0.5;
}

/* Style pour le mode admin */
[data-admin-mode="true"] .day-cell {
    cursor: pointer;
}

[data-admin-mode="true"] .day-cell:hover {
    background: rgba(76, 175, 80, 0.05);
}



/* ===== ZONES DE SERVICE - STYLES PRIORITAIRES ===== */

.service-zone {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 8px 8px 8px 24px !important;
    border-radius: 6px !important;
    position: relative !important;
    margin-bottom: 6px !important;
    min-height: 40px !important;
}

/* Zone service midi (avant 17h) - ORANGE */
.service-zone-midi {
    border-left: 4px solid #FF9800 !important;
    background: linear-gradient(to right, rgba(255, 152, 0, 0.15), rgba(255, 152, 0, 0.05)) !important;
}

.service-zone-midi::before {
    content: '☀️' !important;
    position: absolute !important;
    top: 6px !important;
    left: 4px !important;
    font-size: 16px !important;
    z-index: 1 !important;
}

/* Zone service soir (après 17h) - BLEU FONCÉ */
.service-zone-soir {
    border-left: 4px solid #3F51B5 !important;
    background: linear-gradient(to right, rgba(63, 81, 181, 0.15), rgba(63, 81, 181, 0.05)) !important;
}

.service-zone-soir::before {
    content: '🌙' !important;
    position: absolute !important;
    top: 6px !important;
    left: 4px !important;
    font-size: 16px !important;
    z-index: 1 !important;
}

/* Couleurs différentes pour les shifts selon la zone */
.service-zone-midi .shift {
    background: #FF9800 !important;
    border: 2px solid #F57C00 !important;
}

.service-zone-soir .shift {
    background: #3F51B5 !important;
    border: 2px solid #303F9F !important;
}

/* Animation au chargement */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.service-zone {
    animation: slideIn 0.3s ease-out;
}

/* Séparateur visuel entre les zones */
.service-zone-midi + .service-zone-soir {
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px dashed rgba(0, 0, 0, 0.1);
}
/* ==================== STYLES NOTES DU JOUR ==================== */

/* Icône de note du jour dans le header */
.day-note-icon {
    display: inline-block;
    font-size: 18px;
    cursor: pointer;
    margin-top: 5px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.3s ease;
    opacity: 0.3;
}

/* Icône grisée (mode visualisation, pas de note) */
.day-note-icon:not(.admin):not(.active) {
    opacity: 0.3;
    filter: grayscale(100%);
    cursor: default;
    pointer-events: none;
}

/* Icône active (a du contenu) */
.day-note-icon.active {
    opacity: 1;
    background: rgba(30, 136, 229, 0.1);
}

.day-note-icon.active:hover {
    background: rgba(30, 136, 229, 0.2);
    transform: scale(1.1);
}

/* Icône en mode admin (toujours visible et cliquable) */
.day-note-icon.admin {
    opacity: 0.8;
    background: rgba(76, 175, 80, 0.1);
}

.day-note-icon.admin:hover {
    opacity: 1;
    background: rgba(76, 175, 80, 0.2);
    transform: scale(1.1);
}

/* Sections dans le modal de notes */
.note-section {
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #1e88e5;
}

.note-section h4 {
    margin: 0 0 10px 0;
    color: #0a4d8f;
    font-size: 16px;
    font-weight: 600;
}

.note-content {
    color: #333;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Style pour les textarea dans le modal */
#dayNoteModal textarea {
    width: 100%;
    padding: 10px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    transition: border-color 0.3s;
}

#dayNoteModal textarea:focus {
    outline: none;
    border-color: #1e88e5;
}

/* Message "aucune note" */
#noNoteMessage {
    padding: 40px 20px;
    text-align: center;
    color: #999;
    font-style: italic;
}

/* Ajustement du header de jour pour contenir l'icône */
.day-header {
    position: relative;
    padding-bottom: 10px;
}

.day-name {
    font-weight: 600;
    margin-bottom: 2px;
}

.day-date {
    font-size: 12px;
    opacity: 0.8;
}

/* Responsive */
@media (max-width: 768px) {
    .day-note-icon {
        font-size: 16px;
        padding: 3px 6px;
    }
    
    .note-section {
        padding: 12px;
    }
    
    .note-section h4 {
        font-size: 14px;
    }
}

/* ==================== STYLES VALIDATION DES SEMAINES ==================== */

/* Badge de statut de la semaine */
.week-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 10px;
    vertical-align: middle;
}

.week-status.validated {
    background: #4caf50;
    color: white;
}

.week-status.draft {
    background: #ff9800;
    color: white;
    animation: pulse 2s ease-in-out infinite;
}

.week-status.past {
    background: #9e9e9e;
    color: white;
}

/* Animation du badge brouillon */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

/* Planning en mode brouillon */
.planning-grid.draft-mode {
    position: relative;
}

.planning-grid.draft-mode::before {
    content: '⚠️ BROUILLON - Planning en construction';
    display: block;
    text-align: center;
    background: #ff9800;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
    animation: pulse 3s ease-in-out infinite;
}

.planning-grid.draft-mode table {
    opacity: 0.85;
}

/* Styles pour le bouton de validation */
.btn-warning {
    background: #ff9800;
    color: white;
}

.btn-warning:hover {
    background: #f57c00;
}

/* Week-info avec états */
.week-info.week-validated {
    border-left: 4px solid #4caf50;
    padding-left: 10px;
}

.week-info.week-not-validated {
    border-left: 4px solid #ff9800;
    padding-left: 10px;
}

/* Responsive */
@media (max-width: 768px) {
    .week-status {
        display: block;
        margin: 5px 0 0 0;
        text-align: center;
    }
    
    .planning-grid.draft-mode::before {
        font-size: 12px;
        padding: 8px 16px;
        margin-bottom: 10px;
    }
}

/* Stats employé (CP et Modulation) */
.employee-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    margin-top: 4px;
    padding: 4px 8px;
    background: #f8f9fa;
    border-radius: 4px;
    flex-wrap: wrap;
}

.stat-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    transition: background 0.2s;
}

.stat-item:hover {
    background: #e9ecef;
}

.stat-item strong {
    font-weight: 600;
    color: #495057;
}

.stat-value {
    color: #007bff;
    font-weight: 700;
}


.modulation-stat .stat-value {
    color: #fd7e14;
}

.stat-date {
    font-size: 9px;
    color: #6c757d;
    font-style: italic;
    margin-left: 2px;
}

.stat-separator {
    color: #dee2e6;
    font-weight: 300;
}

/* Zones CP dans les cellules de jour */
.day-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Amélioration de l'info cell pour accueillir les stats */
.employee-info-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
}

.employee-name-section {
    display: flex;
    align-items: center;
    gap: 8px;
}

.employee-text-info {
    display: flex;
    flex-direction: column;
}

.employee-name {
    font-weight: 600;
    font-size: 13px;
    color: #212529;
}

.employee-position {
    font-size: 11px;
    color: #6c757d;
}

/* Responsive */
@media (max-width: 768px) {
    .employee-stats {
        font-size: 10px;
        padding: 3px 6px;
        gap: 6px;
    }
    
    .stat-date {
        display: none;
    }
    
}

/* ==================== STYLES INDISPONIBILITÉS ==================== */
.unavailable-day {
    background: repeating-linear-gradient(
        45deg,
        #ffebee,
        #ffebee 10px,
        #ffcdd2 10px,
        #ffcdd2 20px
    ) !important;
    position: relative;
}

.unavailable-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #c62828;
    font-weight: bold;
    font-size: 11px;
    background: rgba(255, 255, 255, 0.8);
    padding: 2px 5px;
    border-radius: 4px;
    border: 1px solid #c62828;
    pointer-events: none; /* Permet de cliquer à travers */
    z-index: 5;
}

/* ==================== STYLES D'IMPRESSION FINAL (CORRIGÉ) ==================== */
@media print {
    @page {
        size: landscape;
        margin: 5mm;
    }

    body {
        background: white;
        padding: 0;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .container {
        box-shadow: none;
        max-width: 100%;
        width: 100%;
        border: none;
    }

    /* --- ÉLÉMENTS À MASQUER --- */
    .mode-switch, 
    .navigation button, 
    .week-nav button,
    .admin-controls, 
    .btn,
    .day-note-icon,
    .employee-stats,
    #deleteZone,
    .modal,
    .week-status, /* On masque le statut ici */
    .unavailable-label
    {
        display: none !important;
    }

    /* --- HEADER & TITRES --- */
    .header {
        padding: 10px;
        background: #0a4d8f !important;
        color: white !important;
        margin-bottom: 5px;
        justify-content: center;
    }

    .header h1 {
        font-size: 16px;
        margin: 0;
    }

    .navigation {
        border: none;
        background: none;
        padding: 5px 0;
        margin-bottom: 10px;
        justify-content: center;
    }

    .week-nav {
        width: 100%;
        justify-content: center;
    }

    /* --- CORRECTION ICI --- */
    /* On force l'affichage du conteneur et des dates */
    .week-info, 
    .week-dates {
        display: inline-block !important;
        color: #333 !important;
        font-size: 14px !important;
        font-weight: bold;
    }

    /* On force l'affichage des SPANS du titre (ex: Numéro semaine) */
    /* MAIS on exclut explicitement le badge de statut (.week-status) */
    .week-info span:not(.week-status) {
        display: inline-block !important;
    }

    .week-dates {
        margin-left: 10px;
    }

    /* --- TABLEAU & CONTENU --- */
    table { 
        font-size: 10px; 
        width: 100%;
        border-collapse: collapse;
    }
    
    td, th { padding: 2px; }
    
    .employee-photo {
        width: 30px; height: 30px; font-size: 10px;
    }
    
    .service-cell {
        min-height: 40px !important;
        height: auto !important;
    }

    /* --- RÈGLES ANTI-COUPURE --- */
    tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    td, th {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    tr:has(.team-separator) {
        break-after: avoid;
        page-break-after: avoid;
    }
    
    tbody {
        break-inside: auto;
    }

    /* Indisponibilités */
    .unavailable-day {
        background: repeating-linear-gradient(
            45deg,
            #ffebee,
            #ffebee 10px,
            #ffcdd2 10px,
            #ffcdd2 20px
        ) !important;
        -webkit-print-color-adjust: exact; 
        print-color-adjust: exact;
    }

    /* Forcer les couleurs de fond */
    .shift, .service-zone-midi, .service-zone-soir, th.today-column, td.today-column {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    .shift {
        border: 1px solid #000; 
        color: black !important;
    }
}

/* --- NOUVEAU CSS POUR PREVISUALISATION PHOTO --- */
    
    /* Correction pour permettre à l'image de dépasser du tableau */
    .shifts-table { 
        overflow: visible !important; 
    }

    /* Le lien qui contient la photo */
    .photo-link {
        position: relative; /* Sert de point de repère pour l'image */
        text-decoration: none;
        color: #3498db;
        font-weight: bold;
        cursor: pointer;
    }
    
    .photo-link:hover {
        color: #2980b9;
        text-decoration: underline;
    }

    /* L'image elle-même (cachée par défaut) */
    .photo-preview {
        display: none; /* Caché */
        position: absolute;
        bottom: 100%; /* Apparaît au-dessus du texte */
        left: 50%;
        transform: translateX(-50%); /* Centré par rapport au texte */
        
        width: 200px; /* Largeur de la prévisualisation */
        height: auto;
        background: white;
        padding: 5px;
        border: 1px solid #ccc;
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        border-radius: 6px;
        z-index: 9999; /* Au-dessus de tout */
        pointer-events: none; /* La souris passe au travers */
    }

    /* Afficher l'image quand on survole le lien */
    .photo-link:hover .photo-preview {
        display: block;
    }

    /* Calque de visée (Silhouette) */
.face-overlay {
    position: absolute;
    top: 45%; /* Un peu plus haut que le centre pour le buste */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;  /* Largeur du visage */
    height: 260px; /* Hauteur du visage */
    border: 3px dashed rgba(255, 255, 255, 0.6); /* Bordure en pointillés */
    border-radius: 50% 50% 45% 45%; /* Forme ovale/tête */
    box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.6); /* Assombrit tout le reste autour ! */
    pointer-events: none; /* Permet de cliquer à travers si besoin */
    z-index: 10;
}

/* Petit texte d'aide sous le cadre */
.face-overlay::after {
    content: "Placez votre visage ici";
    display: block;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    margin-top: 270px; /* Place le texte sous l'ovale */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* --- NOUVEAUX STYLES STATS COMPACTES --- */

.employee-stats-container {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 6px;
    margin-top: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Info Départ */
.start-balance-info {
    font-size: 10px;
    color: #666;
}

.start-balance-info .value { font-weight: 700; }
.start-balance-info .value.pos { color: #27ae60; }
.start-balance-info .value.neg { color: #e74c3c; }

/* Barre de progression */
.progress-bar-container {
    width: 100%;
    height: 8px; /* Plus fin */
    background: #f1f3f4;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    border: 1px solid #e0e0e0;
    margin-bottom: 5px;
}

.target-marker {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 2px;
    background: rgba(0,0,0,0.3);
    z-index: 5;
}

.bar-real {
    background: #34495e;
    height: 100%;
    float: left;
}

.bar-forecast {
    background: repeating-linear-gradient(45deg, #bdc3c7, #bdc3c7 4px, #d0d3d4 4px, #d0d3d4 8px);
    height: 100%;
    float: left;
}

/* Badge Résultat Final */
.landing-badge {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
}

/* Selecteur type Shift/Absence */
.shift-type-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.type-option {
    flex: 1;
    cursor: pointer;
}

.type-option input {
    display: none; /* Cache le vrai bouton radio */
}

.type-box {
    display: block;
    text-align: center;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-weight: bold;
    color: #666;
    transition: all 0.2s;
}

.type-option input:checked + .type-box {
    border-color: #0a4d8f;
    background-color: #e8f4fd;
    color: #0a4d8f;
}

/* Style spécifique pour l'option absence si on veut du rouge/orange */
.type-option input[value="absence"]:checked + .type-box {
    border-color: #e74c3c;
    background-color: #fde8e8;
    color: #c0392b;
}

/* --- Styles des Absences --- */

/* Style par défaut (base) */
.shift.absent {
    border: 1px solid #ccc !important;
    color: #333 !important;
    background: #f5f5f5 !important; /* Gris clair par défaut */
}

/* CP - Jaune/Or */
.shift.absent.reason-cp {
    background: #fff3cd !important;
    border-color: #ffc107 !important;
    color: #856404 !important;
}

/* Maladie - Rouge clair */
.shift.absent.reason-maladie {
    background: #f8d7da !important;
    border-color: #dc3545 !important;
    color: #721c24 !important;
}

/* Récupération - Vert clair/Bleuté */
.shift.absent.reason-recuperation {
    background: #d1ecf1 !important;
    border-color: #17a2b8 !important;
    color: #0c5460 !important;
}

/* Indisponibilité - Gris foncé/Hachuré */
.shift.absent.reason-indisponibilite {
    background: #e2e3e5 !important;
    border-color: #383d41 !important;
    color: #383d41 !important;
    opacity: 0.8;
}

/* Congé sans solde - Violet / Prune (Distinct de CP et Maladie) */
.shift.absent.reason-conge-sans-solde {
    background: #f3e5f5 !important;
    border-color: #8e24aa !important;
    color: #4a148c !important;
}

/* Autre - Gris neutre */
.shift.absent.reason-autre {
    background: #eceff1 !important;
    border-color: #607d8b !important;
    color: #455a64 !important;
}

/* Mise en page interne de la case absence */
.shift-content-absent {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: bold;
    font-size: 11px;
}
.shift-hours-absent {
    font-size: 10px;
    margin-top: 2px;
    opacity: 0.8;
    text-align: right;
}