/* Sova, page web des professeurs, sur ordinateur (lot 20) : grand écran
   (64 rem, 1 024 px et plus), après style.css. Colonne de gauche
   (navigation du professeur connecté, sommaire des pages de l'éditeur),
   une partie à la fois, classes en deux volets, tableaux pleine largeur,
   messages comme une messagerie ; raccourcis clavier, collage d'un tableur
   et image glissée (lot 20C). Le téléphone et les petits écrans gardent la
   page d'avant. Pas de cadre dans les cartes : des filets et des teintes. */
.off-section, .drop-hint, .paste-table { display: none !important; }
kbd {
  font: inherit;
  font-size: 0.875rem;
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--field);
  white-space: nowrap;
}
dialog.shortcuts-help { width: min(32rem, calc(100% - 2rem)); }
.shortcut-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.6rem 1rem;
  align-items: center;
  margin: 0;
}
.shortcut-list dt { display: flex; align-items: center; gap: 0.25rem; }
.shortcut-list dd { margin: 0; }
body.dragging-files .image-field .drop-hint {
  display: block !important;
  margin-top: 0.25rem;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9375rem;
}
body.dragging-files .image-field {
  outline: 2px dashed var(--border);
  outline-offset: 4px;
  border-radius: 8px;
}
body.dragging-files .image-field.drop-target {
  outline: 3px dashed var(--accent);
  background: var(--bubble);
}

@media (min-width: 64rem) {
  body.with-side .screen {
    max-width: 100rem;
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: 2.5rem;
    align-items: start;
    padding: 1.5rem 2rem 3rem;
  }
  body.with-side .screen > * { grid-column: 2; }
  body.with-side .intro { grid-row: 1; }
  body.with-side main { grid-row: 2; }
  body.with-side .site-footer { grid-row: 3; }
  body.with-side .side {
    grid-column: 1;
    grid-row: 1 / span 3;
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 0.25rem 0.25rem 0.5rem;
  }
  /* Professeur connecté : la marque est dans la colonne ; le titre de la
     page reste pour les lecteurs d'écran. */
  body.with-nav .intro {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .side .brand { margin: 0.5rem 0.75rem 0; }
  .side-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
  .side-nav a {
    display: block;
    padding: 0.55rem 0.75rem;
    border-left: 3px solid transparent;
    border-radius: 8px;
    text-decoration: none;
  }
  .side-nav a:hover { background: var(--bubble); }
  .side-nav a[aria-current="page"] {
    border-left-color: var(--accent);
    background: var(--surface);
    font-weight: 600;
  }
  .outline { border-top: 1px solid var(--rule); padding-top: 1rem; }
  .outline-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
  button.outline-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    min-height: 0;
    padding: 0.35rem 0.6rem;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 6px;
    background: transparent;
    text-align: left;
  }
  button.outline-item:hover:not(:disabled) { border-color: transparent; background: var(--bubble); }
  button.outline-item[aria-current="true"],
  button.outline-item[aria-current="true"]:hover:not(:disabled) { border-left-color: var(--accent); background: var(--surface); }
  .outline-title { font-size: 0.9375rem; font-weight: 600; }
  .outline-summary {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: 0.875rem;
  }
  .outline-fix { color: var(--danger); font-size: 0.8125rem; font-weight: 600; }
  button.outline-add { margin: 0.5rem 0 0 0.75rem; }
  .side-foot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin: auto 0 0;
    padding: 0 0.75rem;
    font-size: 0.9375rem;
  }
  .side-foot a, .side-foot button { color: var(--muted); }

  /* Largeur de chaque partie : l'éditeur et le compte restent lisibles. */
  body.wide #app[data-view="editor"] { max-width: 62rem; }
  body.wide #app[data-view="lessons"] { max-width: 66rem; }
  body.wide #app[data-view="account"] { max-width: 42rem; }

  /* Éditeur : « ← Mes leçons » en haut, « Partager » en bas, toujours
     visibles. */
  body.wide #app[data-view="editor"] > .toolbar:not([hidden]) {
    position: sticky;
    top: 0;
    z-index: 4;
    margin: 0;
    padding: 0.5rem 0;
    background: var(--bg);
  }
  /* Un champ qui prend le focus n'est jamais caché par ces deux barres. */
  body.wide #app[data-view="editor"] :is(input, textarea, select, button, h2, .card) {
    scroll-margin: 4.5rem 0 7rem;
  }
  body.wide .card.share {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.75rem 1rem;
    box-shadow: 0 -6px 18px rgba(14, 20, 40, 0.12);
  }
  body.wide .card.share > h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  body.wide .card.share .summary-row { margin: 0; flex: 1 1 12rem; }
  body.wide .card.share .online-share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; }
  body.wide .card.share .online-link { margin: 0; }
  body.wide .card.share > .note { flex-basis: 100%; margin: 0; }
  body.wide .paste-table {
    display: table !important;
    border-collapse: collapse;
    margin-top: 0.5rem;
    font-size: 0.9375rem;
  }
  .paste-table th, .paste-table td { text-align: left; padding: 0.25rem 0.75rem 0.25rem 0; border-bottom: 1px solid var(--rule); }
  .paste-table th { color: var(--muted); font-weight: 600; font-size: 0.875rem; }

  /* Mes leçons : les actions de chaque leçon à droite. */
  body.wide .library-lessons li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1.5rem;
    align-items: center;
  }
  body.wide .library-lessons li > * { grid-column: 1; }
  body.wide .library-lessons li > .actions { grid-column: 2; grid-row: 1 / span 3; margin: 0; justify-content: flex-end; }

  /* Mes classes en deux volets. */
  .classes-body.two-panes {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 0 2rem;
    align-items: start;
  }
  .classes-body.two-panes.student-open { grid-template-columns: minmax(0, 1fr); }
  .classes-body.two-panes.student-open .class-list-pane { display: none; }
  .class-list-pane { position: sticky; top: 1rem; }
  .class-list-pane .field { margin-top: 0.5rem; }
  .class-nav { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.2rem; }
  .class-nav a {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid transparent;
    border-radius: 8px;
    text-decoration: none;
  }
  .class-nav a:hover { background: var(--bubble); }
  .class-nav a[aria-current="page"] { border-left-color: var(--accent); background: var(--bubble); }
  .class-nav .class-name { font-weight: 600; }
  .class-nav .note, .class-nav .unread-count { font-size: 0.875rem; }
  .class-pane > h3:first-child { margin-top: 0; }
  .class-pane > .note:first-child { margin-top: 0.25rem; }

  /* Détail d'un élève dans un panneau à côté du tableau. */
  .work-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 0 1.5rem;
    align-items: start;
  }
  .student-panel {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 0 0.25rem 0.5rem 1.25rem;
    border-left: 1px solid var(--rule);
  }
  .student-panel > .actions:first-child { margin-top: 0; justify-content: flex-end; }
  .student-panel > h3 { margin-top: 0; }

  /* Résultats : en-tête et prénoms qui restent visibles au défilement,
     tri par colonne, recherche d'un élève. */
  .class-results .results-wrap { max-height: min(70vh, 40rem); overflow: auto; }
  table.results thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface);
    box-shadow: inset 0 -1px 0 var(--rule);
  }
  table.results tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--surface); }
  table.results thead th:first-child { left: 0; z-index: 3; }
  table.results tr.selected > * { background: var(--bubble); }
  table.results th, table.results td { padding: 0.4rem 0.5rem; }
  table.results thead th { white-space: normal; vertical-align: bottom; min-width: 4.5rem; }
  table.results thead th:last-child { min-width: 0; }
  button.sort {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 2rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-weight: 600;
    text-align: left;
  }
  .sort-mark { color: var(--accent); font-size: 0.75rem; }
  .results-filter { max-width: 22rem; }
  .also-to { border: 0; padding: 0; margin: 0.75rem 0 0; min-width: 0; }
  .also-to legend { font-weight: 600; margin-bottom: 0; }
  .also-to .check { margin-top: 0.35rem; }

  /* Messages comme une messagerie : les élèves à gauche, le fil à droite. */
  .messenger {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: 0 1.5rem;
    align-items: start;
  }
  .messenger-thread { min-height: 18rem; padding-left: 1.5rem; border-left: 1px solid var(--rule); }
  .messenger-thread > .note { margin-top: 0.5rem; }
  .messenger .thread-panel > h4 { margin-top: 0; }
  .messenger ol.thread { max-height: min(55vh, 32rem); overflow-y: auto; padding-right: 0.25rem; }
  .messenger .conversations > li.current { margin: 0 -0.5rem; padding: 0.75rem 0.5rem; border-radius: 8px; background: var(--bubble); }
  .messenger .write-to { flex-direction: column; align-items: stretch; }
  .messenger .write-to .field { flex: none; }
  .messenger .write-to > button { align-self: flex-start; }

  /* Administration : des tableaux pleine largeur. */
  table.admin-table { width: 100%; border-collapse: collapse; }
  table.admin-table th, table.admin-table td {
    padding: 0.5rem 0.75rem 0.5rem 0;
    border-bottom: 1px solid var(--rule);
    text-align: left;
    vertical-align: middle;
  }
  table.admin-table thead th { color: var(--muted); font-size: 0.875rem; font-weight: 600; }
  table.admin-table tbody th { font-weight: normal; }
  table.admin-table td:last-child { width: 1%; white-space: nowrap; }
  table.admin-table .actions { margin: 0; flex-wrap: nowrap; justify-content: flex-end; }
  table.admin-table tr.admin-extra td { padding-top: 0; }
}

@media print {
  .side, .class-list-pane, .results-filter { display: none !important; }
  body.print-classes .screen, body.print-classes .classes-body.two-panes,
  body.print-classes .work-layout { display: block !important; }
  body.print-classes .student-panel {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    border: 0 !important;
  }
  body.print-classes .class-results .results-wrap { max-height: none !important; overflow: visible !important; }
  body.print-classes table.results th { position: static !important; }
  body.print-student .work-main,
  body.print-classes:not(.print-student) .student-panel { display: none !important; }
}