/**
 * HorairePro — Gestionnaire d'horaire interactif pour WordPress
 * Copyright (C) 2026 André Michaud. Tous droits réservés.
 * https://andremichaud.com/horairepro
 */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Bebas+Neue&family=DM+Sans:wght@300;400;500;600&display=swap');

#ectq-app {
  --ectq-bg:      #0d0d0d;
  --ectq-surface: #161616;
  --ectq-surface2:#1f1f1f;
  --ectq-border:  #2a2a2a;
  --ectq-accent:  #02AFFF;
  --ectq-text:    #e8e4dc;
  --ectq-muted:   #aaaaaa;
  --ectq-green:   #4caf82;
  --ectq-red:     #e05a3a;
  --ectq-blue:    #5a8fe0;
  --ectq-purple:  #9b72e8;
  --bg:      #0d0d0d;
  --surface: #161616;
  --surface2:#1f1f1f;
  --border:  #2a2a2a;
  --accent:  #02AFFF;
  --text:    #e8e4dc;
  --muted:   #aaaaaa;
  --green:   #4caf82;
  --red:     #e05a3a;
  --blue:    #5a8fe0;
  display: flex;
  flex-direction: column;
  background: #0d0d0d;
  color: #e8e4dc;
  font-family: 'DM Sans', sans-serif;
  min-height: auto;
  height: auto;
  font-size: 14px;
  line-height: 1.5;
}
#ectq-app *, #ectq-app *::before, #ectq-app *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* HEADER */
#ectq-app .ectq-header { display:flex; align-items:center; justify-content:space-between; padding:16px 28px; border-bottom:1px solid #2a2a2a; background:#161616; flex-shrink:0; }
#ectq-app .ectq-logo { font-family:'Bebas Neue'; font-size:1.9rem; letter-spacing:3px; color:#02AFFF; line-height:1; }
#ectq-app .ectq-logo span { color:#aaa; font-size:0.8rem; font-family:'DM Mono'; letter-spacing:1px; display:block; margin-top:-4px; }
#ectq-app .header-actions { display:flex; gap:8px; align-items:center; }

/* BUTTONS */
#ectq-app .btn { padding:7px 16px; border-radius:4px; border:none; cursor:pointer; font-family:'DM Sans'; font-size:0.83rem; font-weight:500; transition:all 0.15s; display:inline-flex; align-items:center; gap:5px; text-decoration:none; }
#ectq-app .btn-ghost { background:transparent; border:1px solid #2a2a2a; color:#e8e4dc; }
#ectq-app .btn-ghost:hover { border-color:#02AFFF; color:#02AFFF; }
#ectq-app .btn-primary { background:#02AFFF; color:#0d0d0d; font-weight:700; border:none; }
#ectq-app .btn-primary:hover { background:#f0d050; }
#ectq-app .btn-sm { padding:4px 10px; font-size:0.75rem; }
#ectq-app .btn-danger { background:transparent; border:1px solid #e05a3a; color:#e05a3a; }
#ectq-app .btn-danger:hover { background:#e05a3a; color:white; }
#ectq-app .btn-success { background:transparent; border:1px solid #4caf82; color:#4caf82; }
#ectq-app .btn-success:hover { background:#4caf82; color:#0d0d0d; }
#ectq-app .hidden { display:none !important; }

/* TABS */
#ectq-app .ectq-tabs { display:flex; border-bottom:1px solid #2a2a2a; background:#161616; padding:0 28px; flex-shrink:0; overflow-x:auto; }
#ectq-app .ectq-tab { padding:13px 20px; cursor:pointer; font-size:0.85rem; font-weight:500; color:#aaa; border-bottom:2px solid transparent; transition:all 0.15s; white-space:nowrap; user-select:none; }
#ectq-app .ectq-tab:hover { color:#e8e4dc; }
#ectq-app .ectq-tab.active { color:#02AFFF; border-bottom-color:#02AFFF; }
#ectq-app .ectq-badge { display:inline-block; background:#e05a3a; color:white; border-radius:10px; padding:1px 6px; font-size:0.68rem; margin-left:4px; vertical-align:middle; }

/* LAYOUT */
#ectq-app .ectq-main { display:flex; flex:1; overflow:hidden; position:relative; }
#ectq-app .ectq-sidebar {
  width: 255px;
  border-right: 1px solid #2a2a2a;
  background: #161616;
  overflow-y: auto;
  flex-shrink: 0;
  /* Masqué par défaut — s'ouvre avec .open */
  margin-left: -255px;
  transition: margin-left 0.25s ease;
}
#ectq-app .ectq-sidebar.open { margin-left: 0; }
#ectq-app .ectq-content { flex:1; overflow-y:auto; padding:20px 28px; transition: padding-left 0.25s ease; }

/* SIDEBAR */
#ectq-app .sidebar-section { border-bottom:1px solid #2a2a2a; }
#ectq-app .sidebar-header { padding:12px 16px; display:flex; align-items:center; justify-content:space-between; }
#ectq-app .sidebar-header h3 { font-size:0.72rem; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:#aaa; }
#ectq-app .s-count { background:#1f1f1f; border-radius:10px; padding:2px 7px; font-size:0.68rem; font-family:'DM Mono'; color:#e8e4dc; }
#ectq-app .sidebar-body { padding:0 10px 10px; display:flex; flex-direction:column; gap:3px; }
#ectq-app .res-item { padding:9px 10px; border-radius:5px; display:flex; align-items:center; gap:8px; font-size:0.83rem; border:1px solid transparent; cursor:pointer; transition:background 0.1s; }
#ectq-app .res-item:hover { background:#1f1f1f; }
#ectq-app .res-item.filtered { border-color:#02AFFF !important; background:rgba(2,175,255,0.08); }
#ectq-app .res-item.unavailable { opacity:0.4; }
#ectq-app .dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
#ectq-app .dot-green { background:#4caf82; } #ectq-app .dot-red { background:#e05a3a; }
#ectq-app .res-name { flex:1; } #ectq-app .res-tag { font-size:0.68rem; font-family:'DM Mono'; color:#aaa; }

/* Pictogramme date — visible */
#ectq-app input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.7) brightness(1.8); opacity: 0.85; cursor: pointer; }
#ectq-app .gc-0  { background:rgba(90,143,224,0.30);  border-color:#5a8fe0; }
#ectq-app .gc-1  { background:rgba(76,175,130,0.30);  border-color:#4caf82; }
#ectq-app .gc-2  { background:rgba(2,175,255,0.30);   border-color:#02AFFF; }
#ectq-app .gc-3  { background:rgba(155,114,232,0.30); border-color:#9b72e8; }
#ectq-app .gc-4  { background:rgba(224,90,58,0.30);   border-color:#e05a3a; }
#ectq-app .gc-5  { background:rgba(224,150,50,0.30);  border-color:#e09632; }
#ectq-app .gc-6  { background:rgba(232,90,155,0.30);  border-color:#e85a9b; }
#ectq-app .gc-7  { background:rgba(58,191,224,0.30);  border-color:#3abfe0; }
#ectq-app .gc-8  { background:rgba(124,184,66,0.30);  border-color:#7cb842; }
#ectq-app .gc-9  { background:rgba(232,210,58,0.30);  border-color:#e8d23a; }
#ectq-app .gc-10 { background:rgba(160,90,224,0.30);  border-color:#a05ae0; }
#ectq-app .gc-11 { background:rgba(224,90,90,0.30);   border-color:#e05a5a; }

/* Palette adaptée aux daltoniens — dérivée d'Okabe-Ito, étendue à 12 teintes
   par variation de luminosité pour rester distinguable même en cas de
   daltonisme rouge-vert ou bleu-jaune. */
#ectq-app .gc-cb-0  { background:rgba(230,159,0,0.18);   border-color:#E69F00; }
#ectq-app .gc-cb-1  { background:rgba(86,180,233,0.18);  border-color:#56B4E9; }
#ectq-app .gc-cb-2  { background:rgba(0,158,115,0.18);   border-color:#009E73; }
#ectq-app .gc-cb-3  { background:rgba(240,228,66,0.22);  border-color:#c9ba1f; }
#ectq-app .gc-cb-4  { background:rgba(0,114,178,0.18);   border-color:#0072B2; }
#ectq-app .gc-cb-5  { background:rgba(213,94,0,0.18);    border-color:#D55E00; }
#ectq-app .gc-cb-6  { background:rgba(204,121,167,0.18); border-color:#CC79A7; }
#ectq-app .gc-cb-7  { background:rgba(126,214,214,0.18); border-color:#7ED6D6; }
#ectq-app .gc-cb-8  { background:rgba(139,90,43,0.18);   border-color:#8B5A2B; }
#ectq-app .gc-cb-9  { background:rgba(0,82,76,0.18);     border-color:#00524C; }
#ectq-app .gc-cb-10 { background:rgba(230,190,236,0.22); border-color:#c986d8; }
#ectq-app .gc-cb-11 { background:rgba(122,139,153,0.18); border-color:#7A8B99; }

/* WEEK NAV */
#ectq-app .week-nav { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
#ectq-app .week-nav h2 { font-family:'Bebas Neue'; font-size:1.5rem; letter-spacing:2px; color:#e8e4dc; }
#ectq-app .period-tag { background:#1f1f1f; border:1px solid #2a2a2a; padding:3px 10px; border-radius:4px; font-size:0.73rem; font-family:'DM Mono'; color:#aaa; }
#ectq-app .filter-bar { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; align-items:center; justify-content:center; }
#ectq-app .filter-chip { padding:4px 12px; border-radius:20px; border:1px solid #2a2a2a; font-size:0.75rem; cursor:pointer; transition:all 0.15s; color:#aaa; }
#ectq-app .filter-chip:hover { border-color:#e8e4dc; color:#e8e4dc; }
#ectq-app .filter-chip.active { color:#0d0d0d; font-weight:600; }
#ectq-app .filter-label { font-size:0.73rem; color:#aaa; font-family:'DM Mono'; }

/* SCHEDULE GRID */
#ectq-app .schedule-wrap { overflow-x:auto; }
#ectq-app .schedule-grid { display:grid; grid-template-columns:76px repeat(7,1fr); gap:1px; background:#2a2a2a; border-radius:8px; overflow:hidden; min-width:900px; }
#ectq-app .gh { background:#1f1f1f; padding:10px 6px; text-align:center; font-size:0.72rem; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:#aaa; }
#ectq-app .tl { background:#161616; padding:8px 6px; text-align:right; font-family:'DM Mono'; font-size:0.7rem; color:#aaa; display:flex; align-items:flex-start; justify-content:flex-end; padding-top:10px; }
#ectq-app .cell { background:#161616; min-height:80px; padding:3px; position:relative; cursor:pointer; transition:background 0.1s; }
#ectq-app .cell:hover { background:#1f1f1f; }
#ectq-app .cell-hint { width:100%; height:100%; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.15s; }
#ectq-app .cell:hover .cell-hint { opacity:1; }
#ectq-app .plus-ico { width:22px; height:22px; border:1px dashed #2a2a2a; border-radius:4px; display:flex; align-items:center; justify-content:center; color:#aaa; font-size:0.9rem; }
#ectq-app .ev { border-radius:5px; padding:5px 7px; font-size:0.75rem; cursor:pointer; transition:filter 0.1s; position:relative; border-left:3px solid; margin-bottom:2px; overflow:hidden; min-height:36px; }
#ectq-app .ev:hover { filter:brightness(1.12); }
#ectq-app .ev-title { font-weight:600; margin-bottom:1px; line-height:1.2; }
#ectq-app .ev-meta { font-size:0.66rem; opacity:0.75; font-family:'DM Mono'; }
#ectq-app .ev-tags { display:flex; gap:3px; flex-wrap:wrap; margin-bottom:3px; }
#ectq-app .ev-tag { display:inline-block; background:rgba(0,0,0,0.25); border-radius:3px; padding:1px 4px; font-size:0.62rem; }
#ectq-app .ev-conflict { border-left-color:#e05a3a !important; }
#ectq-app .cbadge { position:absolute; top:3px; right:3px; background:#e05a3a; color:white; border-radius:50%; width:14px; height:14px; display:flex; align-items:center; justify-content:center; font-size:0.58rem; font-weight:700; }
#ectq-app .ev-absent { background:rgba(224,90,58,0.1); border-color:#e05a3a; }
#ectq-app .avail-bar { height:3px; background:#2a2a2a; border-radius:2px; margin:7px 0; overflow:hidden; }
#ectq-app .avail-fill { height:100%; border-radius:2px; background:#4caf82; }
#ectq-app .avail-fill.warn { background:#02AFFF; } #ectq-app .avail-fill.danger { background:#e05a3a; }
#ectq-app .overlap-warning { background:rgba(224,90,58,0.08); border:1px solid rgba(224,90,58,0.3); border-radius:4px; padding:3px 6px; font-size:0.65rem; color:#e05a3a; margin-bottom:2px; }

/* ALERTS */
#ectq-app .alerts-bar { display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
#ectq-app .ac { flex:1; min-width:190px; padding:11px 14px; border-radius:6px; border:1px solid; display:flex; align-items:flex-start; gap:9px; }
#ectq-app .ac.warn { border-color:rgba(2,175,255,0.4); background:rgba(2,175,255,0.07); }
#ectq-app .ac.danger { border-color:rgba(224,90,58,0.4); background:rgba(224,90,58,0.07); }
#ectq-app .ac.ok { border-color:rgba(76,175,130,0.4); background:rgba(76,175,130,0.07); }
#ectq-app .ai { font-size:0.95rem; margin-top:1px; flex-shrink:0; }
#ectq-app .at { font-size:0.8rem; line-height:1.4; color:#e8e4dc; }
#ectq-app .at strong { display:block; margin-bottom:1px; font-size:0.82rem; }

/* GROUPS TAB */
#ectq-app .groups-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
#ectq-app .group-card { background:#161616; border:1px solid #2a2a2a; border-radius:8px; overflow:hidden; }
#ectq-app .group-card-header { padding:14px 16px; display:flex; align-items:center; gap:10px; border-bottom:1px solid #2a2a2a; }
#ectq-app .group-color-bar { width:4px; height:32px; border-radius:2px; flex-shrink:0; }
#ectq-app .group-card-name { font-weight:600; font-size:1rem; color:#e8e4dc; }
#ectq-app .group-card-sub { font-size:0.75rem; color:#aaa; font-family:'DM Mono'; }
#ectq-app .group-card-body { padding:14px 16px; }
#ectq-app .group-stat { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid #2a2a2a; font-size:0.82rem; color:#e8e4dc; }
#ectq-app .group-stat:last-child { border:none; }
#ectq-app .group-stat-val { font-family:'DM Mono'; font-weight:600; }
#ectq-app .group-stat-val.conflict { color:#e05a3a; }
#ectq-app .overlap-item { display:flex; align-items:flex-start; gap:8px; padding:7px; background:rgba(224,90,58,0.08); border:1px solid rgba(224,90,58,0.25); border-radius:5px; margin-bottom:6px; font-size:0.78rem; color:#e8e4dc; }
#ectq-app .overlap-item-ok { background:rgba(76,175,130,0.08); border-color:rgba(76,175,130,0.25); color:#4caf82; }
#ectq-app .mini-schedule { display:grid; grid-template-columns:50px repeat(7,1fr); gap:1px; background:#2a2a2a; border-radius:5px; overflow:hidden; margin-top:10px; }
#ectq-app .mh { background:#1f1f1f; padding:4px 3px; text-align:center; color:#aaa; font-size:0.62rem; font-weight:600; }
#ectq-app .mtl { background:#161616; padding:3px 4px; text-align:right; font-family:'DM Mono'; color:#aaa; font-size:0.58rem; display:flex; align-items:center; justify-content:flex-end; }
#ectq-app .mc { background:#161616; min-height:24px; padding:2px; }
#ectq-app .mc-ev { border-radius:2px; padding:2px 3px; font-size:0.58rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-left:2px solid; }

/* CARDS */
#ectq-app .card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
#ectq-app .card { background:#161616; border:1px solid #2a2a2a; border-radius:8px; padding:16px; }
#ectq-app .card-name { font-weight:600; font-size:0.95rem; margin-bottom:3px; color:#e8e4dc; }
#ectq-app .card-sub { font-size:0.75rem; color:#aaa; margin-bottom:10px; font-family:'DM Mono'; }
#ectq-app .card-status { display:flex; align-items:center; gap:7px; font-size:0.8rem; margin-bottom:7px; color:#e8e4dc; }
#ectq-app .add-card { border:1px dashed #2a2a2a; display:flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; color:#aaa; transition:all 0.15s; min-height:110px; border-radius:8px; font-size:0.85rem; }
#ectq-app .add-card:hover { border-color:#02AFFF; color:#02AFFF; }
#ectq-app .section-title { font-family:'Bebas Neue'; font-size:1.35rem; letter-spacing:2px; margin-bottom:18px; display:flex; align-items:center; gap:10px; color:#e8e4dc; }
#ectq-app .section-title span { font-family:'DM Mono'; font-size:0.73rem; color:#aaa; letter-spacing:1px; font-weight:400; }

/* LEGEND */
#ectq-app .legend { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
#ectq-app .li { display:flex; align-items:center; gap:5px; font-size:0.73rem; color:#aaa; }
#ectq-app .ld { width:9px; height:9px; border-radius:2px; }
#ectq-app .pill { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:20px; font-size:0.7rem; font-family:'DM Mono'; border:1px solid #2a2a2a; }

/* TAB PANELS */
#ectq-app .tab-panel { display:none; }
#ectq-app .tab-panel.active { display:block; }

/* MODALS */
#ectq-app .ectq-overlay { position:fixed !important; inset:0 !important; background:rgba(0,0,0,0.75); z-index:99999 !important; display:flex; align-items:center; justify-content:center; padding:16px; backdrop-filter:blur(3px); }
#ectq-app .ectq-overlay.hidden { display:none !important; }
#ectq-app .modal { background:#161616; border:1px solid #2a2a2a; border-radius:10px; width:100%; max-width:520px; padding:24px; max-height:90vh; overflow-y:auto; }
#ectq-app .modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
#ectq-app .modal-header h3 { font-family:'Bebas Neue'; font-size:1.35rem; letter-spacing:2px; color:#e8e4dc; }
#ectq-app .close-btn { background:none; border:none; color:#aaa; font-size:1.3rem; cursor:pointer; line-height:1; }
#ectq-app .close-btn:hover { color:#e8e4dc; }
#ectq-app .form-group { margin-bottom:14px; }
#ectq-app label { display:block; font-size:0.75rem; font-weight:500; text-transform:uppercase; letter-spacing:1px; color:#aaa; margin-bottom:5px; }
#ectq-app input, #ectq-app select, #ectq-app textarea { width:100%; background:#0d0d0d; border:1px solid #2a2a2a; border-radius:5px; color:#e8e4dc; font-family:'DM Sans'; font-size:0.875rem; padding:9px 11px; outline:none; transition:border-color 0.15s; }
#ectq-app input:focus, #ectq-app select:focus, #ectq-app textarea:focus { border-color:#02AFFF; }
#ectq-app select option { background:#1f1f1f; }
#ectq-app .form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
#ectq-app .modal-footer { display:flex; gap:9px; justify-content:flex-end; margin-top:20px; padding-top:16px; border-top:1px solid #2a2a2a; }
#ectq-app .conflict-preview { background:rgba(224,90,58,0.08); border:1px solid rgba(224,90,58,0.3); border-radius:5px; padding:10px 12px; margin-top:12px; font-size:0.8rem; display:none; color:#e8e4dc; }
#ectq-app .conflict-preview.show { display:block; }
#ectq-app .group-checkboxes { display:flex; flex-direction:column; gap:6px; }
#ectq-app .group-cb { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:5px; border:1px solid #2a2a2a; cursor:pointer; transition:all 0.15s; font-size:0.83rem; user-select:none; color:#e8e4dc; }
#ectq-app .group-cb:hover { border-color:#aaa; }
#ectq-app .group-cb.selected { border-color:#02AFFF; background:rgba(2,175,255,0.08); }
#ectq-app .group-cb input[type=checkbox] { width:auto; accent-color:#02AFFF; cursor:pointer; }
#ectq-app .group-dot { width:10px; height:10px; border-radius:2px; flex-shrink:0; }
#ectq-app .reason-chips { display:flex; gap:7px; flex-wrap:wrap; margin-top:6px; }
#ectq-app .rc { padding:5px 11px; border-radius:20px; border:1px solid #2a2a2a; font-size:0.77rem; cursor:pointer; transition:all 0.15s; color:#e8e4dc; }
#ectq-app .rc:hover, #ectq-app .rc.selected { border-color:#02AFFF; background:rgba(2,175,255,0.12); color:#02AFFF; }

/* SCROLLBAR */
#ectq-app ::-webkit-scrollbar { width:4px; height:4px; }
#ectq-app ::-webkit-scrollbar-track { background:#161616; }
#ectq-app ::-webkit-scrollbar-thumb { background:#2a2a2a; border-radius:2px; }

/* LOADING */
#ectq-app .ectq-loading { display:flex; align-items:center; justify-content:center; height:200px; color:#aaa; font-family:'DM Mono'; font-size:0.85rem; }

/* TOGGLE OCCURRENCE */
#ectq-app .ectq-toggle-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #2a2a2a;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}
#ectq-app .ectq-toggle-option:hover { border-color: #aaa; }
#ectq-app .ectq-toggle-option input[type=radio] { display: none; }
#ectq-app .ectq-toggle-option.selected { border-color: #02AFFF; background: rgba(2,175,255,0.08); }
#ectq-app .ectq-toggle-btn { font-size: 0.85rem; font-weight: 600; color: #e8e4dc; }
#ectq-app .ectq-toggle-option.selected .ectq-toggle-btn { color: #02AFFF; }

/* NOTE FIELD */
#ectq-app .ev-note {
  font-size: 0.66rem;
  font-style: italic;
  color: rgba(232,228,220,0.6);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Badges row — en flux sous le titre */
#ectq-app .ev-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 3px;
}

/* Badge local fermé */
#ectq-app .ev-room-badge {
  display: inline-block;
  background: rgba(232,90,58,0.2);
  border: 1px solid #e05a3a;
  color: #e05a3a;
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}
#ectq-app .ev-room-unavail {
  outline: 2px dashed #e05a3a;
  outline-offset: -2px;
}

/* Badge ponctuel */
#ectq-app .ev-ponctuel-badge {
  display: inline-block;
  background: #000;
  color: #fff;
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* ============================================================
   RESPONSIVE — MOBILE (≤ 768px)
   ============================================================ */

/* Bouton panneau latéral — visible sur desktop ET mobile */
#ectq-app .sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #2a2a2a;
  color: #e8e4dc;
  border-radius: 4px;
  padding: 5px 9px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}

@media (max-width: 768px) {

  /* ── HEADER ── */
  #ectq-app .ectq-header {
    padding: 10px 14px;
    gap: 10px;
    flex-wrap: wrap;
  }
  #ectq-app .ectq-logo { font-size: 1.4rem; }
  #ectq-app .ectq-logo span { font-size: 0.65rem; }
  #ectq-app .header-actions { gap: 5px; flex-wrap: wrap; }
  #ectq-app .header-actions .btn { padding: 6px 10px; font-size: 0.75rem; }
  /* Masquer le texte des boutons, garder les icônes */
  #ectq-app .header-actions .btn-ghost:not(.keep-text) { padding: 6px 8px; }
  #ectq-app .sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; }

  /* ── TABS ── */
  #ectq-app .ectq-tabs { padding: 0 10px; }
  #ectq-app .ectq-tab { padding: 10px 12px; font-size: 0.78rem; }

  /* ── LAYOUT PRINCIPAL ── */
  #ectq-app .ectq-main { flex-direction: column; overflow: visible; }

  /* Sidebar mobile : slide-down quand .open */
  #ectq-app .ectq-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #2a2a2a;
    margin-left: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    flex-shrink: 0;
  }
  #ectq-app .ectq-sidebar.open {
    max-height: 420px;
    overflow-y: auto;
  }
  /* Sidebar en row sur mobile */
  #ectq-app .ectq-sidebar .sidebar-section {
    display: inline-block;
    border-bottom: none;
    border-right: 1px solid #2a2a2a;
    vertical-align: top;
    width: 100%;
  }
  /* Sections en flex horizontal */
  #ectq-app .ectq-sidebar > div {
    display: flex;
    flex-wrap: wrap;
  }
  #ectq-app .ectq-sidebar .sidebar-section { width: auto; min-width: 140px; flex: 1; }

  /* ── CONTENU PRINCIPAL ── */
  #ectq-app .ectq-content { padding: 14px; overflow-y: visible; }

  /* ── NAVIGATION SEMAINE ── */
  #ectq-app .week-nav { gap: 8px; margin-bottom: 12px; }
  #ectq-app .week-nav h2 { font-size: 1.1rem; }
  #ectq-app .period-tag { font-size: 0.65rem; padding: 2px 7px; }

  /* ── GRILLE HORAIRE ── */
  #ectq-app .schedule-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #ectq-app .schedule-grid {
    min-width: 560px;
    grid-template-columns: 54px repeat(7, 1fr);
  }
  #ectq-app .gh { padding: 6px 2px; font-size: 0.6rem; letter-spacing: 0; }
  #ectq-app .tl { font-size: 0.58rem; padding: 6px 3px; }
  #ectq-app .cell { min-height: 68px; padding: 2px; }
  #ectq-app .ev { padding: 3px 5px; font-size: 0.67rem; }
  #ectq-app .ev-title { font-size: 0.65rem; }
  #ectq-app .ev-meta { font-size: 0.56rem; }
  #ectq-app .ev-tags { display: flex; gap: 2px; margin-bottom: 2px; }
  #ectq-app .ev-tag { font-size: 0.54rem; padding: 0 3px; line-height: 1.3; }
  #ectq-app .ev-note { display: none; }
  #ectq-app .cbadge { width: 11px; height: 11px; font-size: 0.5rem; }

  /* ── FILTRES ── */
  #ectq-app .filter-bar { gap: 5px; margin-bottom: 10px; }
  #ectq-app .filter-chip { font-size: 0.68rem; padding: 3px 9px; }
  #ectq-app .legend { gap: 8px; margin-bottom: 10px; }
  #ectq-app .li { font-size: 0.65rem; }

  /* ── GRILLES DE CARTES ── */
  #ectq-app .groups-grid { grid-template-columns: 1fr; gap: 10px; }
  #ectq-app .card-grid   { grid-template-columns: 1fr 1fr; gap: 10px; }
  #ectq-app .mini-schedule { display: none; } /* trop petit sur mobile */

  /* ── SECTION TITLES ── */
  #ectq-app .section-title { font-size: 1.1rem; margin-bottom: 12px; }

  /* ── ALERTES ── */
  #ectq-app .alerts-bar { flex-direction: column; gap: 7px; margin-bottom: 12px; }
  #ectq-app .ac { min-width: unset; }

  /* ── MODALS ── */
  #ectq-app .ectq-overlay { padding: 0; align-items: flex-end; }
  /* Tous les modaux d'édition restent centrés sur tous les formats */
  #ectq-app #ectq-event-modal,
  #ectq-app #ectq-choice-modal,
  #ectq-app #ectq-exception-modal,
  #ectq-app #ectq-group-modal,
  #ectq-app #ectq-teacher-modal,
  #ectq-app #ectq-room-modal,
  #ectq-app #ectq-absence-modal {
    align-items: center !important;
    padding: 16px !important;
  }
  #ectq-app .modal {
    border-radius: 14px 14px 0 0;
    max-height: 92vh;
    padding: 20px 16px;
    border-left: none;
    border-right: none;
    border-bottom: none;
    width: 100%;
    max-width: 100%;
  }
  #ectq-app .modal-header { margin-bottom: 14px; }
  #ectq-app .modal-header h3 { font-size: 1.1rem; }
  #ectq-app .form-row { grid-template-columns: 1fr; gap: 10px; }
  #ectq-app .form-group { margin-bottom: 11px; }
  #ectq-app .modal-footer { flex-wrap: wrap; gap: 7px; }
  #ectq-app .modal-footer .btn { flex: 1; justify-content: center; min-width: 90px; }

  /* Occurrence toggle empilé sur mobile */
  #ectq-app .ectq-toggle-option { padding: 8px 10px; }
  #ectq-app .ectq-toggle-btn { font-size: 0.78rem; }

  /* Reason chips plus compactes */
  #ectq-app .reason-chips { gap: 5px; }
  #ectq-app .rc { padding: 4px 9px; font-size: 0.72rem; }

}

@media (max-width: 420px) {
  /* Très petits écrans */
  #ectq-app .card-grid { grid-template-columns: 1fr; }
  #ectq-app .ectq-tab { padding: 9px 8px; font-size: 0.72rem; }
  #ectq-app .header-actions .btn span.btn-label { display: none; } /* icône seule */
  #ectq-app .schedule-grid { min-width: 480px; grid-template-columns: 44px repeat(7,1fr); }
  #ectq-app .gh { font-size: 0.55rem; }
  #ectq-app .cell { min-height: 48px; }
}

/* DATE DANS EN-TÊTE GRILLE */
#ectq-app .gh { flex-direction: column; gap: 2px; }
#ectq-app .gh-date { display: block; font-size: 0.75rem; font-weight: 700; color: #e8e4dc; font-family: 'DM Mono', monospace; letter-spacing: 0; }
#ectq-app .gh-today { background: rgba(2,175,255,0.12) !important; color: #02AFFF !important; }
#ectq-app .gh-today .gh-date { color: #02AFFF; }

/* ── EXCEPTIONS ─────────────────────────────────────────── */
#ectq-app .ev-modified {
  outline: 2px solid #e05a3a;
  outline-offset: -2px;
}

#ectq-app .ev-exception-badge {
  display: inline-block;
  background: rgba(224,90,58,0.2);
  border: 1px solid #e05a3a;
  color: #e05a3a;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 1px 5px;
  border-radius: 3px;
  margin-bottom: 3px;
}

#ectq-app .ev-exception-badge + .ev-ponctuel-badge,
#ectq-app .ev-ponctuel-badge + .ev-exception-badge {
  margin-left: 3px;
}

/* Modaux de choix et d'exception — toujours centrés */
#ectq-choice-modal,
#ectq-exception-modal {
  align-items: center !important;
  padding: 16px !important;
}

#ectq-choice-modal .modal-box {
  width: 100%;
  max-width: 420px;
  border-radius: 14px;
}
#ectq-choice-modal .btn {
  text-align: left;
  padding: 10px 14px;
  line-height: 1.4;
  height: auto;
  white-space: normal;
}

#ectq-choice-modal .btn small {
  display: block;
  margin-top: 2px;
}

/* Bouton + dans cellule occupée */
#ectq-app .cell { position: relative; }
#ectq-app .cell-add-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  background: rgba(255,255,255,0.12);
  border-radius: 4px;
  font-size: 0.85rem;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  color: rgba(255,255,255,0.6);
  z-index: 2;
  transition: background 0.15s, color 0.15s;
}
#ectq-app .cell-add-btn:hover {
  background: rgba(2,175,255,0.3);
  color: #02AFFF;
}

/* ── JOURNÉE COMPLÈTE ───────────────────────────────────── */
#ectq-app .ev-fullday-badge {
  display: inline-block;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 1px 5px;
  border-radius: 3px;
  margin-bottom: 3px;
}

/* Bloc PM d'une journée complète : légèrement atténué pour indiquer la continuité */
#ectq-app .ev.ev-fullday-dim {
  opacity: 0.75;
  border-top: 2px dashed rgba(255,255,255,0.3);
}

/* ── COPYRIGHT ──────────────────────────────────────────── */
#ectq-app .ectq-copyright {
  text-align: center;
  padding: 14px 20px;
  font-size: 0.72rem;
  color: #444;
  border-top: 1px solid #1e1e1e;
  margin-top: 20px;
}
#ectq-app .ectq-copyright a {
  color: #555;
  text-decoration: none;
}
#ectq-app .ectq-copyright a:hover { color: #02AFFF; }

/* ── SURBRILLANCE — navigation depuis le panneau d'alertes ── */
#ectq-app .ev.ev-flash-highlight {
  animation: ectqFlashHighlight 2.2s ease-out;
}
@keyframes ectqFlashHighlight {
  0%   { box-shadow: 0 0 0 3px #ffb100, 0 0 14px 4px rgba(255,177,0,0.7); }
  70%  { box-shadow: 0 0 0 3px #ffb100, 0 0 14px 4px rgba(255,177,0,0.5); }
  100% { box-shadow: none; }
}

/* ── Bandeau d'alerte de fermeture ── */
#ectq-app .ectq-closure-banner {
  background: linear-gradient(90deg, #7a2a1f, #9c3a26);
  border-bottom: 3px solid #e05a3a;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
}
#ectq-app .ectq-closure-icon {
  flex-shrink: 0;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#ectq-app .ectq-closure-text { flex: 1; min-width: 0; }
#ectq-app .ectq-closure-title { font-weight: 700; font-size: 0.98rem; margin-bottom: 2px; }
#ectq-app .ectq-closure-msg { font-size: 0.86rem; color: #ffe0d8; }
#ectq-app .ectq-closure-time { font-size: 0.7rem; color: #ffcfc2; margin-top: 4px; }
#ectq-app .ectq-closure-clear {
  flex-shrink: 0;
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
}
#ectq-app .ectq-closure-clear:hover { background: rgba(255,255,255,0.28); }