/* === VARIABLES === */
.edt-page {
    --primary: #3b82f6;
    --primary-dark: #1e40af;
    --amber: #f59e0b;
    --success: #22c55e;
    --danger: #ef4444;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
}

/* === PAGE === */
.edt-page {
    min-height: 100vh;
    background: linear-gradient(180deg, #eef2ff 0%, #f0f4ff 100%);
    padding-top: 5px;
}

/* === TOPBAR === */
.edt-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: 68px;
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    box-shadow: 0 4px 20px rgba(30, 64, 175, 0.25);
}
.edt-topbar-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.edt-back {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    text-decoration: none;
    transition: color 0.2s;
}
.edt-back:hover {
    color: white;
}
.edt-topbar h1 {
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    margin: 0;
    white-space: nowrap;
}
.edt-topbar h1 i {
    margin-right: 8px;
    opacity: 0.85;
}
.edt-topbar-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}
.edt-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.edt-topbar-right select {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    padding: 7px 12px;
    font-size: 0.85rem;
    color: white;
    cursor: pointer;
}
.edt-topbar-right select option {
    color: var(--gray-800);
    background: white;
}
.edt-ghost-btn {
    background: rgba(255, 255, 255, 0.12);
    border: none;
    border-radius: 10px;
    padding: 8px 14px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.edt-ghost-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    color: white;
}

/* === TABS EDT === */
.edt-tabs {
    max-width: 1600px;
    margin: 0.75rem auto 0;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.edt-tab {
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    padding: 8px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
/* L'etat survole peignait le libelle en --primary (#3b82f6) sur le gris tres
   clair de la barre : 3,51:1 (mesure axe-core du 2026-09-02, releve sur un
   onglet et sur la bascule « Mercredi » restee survolee apres un tap). Le bleu
   700 tient 6,3:1 sur le meme fond, la bordure garde la teinte d'origine. */
.edt-tab:hover {
    border-color: var(--primary);
    color: #1d4ed8;
}
/* #3b82f6 (--primary) ne porte pas de texte blanc : 3.67:1 mesure par axe-core
   le 2026-09-02, sous les 4.5:1 de WCAG AA. #1d4ed8 (blue-700) tient 6.3:1 avec
   du blanc et reste la meme famille de bleu. Idem pour la bascule « Compresser ». */
.edt-tab.active {
    background: #1d4ed8;
    color: white;
    border-color: #1d4ed8;
    box-shadow: 0 2px 10px rgba(29, 78, 216, 0.3);
}
.edt-tab .edt-tab-default {
    font-size: 0.65rem;
    /* opacity: 0.7 ramenait le blanc a #c4dafc sur le bleu, soit 2.58:1. */
    opacity: 0.85;
    margin-left: 4px;
}
.edt-tab-add {
    background: none;
    border: 2px dashed var(--gray-300);
    border-radius: 12px;
    padding: 8px 14px;
    font-size: 0.85rem;
    color: var(--gray-400);
    cursor: pointer;
    transition: all 0.2s;
}
.edt-tab-add:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.edt-tab-actions {
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
}

/* === BARRE D'ACTIONS (style cahier journal) === */
.edt-stats {
    max-width: 1600px;
    margin: 0.75rem auto 0;
    padding: 0 1.5rem;
}
.edt-stats-inner {
    background: white;
    border-radius: 14px;
    padding: 10px 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    flex-wrap: wrap;
}
.edt-action-link {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.edt-action-link:hover {
    background: var(--primary-dark, #1e40af);
}
.edt-action-link-accent {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25);
}
.edt-action-link-accent:hover {
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
}
.edt-action-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--gray-100);
    color: var(--gray-600);
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.edt-action-btn:hover {
    background: var(--gray-200);
    color: var(--gray-800);
}
.edt-action-btn.danger:hover {
    background: #fee2e2;
    color: var(--danger);
}
.edt-stat-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--gray-100);
    color: var(--gray-600);
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.edt-stat-toggle:hover {
    background: var(--gray-200);
}
.edt-stat-toggle i:first-child {
    color: var(--primary);
}
.edt-actions-spacer {
    flex: 1;
}
.edt-stats-detail {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 10px 20px;
    background: var(--gray-50);
    border-radius: 0 0 14px 14px;
    margin-top: -8px;
    font-size: 0.85rem;
}
.edt-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--gray-600);
}
.edt-stat i {
    color: var(--primary);
    font-size: 0.9rem;
}
.edt-stat strong {
    color: var(--gray-800);
    font-weight: 700;
}
.edt-stat-sep {
    width: 1px;
    height: 20px;
    background: var(--gray-200);
}
.edt-stat-matieres {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.edt-stat-mat {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    /* Le fond est assombri en JS (inkSafeBg) jusqu'a 4.5:1 avec ce blanc. */
    color: #fff;
}
/* === Conformité BO === */
.edt-bo-conformity {
    width: 100%;
    margin-top: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
}
.edt-bo-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    font-size: 0.78rem;
    color: var(--gray-700);
}
.edt-bo-title {
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--gray-800);
}
.edt-bo-select {
    font-size: 0.78rem;
    padding: 3px 8px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    background: white;
    cursor: pointer;
}
.edt-bo-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.edt-bo-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 12px;
    border: 1px solid;
}
.edt-bo-chip.ok {
    background: #ecfdf5;
    color: #065f46;
    border-color: #a7f3d0;
}
.edt-bo-chip.warn {
    background: #fffbeb;
    color: #92400e;
    border-color: #fcd34d;
}
.edt-bo-chip.under {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fca5a5;
}
.edt-bo-chip-mat {
    font-weight: 700;
}
.edt-bo-chip-delta {
    font-size: 0.65rem;
    opacity: 0.85;
}
.edt-bo-hint {
    margin-top: 6px;
    font-size: 0.7rem;
    /* --gray-500 (#6b7280) sur le #f8fafc du panneau : 4.9:1. */
    color: var(--gray-600);
    font-style: italic;
}
/* Remplace un `style="color:#94a3b8"` inline (2.45:1) que le theme sombre ne
   pouvait pas rattraper. */
.edt-bo-source {
    color: var(--gray-600);
}

/* === GRILLE HORAIRE === */
.edt-grid-container {
    max-width: 1600px;
    margin: 0.75rem auto 0;
    padding: 0 1.5rem 2rem;
}
.edt-grid {
    display: grid;
    /* grid-template-columns defini dynamiquement par JS selon les jours actifs */
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    min-height: 600px;
    position: relative;
}

/* Headers jours */
.edt-day-header {
    padding: 12px 8px;
    text-align: center;
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}
.edt-time-header {
    padding: 12px 8px;
    text-align: center;
    background: var(--gray-50);
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--gray-500);
    border-bottom: 2px solid var(--gray-200);
}

/* Zone horaire */
.edt-time-col {
    position: relative;
    background: var(--gray-50);
    border-right: 1px solid var(--gray-200);
}
.edt-time-label {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 3px;
    font-size: 0.75rem;
    color: var(--gray-600);
    font-weight: 700;
}

/* Colonnes jours */
.edt-day-col {
    position: relative;
    border-right: 1px solid var(--gray-100);
    min-height: 200px;
}
.edt-day-col:last-child {
    border-right: none;
}

/* Lignes horaires (fond) */
.edt-hour-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--gray-200);
    pointer-events: none;
}
.edt-hour-line.major {
    background: var(--gray-300);
    height: 2px;
}
.edt-hour-line.minor {
    background: var(--gray-100);
}

/* Creneaux (blocs) */
.edt-slot {
    position: absolute; /* left et width definis en inline par JS */
    border-radius: 8px;
    padding: 6px 8px;
    cursor: pointer;
    transition: all 0.15s;
    overflow: hidden;
    z-index: 2;
    border-left: 4px solid;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 0.78rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.edt-slot::before {
    content: '';
    position: absolute;
    inset: 0;
    background: white;
    border-radius: inherit;
    z-index: -1;
}
.edt-slot:hover {
    transform: scale(1.02);
    z-index: 5;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.edt-slot-matiere {
    font-weight: 700;
    color: var(--gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.edt-slot-matiere i {
    margin-right: 4px;
    font-size: 0.7rem;
}
.edt-slot-time {
    font-size: 0.65rem;
    color: var(--gray-500);
    margin-top: 2px;
}
.edt-slot-label {
    font-size: 0.65rem;
    color: var(--gray-600);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.edt-slot-groupe {
    position: absolute;
    top: 3px;
    right: 6px;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.1);
    color: var(--gray-700);
}
.edt-slot-delete,
.edt-slot-duplicate {
    position: absolute;
    top: 2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: white;
    border: none;
    font-size: 0.6rem;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
}
.edt-slot-delete {
    right: 2px;
    background: rgba(239, 68, 68, 0.9);
}
.edt-slot-duplicate {
    right: 32px;
    background: rgba(59, 130, 246, 0.9);
}
.edt-slot-duplicate:hover {
    background: rgba(30, 64, 175, 0.95);
}
.edt-slot:hover .edt-slot-delete,
.edt-slot:hover .edt-slot-duplicate {
    display: flex;
}
.edt-slot:hover .edt-slot-groupe {
    display: none;
}

/* Resize handle */
.edt-slot-resize {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    cursor: ns-resize;
    background: transparent;
}
.edt-slot-resize:hover {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0 0 8px 8px;
}

/* Split handle (bord droit) */
.edt-slot-split {
    position: absolute;
    top: auto;
    right: 2px;
    bottom: 2px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    cursor: col-resize;
    background: transparent;
    border-radius: 0 6px 6px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    z-index: 3;
}
.edt-slot-split::after {
    content: '';
    width: 2px;
    height: 60%;
    border-radius: 1px;
    background: transparent;
    transition: background 0.15s;
}
.edt-slot:hover .edt-slot-split::after {
    background: rgba(0, 0, 0, 0.15);
}
.edt-slot-split:hover {
    background: rgba(59, 130, 246, 0.15);
}
.edt-slot-split:hover::after {
    background: var(--primary);
    width: 3px;
}
.edt-slot-split:focus-visible {
    outline: 3px solid var(--primary-dark);
    outline-offset: -2px;
    background: rgba(59, 130, 246, 0.15);
}
.edt-slot-split:focus-visible::after {
    background: var(--primary);
    width: 3px;
}

/* Drag & drop */
.edt-slot.dragging {
    opacity: 0.25;
    pointer-events: none;
}
.edt-drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 300;
    border-radius: 8px;
    padding: 6px 8px;
    border-left: 4px solid;
    font-size: 0.78rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0.88;
    transform: rotate(1.5deg);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}
body.edt-dragging,
body.edt-dragging * {
    cursor: grabbing !important;
}

/* Zone cliquable pour ajouter */
.edt-day-col:hover {
    background: rgba(59, 130, 246, 0.02);
}

/* Placeholder au survol pendant drag */
.edt-drag-preview {
    position: absolute;
    left: 4px;
    right: 4px;
    border-radius: 8px;
    border: 2px dashed var(--primary);
    background: rgba(59, 130, 246, 0.08);
    z-index: 1;
    pointer-events: none;
}
/* Highlight de la colonne cible pendant un drag cross-day */
body.edt-dragging .edt-day-col.drop-target {
    background: rgba(5, 150, 105, 0.08);
    box-shadow: inset 0 0 0 2px rgba(5, 150, 105, 0.35);
}

/* Recreation (slot special) */
.edt-slot.recreation {
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 5px,
        rgba(0, 0, 0, 0.03) 5px,
        rgba(0, 0, 0, 0.03) 10px
    );
    border-left-color: var(--gray-400);
}

/* === MODAL === */
.edt-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    padding: 1rem;
}
.edt-modal-overlay.active {
    display: flex;
}
.edt-modal {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    width: 90%;
    max-width: 480px;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: edtModalIn 0.2s ease;
    display: flex;
    flex-direction: column;
}
@keyframes edtModalIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.edt-modal h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 1.2rem;
}
.edt-modal h2 i {
    margin-right: 8px;
    color: var(--primary);
}

.edt-field {
    margin-bottom: 1rem;
}
.edt-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-600);
    margin-bottom: 4px;
}
.edt-field input,
.edt-field select {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--gray-200);
    border-radius: 10px;
    font-size: 0.9rem;
    color: var(--gray-800);
    transition: border-color 0.2s;
}
.edt-field input:focus,
.edt-field select:focus {
    border-color: var(--primary);
    outline: 2px solid transparent;
}
.edt-field-row {
    display: flex;
    gap: 0.75rem;
}
.edt-field-row .edt-field {
    flex: 1;
    min-width: 0;
}
.edt-field-help {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--gray-500);
    margin-left: 6px;
}

/* Selecteur matiere visuel */
.edt-mat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 6px;
}
.edt-mat-option {
    padding: 8px 4px;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--gray-50);
    color: var(--gray-600);
    border: 2px solid transparent;
}
.edt-mat-option:hover {
    border-color: var(--gray-300);
}
.edt-mat-option.selected {
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.edt-mat-option i {
    display: block;
    font-size: 1rem;
    margin-bottom: 2px;
}
.edt-mat-sub-row {
    grid-column: 1 / -1;
    display: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 6px;
    background: var(--gray-100);
    border-radius: 8px;
}
.edt-mat-sub-row.open {
    display: grid;
}
.edt-mat-sub-row .edt-mat-option {
    font-size: 0.62rem;
    padding: 5px 3px;
}
.edt-mat-sub-row .edt-mat-option i {
    font-size: 0.8rem;
}

/* Selecteur multi-jours dans le modal */
.edt-day-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.edt-day-chip {
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
    background: var(--gray-50);
    color: var(--gray-500);
    border: 2px solid var(--gray-200);
}
.edt-day-chip:hover {
    border-color: var(--gray-400);
}
.edt-day-chip.selected {
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.edt-day-chip i {
    margin-right: 4px;
    font-size: 0.7rem;
}

.edt-modal-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    position: sticky;
    bottom: -2rem;
    background: white;
    padding: 1rem 0 0;
    margin-left: -2rem;
    margin-right: -2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 2rem;
    margin-bottom: -2rem;
    border-top: 1px solid var(--gray-100);
    z-index: 2;
}
.edt-btn {
    flex: 1;
    padding: 11px;
    border: none;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.edt-btn-primary {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    color: white;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}
.edt-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}
.edt-btn-secondary {
    background: var(--gray-100);
    color: var(--gray-600);
}
.edt-btn-secondary:hover {
    background: var(--gray-200);
}
.edt-btn-danger {
    background: var(--danger);
    color: white;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
    flex: 0;
    padding: 11px 18px;
}
.edt-btn-danger:hover {
    transform: translateY(-1px);
}

/* === EMPTY STATE === */
.edt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}
.edt-empty i {
    font-size: 3rem;
    color: var(--gray-300);
    margin-bottom: 1rem;
}
.edt-empty h3 {
    font-size: 1.1rem;
    color: var(--gray-600);
    margin: 0 0 0.5rem;
}
.edt-empty p {
    font-size: 0.85rem;
    color: var(--gray-400);
    margin: 0 0 1.5rem;
    max-width: 400px;
}
.edt-empty-btn {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    color: white;
    border: none;
    border-radius: 12px;
    padding: 12px 28px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}
.edt-empty-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(59, 130, 246, 0.4);
}

/* === TOAST === */
.edt-toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 300;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.3s;
    pointer-events: none;
}
.edt-toast.visible {
    transform: translateY(0);
    opacity: 1;
}
/* Le bandeau de confirmation est le SEUL retour que recoit l'enseignant apres
   une sauvegarde : il doit se lire. Mesures axe-core du 2026-09-02, en blanc
   sur les couleurs de la charte : succes #22c55e -> 2,27:1, danger #ef4444 ->
   3,76:1, info #3b82f6 -> 3,67:1. Les trois teintes passent au cran fonce de
   la meme famille (vert 700, rouge 700, bleu 700), au-dessus de 4,5:1. */
.edt-toast.success {
    background: #15803d;
    box-shadow: 0 4px 15px rgba(21, 128, 61, 0.35);
}
.edt-toast.error {
    background: #b91c1c;
    box-shadow: 0 4px 15px rgba(185, 28, 28, 0.35);
}
.edt-toast.info {
    background: #1d4ed8;
    box-shadow: 0 4px 15px rgba(29, 78, 216, 0.35);
}

/* === PRINT VIEW (hidden on screen) === */
.edt-print-view {
    display: none;
}

/* === PRINT === */
@media print {
    /* Contrer la protection anti-impression globale */
    html,
    body {
        display: block !important;
        visibility: visible !important;
    }
    body::before {
        content: none !important;
        display: none !important;
    }
    /* Cacher le layout du site */
    body > header,
    body > footer,
    .breadcrumb-nav,
    .fab-container,
    #fab-menu,
    .cookie-consent,
    .mobile-menu-toggle {
        display: none !important;
    }
    body {
        padding-top: 0 !important;
        background: white !important;
    }
    /* Cacher les controles EDT et la grille normale */
    .edt-topbar,
    .edt-tabs,
    .edt-settings,
    .edt-modal-overlay,
    .edt-toast,
    .edt-stats,
    .edt-grid-container,
    .edt-tab-actions {
        display: none !important;
    }
    .edt-page {
        padding-top: 0;
        background: white;
        /* min-height:100vh (regle ecran) n'etait pas neutralisee : en media
           pagine le bloc reclamait une page entiere et poussait TOUJOURS la
           derniere ligne de la grille sur une 2e feuille — un emploi du temps
           d'une demi-page sortait sur deux pages, avec un creneau orphelin. */
        min-height: 0;
        height: auto;
    }
    /* Titre imprimable */
    .edt-print-header {
        display: block !important;
        text-align: center;
        font-size: 10pt;
        font-weight: 700;
        color: #1f2937;
        margin: 0;
        padding: 0 0 1px;
    }
    /* Vue impression TABLE */
    .edt-print-view {
        display: block !important;
    }
    .edt-pv-table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        font-size: 6.5pt;
    }
    .edt-pv-table th,
    .edt-pv-table td {
        border: 1px solid #ccc;
        padding: 1px 3px;
        vertical-align: middle;
        text-align: center;
    }
    .edt-pv-table th:first-child,
    .edt-pv-table td:first-child {
        width: 62px;
        text-align: right;
        padding-right: 2px;
    }
    .edt-pv-th-day {
        color: white;
        font-size: 7.5pt;
        font-weight: 700;
        padding: 3px 2px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .edt-pv-td-hour {
        font-size: 5pt;
        color: #777;
        white-space: nowrap;
    }
    .edt-pv-td-slot {
        font-size: 6.5pt;
        line-height: 1.3;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .edt-pv-td-slot strong {
        font-size: 6.5pt;
    }
    .edt-pv-td-slot strong i {
        margin-right: 2px;
        font-size: 5pt;
    }
    .edt-pv-td-slot small {
        font-size: 5pt;
        color: #666;
    }
    .edt-pv-td-slot em {
        font-size: 5.5pt;
        color: #444;
    }
    .edt-pv-overlap {
        margin-top: 3mm;
        font-size: 6.5pt;
        color: #444;
        border-left: 2pt solid #94a3b8;
        padding-left: 2mm;
        break-inside: avoid;
    }
    .edt-pv-overlap ul {
        margin: 1mm 0 0;
        padding-left: 4mm;
    }
    .edt-pv-overlap li {
        margin: 0;
    }
    [data-theme='dark'] .edt-pv-overlap,
    [data-theme='dark'] .edt-pv-overlap li {
        color: #444 !important;
    }
    .edt-pv-td-pause {
        font-size: 6pt;
        color: #888;
        font-style: italic;
        background: #f5f5f5 !important;
        padding: 2px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .edt-pv-td-empty {
        background: #fafafa;
    }
    .edt-print-footer {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        font-size: 7pt;
        color: #999;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0 0.5cm;
    }
    .edt-print-footer-left {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .edt-print-footer-left img {
        height: 16px;
    }
    .edt-print-footer-right {
        font-style: italic;
    }
    @page {
        size: landscape;
        margin: 0.5cm;
    }
}
.edt-print-footer {
    display: none;
}

/* === TOGGLES JOURS === */
.edt-day-toggles {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 0.75rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--gray-200);
}
.edt-day-toggles-label {
    font-size: 0.72rem;
    color: var(--gray-500);
    font-weight: 600;
    white-space: nowrap;
}
.edt-day-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--gray-50);
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray-500);
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}
.edt-day-toggle:hover {
    border-color: var(--primary);
    color: #1d4ed8;
}
/* Meme correction que .edt-tab.active : blanc sur #3b82f6 = 3.67:1 (mesure
   axe-core du 2026-09-02, bascules Mercredi / Samedi / Compresser). */
.edt-day-toggle.active {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: white;
    box-shadow: 0 2px 8px rgba(29, 78, 216, 0.25);
}
.edt-day-toggle i {
    font-size: 0.65rem;
}

/* === SETTINGS BAR (horaires + pause) === */
.edt-settings {
    max-width: 1600px;
    margin: 0.5rem auto 0;
    padding: 0 1.5rem;
}
.edt-settings-inner {
    background: white;
    border-radius: 14px;
    padding: 8px 18px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.82rem;
    flex-wrap: wrap;
}
.edt-setting {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--gray-600);
}
.edt-setting i {
    color: var(--primary);
    font-size: 0.85rem;
}
.edt-setting-label {
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
}
.edt-setting-time {
    width: 90px;
    padding: 5px 10px;
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.8rem;
    text-align: center;
    color: var(--gray-700);
    transition: border-color 0.2s;
    font-weight: 600;
}
.edt-setting-time:focus {
    border-color: var(--primary);
    outline: 2px solid transparent;
}
.edt-setting-arrow {
    color: var(--gray-400);
    font-size: 0.8rem;
}
.edt-setting-sep {
    width: 1px;
    height: 24px;
    background: var(--gray-200);
}

/* Pause meridienne dans la grille */
.edt-pause-bar {
    position: absolute;
    left: 0;
    right: 0;
    background: repeating-linear-gradient(
        135deg,
        var(--gray-100),
        var(--gray-100) 4px,
        white 4px,
        white 8px
    );
    border-top: 2px dashed var(--gray-300);
    border-bottom: 2px dashed var(--gray-300);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--gray-400);
    font-weight: 600;
    z-index: 1;
    pointer-events: none;
}
.edt-pause-bar i {
    margin-right: 4px;
}
.edt-pause-label {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    /* --gray-400 (#9ca3af) sur le #f9fafb de la colonne : 2.42:1. --gray-600
       (#4b5563) tient 7.5:1 en clair, et l'inversion --gray-* de la page le
       remonte a #cbd5e1 en sombre (8.9:1 sur #1e293b). */
    color: var(--gray-600);
    font-weight: 600;
}
.edt-pause-label i {
    margin-right: 3px;
    font-size: 0.6rem;
}

/* === RESPONSIVE === */
@media screen and (max-width: 1100px) {
    .edt-slot {
        font-size: 0.7rem;
        padding: 4px 6px;
    }
    .edt-topbar {
        padding: 0 1rem;
    }
    .edt-ghost-btn span {
        display: none;
    }
    .edt-ghost-btn {
        padding: 8px 10px;
    }
    /* Stats bar: boutons sur 2e ligne */
    .edt-actions-spacer {
        flex: 0;
        width: 100%;
    }
}
/* === MOBILE DAY NAV === */
.edt-mobile-day-nav {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 10px 0.5rem;
}
.edt-mobile-day-btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 10px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    color: white;
    font-size: 1rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.edt-mobile-day-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}
.edt-mobile-day-btn:disabled {
    opacity: 0.3;
    cursor: default;
}
.edt-mobile-day-label {
    font-weight: 700;
    color: white;
    font-size: 1.05rem;
    min-width: 140px;
    text-align: center;
}
.edt-mobile-day-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 4px;
}
.edt-mobile-day-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: all 0.2s;
    cursor: pointer;
    border: none;
    padding: 0;
}
.edt-mobile-day-dot.active {
    background: white;
    transform: scale(1.3);
}

@media screen and (max-width: 640px) {
    .edt-topbar {
        height: auto;
        padding: 8px 10px;
        flex-wrap: wrap;
        gap: 6px;
    }
    .edt-topbar-left {
        order: 1;
    }
    .edt-topbar-center {
        order: 3;
        flex-basis: 100%;
        display: none;
    }
    .edt-topbar-right {
        order: 2;
        margin-left: auto;
    }
    .edt-topbar h1 {
        font-size: 1rem;
    }
    .edt-topbar h1 span.edt-title-full {
        display: none;
    }
    .edt-topbar h1 span.edt-title-short {
        display: inline;
    }
    .edt-page {
        padding-top: 0;
    }
    .edt-mobile-day-nav {
        display: flex;
        flex-direction: column;
    }
    .edt-day-header {
        font-size: 0.8rem;
        padding: 10px 8px;
    }
    .edt-time-label {
        font-size: 0.65rem;
    }
    .edt-slot {
        font-size: 0.75rem;
    }
    .edt-tabs {
        flex-wrap: wrap;
    }
    .edt-tab {
        padding: 6px 12px;
        font-size: 0.78rem;
    }
    .edt-tab-actions {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
    }
    .edt-day-toggles {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }
    .edt-settings {
        padding: 0 0.5rem;
    }
    .edt-settings-inner {
        gap: 0.5rem;
        padding: 8px 10px;
    }
    .edt-setting {
        flex-wrap: wrap;
        gap: 4px;
    }
    .edt-setting-label {
        display: none;
    }
    .edt-setting-time {
        width: auto;
        padding: 5px 6px;
        font-size: 0.8rem;
    }
    .edt-setting-sep {
        display: none;
    }
    .edt-pause-toggle {
        display: none !important;
    }
    .edt-pause-input {
        display: inline-flex !important;
    }
    .edt-grid-container {
        padding: 0 0.5rem 2rem;
    }
    .edt-stats {
        padding: 0 0.5rem;
    }
    .edt-stats-inner {
        padding: 8px 10px;
        gap: 0.4rem;
    }
    .edt-actions-spacer {
        flex: 0;
        width: 100%;
    }
    .edt-action-btn {
        font-size: 0.72rem;
        padding: 5px 8px;
    }
    .edt-action-link {
        font-size: 0.72rem;
        padding: 5px 10px;
    }
    .edt-desktop-only {
        display: none !important;
    }
    .edt-tabs {
        padding: 0 0.5rem;
    }
    .edt-grid {
        min-width: 0 !important;
        overflow: hidden;
    }
    .edt-slot-delete,
    .edt-slot-duplicate {
        display: flex;
    }
    .edt-slot-groupe {
        display: none;
    }
    .edt-slot-time {
        display: block;
    }
    .edt-slot-label {
        display: block;
    }
}
@media screen and (max-width: 500px) {
    /* Masque visuel seulement : display:none retirait le seul h1 de l'arbre
       d'accessibilite (audit 2026-08-11). */
    .edt-topbar h1 {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

/* Touch devices: always show action buttons on slots */
@media (hover: none) {
    .edt-slot-delete,
    .edt-slot-duplicate {
        display: flex;
    }
    .edt-slot-groupe {
        display: none;
    }
}

/* Titre impression (cache a l'ecran) */
.edt-print-header {
    display: none;
}

/* Animation */
@keyframes edtFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.edt-grid {
    animation: edtFadeIn 0.3s ease;
}
/* La grille rejoue ce fondu a CHAQUE rendu (ajout, deplacement, changement de
   jour...). Pendant les 300 ms, l'opacite composite les couleurs : mesure du
   2026-09-02, l'en-tete de jour passe transitoirement a 3,55:1 en theme sombre.
   Rien d'illisible durablement, mais le mouvement repete gene, et il n'apporte
   rien a qui a demande moins d'animations. */
@media (prefers-reduced-motion: reduce) {
    .edt-grid {
        animation: none;
    }
    .edt-slot,
    .edt-tab,
    .edt-day-toggle,
    .edt-mobile-day-dot {
        transition: none;
    }
}

/* Titre responsive */
.edt-title-short {
    display: none;
}
@media screen and (min-width: 641px) {
    .edt-title-short {
        display: none;
    }
}

/* === TEMPLATE PRESETS MODAL === */
.edt-preset-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
}
.edt-preset-card {
    background: var(--gray-50);
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}
.edt-preset-card:hover {
    border-color: var(--primary);
    background: #eef2ff;
}
.edt-preset-card h4 {
    margin: 0 0 4px;
    font-size: 0.9rem;
    color: var(--gray-800);
}
.edt-preset-card h4 i {
    margin-right: 6px;
    color: var(--primary);
}
.edt-preset-card p {
    margin: 0;
    font-size: 0.75rem;
    color: var(--gray-500);
}

/* === WEEKLY NOTES === */
.edt-day-note {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fffbeb;
    border-top: 1px dashed #f59e0b;
    padding: 4px 8px;
    font-size: 0.68rem;
    color: #92400e;
    cursor: pointer;
    min-height: 22px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background 0.2s;
}
.edt-day-note:hover {
    background: #fef3c7;
}
.edt-day-note i {
    font-size: 0.6rem;
    color: #d97706;
    flex-shrink: 0;
}
.edt-day-note-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.edt-day-note-empty {
    font-style: italic;
    /* #d97706 a 0.6 d'opacite se composait en #e8ac62 sur #fffbeb : 1.92:1.
       #92400e a pleine opacite tient 6.4:1 sur le meme fond ambre. */
    color: #92400e;
    opacity: 1;
}
.edt-day-note-input {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 0.68rem;
    color: #92400e;
    outline: none;
    padding: 0;
}

/* === STATS COMPARISON BAR === */
.edt-hours-chart {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    padding: 10px 20px 14px;
    background: var(--gray-50);
    border-radius: 0 0 14px 14px;
}
.edt-hours-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
}
.edt-hours-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 5px;
    flex-shrink: 0;
    vertical-align: -1px;
}
.edt-hours-label {
    width: 110px;
    font-weight: 600;
    /* La couleur de matiere est passee dans .edt-hours-dot : peinte sur le texte
       elle tombait entre 1.83:1 et 4.05:1 sur le fond du panneau. */
    color: var(--gray-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}
.edt-hours-bar-bg {
    flex: 1;
    height: 14px;
    background: var(--gray-200);
    border-radius: 7px;
    overflow: hidden;
    position: relative;
}
.edt-hours-bar-fill {
    height: 100%;
    border-radius: 7px;
    transition: width 0.4s ease;
}
.edt-hours-bar-ref {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gray-600);
    z-index: 1;
}
.edt-hours-value {
    width: 80px;
    font-size: 0.7rem;
    color: var(--gray-500);
    white-space: nowrap;
    text-align: right;
}
.edt-hours-legend {
    display: flex;
    gap: 16px;
    font-size: 0.68rem;
    color: var(--gray-500);
    margin-top: 2px;
    padding-left: 118px;
}
.edt-hours-legend span::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: middle;
}
.edt-hours-legend .edt-legend-actual::before {
    background: var(--primary);
}
.edt-hours-legend .edt-legend-ref::before {
    background: var(--gray-600);
}

/* === CONTEXT MENU === */
.edt-context-menu {
    position: fixed;
    z-index: 250;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
    padding: 6px 0;
    min-width: 180px;
    animation: edtModalIn 0.15s ease;
}
.edt-context-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 0.82rem;
    color: var(--gray-700);
    cursor: pointer;
    transition: background 0.15s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}
.edt-context-item:hover {
    background: var(--gray-50);
}
.edt-context-item i {
    width: 16px;
    text-align: center;
    color: var(--gray-400);
    font-size: 0.8rem;
}
.edt-context-item.danger {
    color: var(--danger);
}
.edt-context-item.danger i {
    color: var(--danger);
}
.edt-context-sep {
    height: 1px;
    background: var(--gray-100);
    margin: 4px 0;
}

/* === RECURRING INDICATOR === */
.edt-slot-recurring {
    position: absolute;
    bottom: 3px;
    right: 6px;
    font-size: 0.55rem;
    color: var(--gray-400);
}
.edt-slot.recurring .edt-slot-recurring {
    display: block;
}
.edt-slot:not(.recurring) .edt-slot-recurring {
    display: none;
}

/* === PRINT IMPROVEMENTS === */
@media print {
    .edt-print-info {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        font-size: 8pt;
        color: #666;
        margin-bottom: 4px;
        padding: 0 2px;
    }
    .edt-day-note {
        display: none !important;
    }
    .edt-hours-chart {
        display: none !important;
    }

    /* Le papier est blanc : le theme sombre ne doit jamais fuir sur la feuille.
       Sans ces regles, un enseignant en mode sombre imprimait un emploi du temps
       sur fond NOIR pleine page (encre) avec horaires et libelles gris fonce sur
       noir, illisibles. Les fonds des en-tetes de jour restent poses en inline
       !important par renderPrintView() et survivent volontairement. */
    /* Selecteurs doubles (.edt-page.edt-page) : dark-mode-pages.css est charge
       APRES cette feuille et porte deja !important a specificite egale. */
    [data-theme='dark'] body,
    [data-theme='dark'] main,
    [data-theme='dark'] .edt-page.edt-page,
    [data-theme='dark'] .edt-print-view.edt-print-view,
    [data-theme='dark'] .edt-pv-table.edt-pv-table {
        background: #fff !important;
        background-image: none !important;
    }
    [data-theme='dark'] .edt-print-header {
        color: #1f2937 !important;
    }
    [data-theme='dark'] .edt-print-info,
    [data-theme='dark'] .edt-print-footer,
    [data-theme='dark'] .edt-pv-td-hour {
        color: #666 !important;
    }
    [data-theme='dark'] .edt-pv-td-slot,
    [data-theme='dark'] .edt-pv-td-pause,
    [data-theme='dark'] .edt-pv-td-empty {
        color: #1f2937 !important;
    }
    [data-theme='dark'] .edt-pv-td-slot small {
        color: #666 !important;
    }
    [data-theme='dark'] .edt-pv-td-slot em {
        color: #444 !important;
    }
    [data-theme='dark'] .edt-pv-th-day {
        color: #fff !important;
    }
    [data-theme='dark'] .edt-pv-table th,
    [data-theme='dark'] .edt-pv-table td {
        border-color: #ccc !important;
    }
    /* Les FONDS manquaient : dark-mode.css porte `td { background: ... !important }`,
       qui repeignait chaque cellule en #0f172a a l'impression (mesure du
       2026-09-02 : cellule de creneau rendue bleu nuit plein au lieu de sa
       teinte pastel, et une page d'encre en plus). Les cellules de creneau
       recuperent leur teinte via un style inline !important pose par
       renderPrintView(); les autres repassent au blanc du papier ici. */
    [data-theme='dark'] .edt-pv-td-hour,
    [data-theme='dark'] .edt-pv-td-empty,
    [data-theme='dark'] .edt-pv-table tr:nth-child(even) td,
    [data-theme='dark'] .edt-pv-table tr:nth-child(odd) td {
        background: #fff !important;
    }
    [data-theme='dark'] .edt-pv-td-pause {
        background: #f3f4f6 !important;
    }
    [data-theme='dark'] .edt-pv-groupe {
        color: #444 !important;
    }
    /* Niveau / groupe du creneau sur la feuille imprimee. */
    .edt-pv-groupe {
        display: inline-block;
        margin-top: 2px;
        padding: 0 5px;
        border: 1px solid #9ca3af;
        border-radius: 8px;
        font-size: 0.62rem;
        font-weight: 700;
        color: #374151;
    }
}
.edt-print-info {
    display: none;
}

/* === ACCESSIBILITY FOCUS === */
.edt-slot:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    z-index: 10;
    box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.2);
}
.edt-day-col:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

/* ===== DARK MODE ===== */

/* CAUSE RACINE (mesure du 2026-07-28 : 3 295 282 px2 de zones claires en sombre,
   la plus grosse surface blanche restante du site).
   `.edt-page` (l.2) redeclare TOUTE l'echelle --gray-* en valeurs CLAIRES. Or une
   custom property se resout sur l'ancetre DECLARANT le plus proche, pas par
   specificite : cette declaration locale battait donc systematiquement l'inversion
   de dark-mode.css (portee sur :root) pour tout le sous-arbre de la page. Chaque
   `var(--gray-*)` de cette feuille (barres d'action, en-tete d'heure, lignes
   horaires, bascules de jour, libelles...) repeignait donc en clair en theme sombre.
   On rejoue l'inversion sur le MEME element, avec les valeurs canoniques de
   dark-mode.css : une seule declaration remet d'aplomb tous les var() de la page. */
[data-theme='dark'] .edt-page {
    --gray-50: #1e293b;
    --gray-100: #1e293b;
    --gray-200: #334155;
    --gray-300: #475569;
    --gray-400: #64748b;
    --gray-500: #94a3b8;
    --gray-600: #cbd5e1;
    --gray-700: #e2e8f0;
    --gray-800: #f1f5f9;
    background: linear-gradient(180deg, #0f172a 0%, #1a1f35 100%) !important;
}

/* Fonds blancs ecrits en dur (hors echelle --gray-*), que l'inversion ci-dessus
   ne peut donc pas rattraper. .edt-grid porte a elle seule 3 074 928 px2. */
[data-theme='dark'] .edt-grid,
[data-theme='dark'] .edt-settings-inner,
[data-theme='dark'] .edt-stats-inner {
    background: #1e293b !important;
}

/* Le "→" separateur des deux champs horaires est en --gray-400 (#64748b) : sur le
   #1e293b du bandeau reglages il tombe a 3.0:1. Remonte d'un cran, uniquement ici. */
[data-theme='dark'] .edt-setting-arrow {
    color: #94a3b8 !important;
}

/* Pense-bete de journee : ambre clair (#fffbeb / encre #92400e) code en dur. */
[data-theme='dark'] .edt-day-note {
    background: #2a2113 !important;
    border-top-color: #b45309 !important;
    color: #fcd34d !important;
}
[data-theme='dark'] .edt-day-note:hover {
    background: #3a2d18 !important;
}
[data-theme='dark'] .edt-day-note i,
[data-theme='dark'] .edt-day-note-empty {
    color: #fbbf24 !important;
}
[data-theme='dark'] .edt-day-note-empty {
    opacity: 0.85 !important;
}
[data-theme='dark'] .edt-tab {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}
[data-theme='dark'] .edt-tab:hover {
    border-color: var(--primary) !important;
    color: #a5b4fc !important;
}
[data-theme='dark'] .edt-tab-add {
    border-color: #475569 !important;
    color: #64748b !important;
}
[data-theme='dark'] .edt-tab-add:hover {
    border-color: var(--primary) !important;
}
[data-theme='dark'] .edt-topbar-right select option {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}
/* `.edt-grid-wrap` n'existe PLUS dans le DOM (0 occurrence dans la vue : le JS
   emet `.edt-grid` directement dans `.edt-grid-container`). C'est ce selecteur
   mort qui portait le fond sombre : la grille ne recevait donc que sa
   `border-color`, et gardait le `background: white` de la l.383. */
[data-theme='dark'] .edt-grid {
    border-color: #334155 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}
[data-theme='dark'] .edt-time-col {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #64748b !important;
}
[data-theme='dark'] .edt-day-col {
    border-color: #334155 !important;
}
[data-theme='dark'] .edt-day-header {
    background: #243044 !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
}
[data-theme='dark'] .edt-slot {
    border-color: #243044 !important;
}
[data-theme='dark'] .edt-slot:hover {
    background: #243044 !important;
}
/* `.edt-modal-content` n'existe PAS dans la vue (0 occurrence) : la modale est
   `<div class="edt-modal" id="edtModal">`. Ces trois regles etaient donc mortes
   depuis leur ecriture, et la modale d'edition d'un creneau s'ouvrait en SOMBRE
   avec un fond BLANC et une encre claire heritee du theme — mesure du
   2026-09-02 : fond rgb(255,255,255) / texte rgb(226,232,240), soit 1,1:1,
   illisible. Meme famille de bug que `.edt-grid-wrap` documente plus haut.
   Le nom mort a ete retire : un test PHPUnit interdit desormais toute regle
   sombre qui viserait une classe absente de la vue. */
[data-theme='dark'] .edt-modal {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}
[data-theme='dark'] .edt-modal h2 {
    color: #f1f5f9 !important;
}
[data-theme='dark'] .edt-modal label {
    color: #cbd5e1 !important;
}
[data-theme='dark'] .edt-modal .edt-field-help {
    color: #94a3b8 !important;
}
[data-theme='dark'] .edt-modal input,
[data-theme='dark'] .edt-modal select,
[data-theme='dark'] .edt-modal textarea {
    background: #243044 !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
/* Le champ « Duree » est en lecture seule et porte un fond var(--gray-50) inline. */
[data-theme='dark'] .edt-modal #edtFieldDuree {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}
[data-theme='dark'] .edt-mat-option:not(.selected),
[data-theme='dark'] .edt-day-chip:not(.selected),
[data-theme='dark'] .edt-preset-card {
    background: #243044 !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
[data-theme='dark'] .edt-preset-card h4 {
    color: #f1f5f9 !important;
}
[data-theme='dark'] .edt-preset-card p {
    color: #cbd5e1 !important;
}
[data-theme='dark'] .edt-mat-sub-row {
    background: #1a2334 !important;
}

/* ---- Bloc « Conformite horaires BO » (livre le 2026-08-31, jamais passe en
   sombre) : il gardait son fond clair #f8fafc pendant que l'encre basculait en
   clair. Mesure axe-core du 2026-09-02 : .edt-bo-title a 1.04:1 (#f1f5f9 sur
   #f8fafc), c'est-a-dire un titre invisible ; .edt-bo-hint a 2.45:1. */
[data-theme='dark'] .edt-bo-conformity {
    background: #172033 !important;
    border-color: #334155 !important;
}
[data-theme='dark'] .edt-bo-header,
[data-theme='dark'] .edt-bo-title {
    color: #f1f5f9 !important;
}
[data-theme='dark'] .edt-bo-hint {
    color: #cbd5e1 !important;
}
[data-theme='dark'] .edt-bo-source {
    color: #94a3b8 !important;
}
[data-theme='dark'] .edt-bo-select {
    background: #243044 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}
[data-theme='dark'] .edt-bo-select option {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}
[data-theme='dark'] .edt-bo-chip.ok {
    background: #052e21 !important;
    color: #6ee7b7 !important;
    border-color: #047857 !important;
}
[data-theme='dark'] .edt-bo-chip.warn {
    background: #2a2113 !important;
    color: #fcd34d !important;
    border-color: #b45309 !important;
}
[data-theme='dark'] .edt-bo-chip.under {
    background: #2d1416 !important;
    color: #fca5a5 !important;
    border-color: #b91c1c !important;
}
[data-theme='dark'] .edt-hours-chart {
    background: #172033 !important;
}

/* === ONBOARDING (premier passage) === */
.edt-onboarding {
    position: relative;
    margin: 0.75rem 1.5rem 0;
    padding: 1rem 1.25rem 0.9rem;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #a7f3d0;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.08);
}
.edt-onboarding[hidden] {
    display: none !important;
}
.edt-onboarding-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.6);
    color: var(--gray-600);
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.edt-onboarding-close:hover {
    background: white;
    color: var(--gray-800);
}
.edt-onboarding-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #065f46;
    margin-bottom: 0.65rem;
}
.edt-onboarding-title i {
    margin-right: 8px;
    color: #f59e0b;
}
.edt-onboarding-tips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.6rem 1rem;
    margin-bottom: 0.6rem;
}
.edt-onboarding-tip {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.82rem;
    color: var(--gray-700);
    line-height: 1.35;
}
.edt-onboarding-tip i {
    color: #059669;
    margin-top: 2px;
    width: 16px;
    text-align: center;
}
.edt-onboarding-hint {
    font-size: 0.75rem;
    color: var(--gray-600);
    padding-top: 0.55rem;
    border-top: 1px dashed rgba(5, 150, 105, 0.2);
}
.edt-onboarding-hint i {
    margin-right: 4px;
    opacity: 0.7;
}
.edt-onboarding-hint kbd {
    display: inline-block;
    padding: 1px 6px;
    margin: 0 2px;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    font-size: 0.7rem;
    font-family: ui-monospace, monospace;
    color: var(--gray-700);
}
[data-theme='dark'] .edt-onboarding {
    background: linear-gradient(135deg, #1e293b 0%, #1f3d2f 100%) !important;
    border-color: #334155 !important;
}
[data-theme='dark'] .edt-onboarding-title {
    color: #6ee7b7 !important;
}
[data-theme='dark'] .edt-onboarding-tip {
    color: #cbd5e1 !important;
}
[data-theme='dark'] .edt-onboarding-tip i {
    color: #34d399 !important;
}
[data-theme='dark'] .edt-onboarding-hint {
    color: #94a3b8 !important;
    border-top-color: #334155 !important;
}
[data-theme='dark'] .edt-onboarding-hint kbd {
    background: #243044 !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
[data-theme='dark'] .edt-onboarding-close {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e1 !important;
}
@media print {
    .edt-onboarding {
        display: none !important;
    }
}
/* Onboarding : variante desktop vs mobile (tips adaptes au tactile) */
.edt-onb-mobile {
    display: none;
}
.edt-onb-desktop {
    display: grid;
}
@media screen and (max-width: 640px) {
    .edt-onboarding {
        margin: 0.5rem 0.75rem 0;
        padding: 0.75rem 0.85rem 0.7rem;
    }
    .edt-onboarding-title {
        font-size: 0.82rem;
        margin-bottom: 0.4rem;
    }
    .edt-onboarding-tips {
        grid-template-columns: 1fr;
        gap: 0.4rem 0.5rem;
        margin-bottom: 0.4rem;
    }
    .edt-onboarding-tip {
        font-size: 0.76rem;
    }
    .edt-onboarding-hint {
        display: none;
    }
    .edt-onb-desktop {
        display: none;
    }
    .edt-onb-mobile {
        display: grid;
    }
    /* Modale d'ajout/edition de creneau sur mobile : grille 3 col + champs en colonne */
    .edt-mat-grid,
    .edt-mat-sub-row {
        grid-template-columns: repeat(3, 1fr);
    }
    .edt-field-row {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ===== Classe archivée : consultation seule (2026-07-27) ===== */
.edt-archived-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0.6rem 1rem;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    background: var(--warning-light, #fef3c7);
    border: 1px solid var(--warning, #f59e0b);
    color: var(--text-strong, #1f2937);
    font-weight: 600;
}
.edt-archived-copy {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.edt-archived-copy select {
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
}
/* Grille et reglages en lecture seule (le serveur refuse aussi les ecritures) */
.edt-archived #edtContent,
.edt-archived #edtSettings {
    pointer-events: none;
    opacity: 0.92;
}
.edt-archived .edt-tab-add,
.edt-archived .edt-day-toggle,
.edt-archived .edt-day-toggles-label {
    display: none;
}
@media print {
    .edt-archived-banner {
        display: none;
    }
    .edt-archived #edtContent {
        opacity: 1;
    }
}

/* Contraste AA en sombre : le bleu #3b82f6 ne portait le blanc du libellé (12 px)
   qu'à 3.68:1 sur les liens d'action de l'en-tête (décision 27-08-2026). */
[data-theme='dark'] .edt-action-link {
    background: #1d4ed8;
    color: #fff;
}
[data-theme='dark'] .edt-action-link:hover {
    background: #1e40af;
}
[data-theme='dark'] .edt-action-link-accent {
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
}
.edt-action-link {
    min-height: 44px !important;
    background: #2563eb !important;
}
#edtPrint,
.edt-tab-add,
#edtOnboardingClose {
    min-width: 44px !important;
    min-height: 44px !important;
}

/* ===== Cibles tactiles (audit du 2026-09-02) =====
   Mesures a 375x667 et 320x568 AVANT correction : pastilles de jour 8x8 px
   (10x10 pour l'active), fleche « Retour » 18x28, boutons Dupliquer et
   Supprimer d'un creneau 18x18. Sur un telephone, une croix « Supprimer » de
   18 px posee dans un creneau qu'on touche aussi pour l'editer se declenche
   par erreur. On porte la BOITE a 44 px en gardant le DESSIN petit (pastille
   interne en ::before), pour ne pas alourdir l'ecran. */
@media (hover: none), (pointer: coarse) {
    .edt-mobile-day-dots {
        margin-top: 0;
        gap: 0;
    }
    .edt-mobile-day-dot {
        width: 44px;
        height: 44px;
        background: transparent;
        position: relative;
        transform: none;
    }
    .edt-mobile-day-dot::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 8px;
        height: 8px;
        margin: -4px 0 0 -4px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.35);
    }
    .edt-mobile-day-dot.active {
        background: transparent;
        transform: none;
    }
    .edt-mobile-day-dot.active::before {
        width: 11px;
        height: 11px;
        margin: -5.5px 0 0 -5.5px;
        background: #fff;
    }

    .edt-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    .edt-slot-delete,
    .edt-slot-duplicate {
        width: 45px;
        height: 45px;
        top: 0;
        border-radius: 0;
        background: transparent;
    }
    .edt-slot-delete::before,
    .edt-slot-duplicate::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 24px;
        height: 24px;
        margin: -12px 0 0 -12px;
        border-radius: 50%;
    }
    .edt-slot-delete {
        right: 0;
    }
    .edt-slot-delete::before {
        background: rgba(220, 38, 38, 0.95);
    }
    /* 44 px d'ecart entre les deux centres : les boites ne se recouvrent pas,
       chacune reste atteignable. */
    .edt-slot-duplicate {
        right: 45px;
        background: transparent;
    }
    .edt-slot-duplicate::before {
        background: rgba(37, 99, 235, 0.95);
    }
    .edt-slot-delete i,
    .edt-slot-duplicate i {
        position: relative;
        z-index: 1;
    }

    .edt-setting-time,
    .edt-day-toggle,
    .edt-tab,
    .edt-stat-toggle,
    .edt-action-btn,
    .edt-action-link,
    .edt-bo-select {
        min-height: 44px;
    }
    /* Fleches jour precedent / suivant : 40 px de large mesures. */
    .edt-mobile-day-btn {
        min-width: 44px;
        min-height: 44px;
    }
    .edt-slot-split {
        left: 2px;
        right: auto;
        width: 45px;
        height: 45px;
        border-radius: 6px 0 0 6px;
    }
}