/* Style commun aux 10 fichiers tableau (030_01_SAND.html, etc.) */
:root {
  --fond: #f6f7f9;
  --vert: #1b7f4b;   /* texte « séq » */
  --orange: #b4501b; /* texte « cours » */
  --bleu: #1f5fbf;   /* texte « td/tp » */
  --rouge-fond: #fde4e4; /* fond des lignes de la semaine en cours */
  --vert-fond: #e6f6ea;  /* fond des lignes de la semaine suivante */
  --surface: #ffffff;
  --texte: #1d2433;
  --trait: #d5d9e2;
  --couleur: #1f5fbf; /* remplacée dans chaque fichier tableau */
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #14171d;
    --vert: #5fd08a;
    --orange: #f0a060;
    --bleu: #7aa7f5;
    --rouge-fond: #5e2a30;
    --vert-fond: #234a30;
    --surface: #1c2029;
    --texte: #e6e9f0;
    --trait: #343a48;
  }
}
html, body {
  margin: 0;
  background: transparent;
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Largeur des colonnes et hauteur des lignes : automatiques selon le contenu */
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  background: var(--surface);
}
th, td {
  padding: 12px 14px;
  border: 1px solid var(--trait);
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
  font-size: clamp(0.78rem, 2.6vw, 1rem);
}

/* Case date : le texte reste groupé (jour, date, horaire) */
.date { white-space: nowrap; letter-spacing: -0.04em; } /* resserre un peu les horaires */

/* Case devoir : lignes à compléter, en plus petit et en italique */
.petit { display: block; font-size: 0.8em; font-style: italic; }

/* Colonnes Séquence (vert), Cours (orange) et TD/TP (bleu), en plus petit et en italique (voir .petit) */
.seq { color: var(--vert); }
.cours { color: var(--orange); }
.tdtp { color: var(--bleu); }

/* Semaine en cours (rouge) et semaine suivante (vert), ajoutées automatiquement par tableaux.js */
.semaine-courante td { background: var(--rouge-fond); }
.semaine-suivante td { background: var(--vert-fond); }
.semaine-courante td:first-child,
.semaine-suivante td:first-child { box-shadow: inset 5px 0 0 var(--couleur); }

/* Ligne de titre : mise en valeur avec la couleur de l'onglet */
th {
  background: var(--couleur);
  color: var(--encre, #ffffff);
  font-weight: 700;
  border-color: var(--couleur);
}

/* Téléphone */
@media (max-width: 600px) {
  th, td { padding: 8px 4px; }
}

/* Page ouverte directement : titre, boutons et fond de page (comme dans l'emploi du temps) */
html.autonome { background: var(--fond); }
html.autonome body { max-width: 900px; margin: 0 auto; padding: 24px 16px; }
.entete-page { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; }
.entete-page h1 { margin: 0; font-size: clamp(1.1rem, 4vw, 1.4rem); }
.bouton {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 6px;
  background: var(--couleur);
  color: var(--encre, #ffffff);
  font-weight: 600;
  text-decoration: none;
}
.bouton:hover { filter: brightness(1.1); }
.bouton:focus-visible { outline: 2px solid var(--couleur); outline-offset: 2px; }
@media (max-width: 600px) { html.autonome body { padding: 16px 8px; } }