/* 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: 30%; }

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"; }
}