/* La grille du semestre : semaines en lignes, créneaux en colonnes. */
table.grille { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.grille thead th {
  text-align: left; padding: .5rem .7rem; border-bottom: 2px solid var(--trait);
  font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--doux);
}
table.grille tbody tr { border-bottom: 1px solid var(--trait); }
table.grille th[scope="row"] { text-align: left; padding: .7rem; white-space: nowrap; vertical-align: top; }
table.grille td { padding: .55rem .7rem; vertical-align: top; width: 42%; }

th[scope="row"] .numero {
  display: inline-block; min-width: 1.6rem; text-align: center;
  background: var(--encre); color: var(--papier); border-radius: 2px;
  font-size: .75rem; padding: .05rem .3rem; margin-right: .4rem;
}
th[scope="row"] .date { color: var(--doux); font-weight: 400; }

.ligne-hors-grille th[scope="row"] .date { font-style: italic; }

.case.posee { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.case.fermee { background: color-mix(in srgb, var(--doux) 10%, transparent); }
.case.absente { background: repeating-linear-gradient(
  135deg, transparent, transparent 6px,
  color-mix(in srgb, var(--doux) 8%, transparent) 6px,
  color-mix(in srgb, var(--doux) 8%, transparent) 12px); }

.pose { margin-bottom: .3rem; }
.pose strong { display: block; }
.etiquette.commune { border-color: var(--accent); color: var(--accent); }
.etiquette.statut { border-style: dashed; }
.ferme { color: var(--doux); font-style: italic; }
.ferme .note { display: block; font-style: normal; font-size: .8rem; }
.cote-bio { display: block; margin-top: .3rem; font-size: .78rem; color: var(--doux); }
.apres-grille { margin-top: 1.5rem; font-size: .92rem; color: var(--doux); }
.onglets .ailleurs { margin-left: auto; border: none; color: var(--accent); }

@media (max-width: 700px) {
  table.grille, table.grille thead, table.grille tbody, table.grille tr,
  table.grille th, table.grille td { display: block; width: auto; }
  table.grille thead { display: none; }
  table.grille tbody tr { padding: .5rem 0; }
  table.grille td.absente { display: none; }
  table.grille td::before {
    display: block; font-size: .7rem; text-transform: uppercase;
    letter-spacing: .05em; color: var(--doux);
  }
  table.grille td:nth-of-type(1)::before { content: "8h15"; }
  table.grille td:nth-of-type(2)::before { content: "10h00"; }
  table.grille td:nth-of-type(3)::before { content: "Hors grille"; }
}

/* Un créneau hors des deux colonnes ne mérite pas une colonne : il devient une
   ligne de remarque sous sa semaine. */
tr.remarque { border-bottom: none; }
tr.remarque th[scope="row"] { padding-top: 0; }
tr.remarque td { padding-top: 0; color: var(--doux); font-size: .84rem; }
tr.remarque .mention {
  display: inline-block; margin-right: .5rem; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .06em;
  border: 1px solid var(--trait); border-radius: 999px; padding: 0 .5rem;
}
tr.remarque strong { font-weight: 600; color: var(--encre); }

@media (max-width: 700px) {
  table.grille td:nth-of-type(1)::before { content: "8h15"; }
  table.grille td:nth-of-type(2)::before { content: "10h00"; }
  tr.remarque td::before { content: "Remarque" !important; }
}

/* Une proposition de la biologie se lit, elle n'occupe pas de créneau. */
tr.proposition-bio td { background: color-mix(in srgb, #4a6fa5 8%, transparent); }
tr.proposition-bio .item { display: block; margin-top: .2rem; }
tr.proposition-bio .item.taches { font-style: italic; }

/* S-023 : poser et retirer depuis la grille */
.poser-lien { display: inline-block; margin-top: .3rem; font-size: .85rem; }
.retirer { margin: .2rem 0 0; }
.retirer button { border: none; padding: 0; font-size: .78rem; color: var(--doux); text-decoration: underline; background: none; }
.retirer button:hover { color: var(--accent); background: none; }

/* Glisser-déposer et bibliothèque (S-023, suite) */
.pose[draggable="true"], .cartes-blocs li { cursor: grab; }
.en-vol { opacity: .4; }
.case.libre[data-creneau].survol {
  outline: 2px dashed var(--accent); outline-offset: -3px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.bibliotheque {
  position: sticky; bottom: 0; margin-top: 1.5rem;
  border: 1px solid var(--trait); border-radius: 4px 4px 0 0;
  background: var(--papier); padding: .8rem 1rem .6rem;
  box-shadow: 0 -4px 14px color-mix(in srgb, var(--encre) 7%, transparent);
}
.bibliotheque.survol { outline: 2px dashed var(--doux); outline-offset: -4px; }
.bibliotheque-tete { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.bibliotheque-tete h2 { margin: 0; }
.bibliotheque-tete input {
  margin-left: auto; padding: .35rem .6rem; font: inherit; min-width: 12rem;
  border: 1px solid var(--trait); background: var(--papier); color: var(--encre);
}
.bibliotheque > .meta { margin: .3rem 0 .6rem; }
.cartes-blocs {
  list-style: none; margin: 0; padding: 0 0 .4rem;
  display: flex; gap: .6rem; overflow-x: auto;
}
.cartes-blocs li {
  flex: 0 0 15rem; border: 1px solid var(--trait); border-radius: 3px;
  padding: .5rem .7rem; font-size: .85rem; background: var(--papier);
}
.cartes-blocs li strong { display: block; line-height: 1.3; }
.cartes-blocs li:hover { border-color: var(--accent); }
.apercu-dialogue {
  border: 1px solid var(--trait); border-radius: 4px; padding: 1.2rem 1.5rem;
  max-width: 34rem; width: 90vw; background: var(--papier); color: var(--encre);
}
.apercu-dialogue::backdrop { background: color-mix(in srgb, var(--encre) 45%, transparent); }
.apercu-dialogue h2 { margin-top: 0; }
.apercu-actions { display: flex; gap: .8rem; margin-bottom: 0; }

/* Un bloc qui a des documents se voit ; un bloc creux reste transparent. */
.cartes-blocs li.pleine {
  background: color-mix(in srgb, var(--pret) 10%, transparent);
  border-color: color-mix(in srgb, var(--pret) 50%, var(--trait));
}
.cartes-blocs li.creuse { background: transparent; }
.cartes-blocs li.creuse strong { color: var(--doux); }