/* ==================================================================
   Tableau de bord S/SF/C — feuille de style unique
   ================================================================== */

:root {
  --encre: #1e2b26;
  --papier: #f2f0e8;
  --kraft: #e2daca;
  --kraft2: #d3c9b4;
  --pin: #2f6b5e;
  --ocre: #b8801f;
  --muet: #6e7b74;

  --titre: 'Bricolage Grotesque', system-ui, sans-serif;
  --texte: 'Source Serif 4', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Hauteur de l'en-tête + onglets, mesurée au chargement. */
  --h-chrome: 132px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

/*
 * Les règles d'auteur (`display: flex` sur le panneau, `display: grid` sur les
 * écrans) l'emportent sur la feuille du navigateur : sans cette ligne,
 * l'attribut `hidden` ne masque plus rien.
 */
[hidden] {
  display: none !important;
}

body {
  background: var(--kraft2);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 15px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

:focus-visible {
  outline: 2px solid var(--ocre);
  outline-offset: 2px;
}

button,
input {
  font: inherit;
  color: inherit;
}

/* --- Étiquettes techniques ---------------------------------------- */

.etiquette {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muet);
  margin: 0;
}

.erreur {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ocre);
  margin: 0;
}

/* --- Boutons ------------------------------------------------------- */

.bouton {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 14px;
  border-radius: 2px;
  border: 1px solid var(--encre);
  background: transparent;
  color: var(--encre);
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.bouton-plein {
  background: var(--encre);
  color: var(--papier);
}

.bouton-fin {
  border-color: var(--kraft2);
}

.bouton-danger {
  border-color: var(--ocre);
  color: var(--ocre);
}

.bouton-large {
  width: 100%;
  padding: 13px 14px;
  font-size: 15px;
}

.bouton:hover {
  background: var(--encre);
  color: var(--papier);
}

.bouton-danger:hover {
  background: var(--ocre);
  color: var(--papier);
}

/* --- Écrans chargement / login ------------------------------------ */

.ecran {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.ecran-boite {
  background: var(--papier);
  border: 1px solid var(--encre);
  border-radius: 2px;
  box-shadow: 0 2px 0 rgb(30 43 38 / 0.18);
  padding: 28px 24px;
  width: min(100%, 380px);
  display: grid;
  gap: 12px;
}

.ecran-titre {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.1;
  margin: 0;
}

.ecran-boite input {
  border: 1px solid var(--encre);
  border-radius: 2px;
  background: transparent;
  padding: 10px;
  font-family: var(--mono);
}

/* --- En-tête ------------------------------------------------------- */

#entete {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--encre);
  color: var(--papier);
  padding: 12px 14px 10px;
}

.entete-titre {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.05;
  margin: 0;
}

.entete-sous-titre {
  color: var(--kraft2);
  margin-top: 3px;
  font-size: 8.5px;
  letter-spacing: 0.09em;
}

.entete-selecteurs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.selecteur {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pastille-classe,
.pastille-niveau {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--kraft2);
  border-radius: 2px;
  background: transparent;
  color: var(--papier);
  padding: 5px 9px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.pastille-classe {
  text-align: left;
  line-height: 1.3;
}

.pastille-classe .nom {
  display: block;
  font-family: var(--titre);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.pastille-classe[aria-pressed='true'] {
  background: var(--papier);
  color: var(--encre);
  border-color: var(--papier);
}

.pastille-niveau[aria-pressed='true'] {
  background: var(--ocre);
  border-color: var(--ocre);
  color: var(--papier);
}

/* --- Onglets ------------------------------------------------------- */

#onglets {
  position: sticky;
  top: var(--h-entete, 0);
  z-index: 19;
  display: flex;
  gap: 0;
  background: var(--kraft2);
  border-bottom: 1px solid var(--encre);
}

.onglet {
  flex: 1;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 13px;
  padding: 10px 6px;
  border: 0;
  border-right: 1px solid var(--kraft);
  background: transparent;
  color: var(--muet);
  cursor: pointer;
}

.onglet:last-child {
  border-right: 0;
}

.onglet[aria-selected='true'] {
  background: var(--papier);
  color: var(--encre);
  box-shadow: inset 0 -2px 0 var(--encre);
}

/* --- Feuille ------------------------------------------------------- */

.feuille {
  background: var(--papier);
  box-shadow: 0 2px 0 rgb(30 43 38 / 0.18);
  max-width: 480px;
  margin: 0 auto;
  min-height: calc(100dvh - var(--h-chrome));
}

@media (min-width: 720px) {
  .feuille {
    max-width: none;
  }
}

.vue {
  padding: 12px 0 0;
}

/* --- Tableau du référentiel ---------------------------------------- */

.tableau-cadre {
  overflow: auto;
  max-height: calc(100dvh - var(--h-chrome));
}

#tableau-referentiel {
  min-width: 720px;
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

#tableau-referentiel thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--encre);
  color: var(--papier);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  padding: 8px 8px;
  border-right: 1px solid rgb(242 240 232 / 0.16);
}

#tableau-referentiel thead th.col-periode {
  text-align: center;
  padding: 6px 2px;
  width: 36px;
  min-width: 36px;
}

#tableau-referentiel thead th.col-periode .mois {
  display: block;
  font-weight: 400;
  font-size: 8px;
  letter-spacing: 0.06em;
  color: var(--kraft2);
  text-transform: none;
}

#tableau-referentiel thead th.col-periode.courante {
  background: var(--ocre);
}

#tableau-referentiel thead th.col-periode.courante .mois {
  color: var(--papier);
}

.col-numero {
  width: 64px;
  min-width: 64px;
  text-align: center !important;
}

.col-attendu {
  width: 38%;
}

/* Lignes de section : discipline + axe */
tr.section td {
  background: var(--kraft);
  border-top: 1px solid var(--encre);
  border-bottom: 1px solid var(--kraft2);
  padding: 7px 8px;
}

.section-titre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.section-discipline {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 13px;
}

.section-axe {
  font-family: var(--texte);
  font-weight: 400;
  font-style: italic;
  color: var(--encre);
}

.section-compteur {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--pin);
  white-space: nowrap;
}

.section-compteur.vide {
  color: var(--muet);
}

/* Sous-lignes de catégorie */
tr.categorie td {
  background: rgb(30 43 38 / 0.06);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--encre);
  padding: 4px 8px 4px 14px;
}

/* Lignes de contenu */
tr.contenu td {
  border-bottom: 1px solid var(--kraft2);
  padding: 7px 8px;
  vertical-align: top;
}

td.cellule-contenu {
  font-family: var(--texte);
  font-size: 13px;
}

.page-ref {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  color: var(--kraft2);
}

td.cellule-attendu {
  font-family: var(--texte);
  font-size: 12px;
  color: var(--muet);
}

td.cellule-numero {
  text-align: center;
  padding: 6px 4px;
}

.bouton-numero {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  border-radius: 2px;
  border: 1px solid var(--encre);
  background: var(--encre);
  color: var(--papier);
  padding: 3px 6px;
  min-width: 30px;
  cursor: pointer;
}

.bouton-numero.vide {
  background: transparent;
  color: var(--muet);
  border: 1px dashed var(--kraft2);
  font-weight: 400;
}

.bouton-numero:hover {
  border-color: var(--ocre);
}

td.cellule-periode {
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--pin);
  padding: 6px 2px;
  border-left: 1px solid var(--kraft2);
}

td.cellule-periode.remplie {
  background: rgb(47 107 94 / 0.12);
}

/* --- Mes leçons ---------------------------------------------------- */

.barre-vue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px 10px;
}

.liste-lecons {
  list-style: none;
  margin: 0;
  padding: 0 14px 96px;
}

.ligne-lecon {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--kraft2);
  cursor: pointer;
  text-align: left;
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  width: 100%;
}

.lecon-numero {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--encre);
  color: var(--papier);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  border-radius: 2px;
}

.lecon-titre {
  display: block;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
}

.lecon-date {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muet);
  margin-top: 2px;
}

.lecon-attendus {
  display: block;
  font-size: 12.5px;
  color: var(--muet);
  margin-top: 4px;
}

.barre-collante {
  position: sticky;
  bottom: 0;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--papier) 72%, rgb(242 240 232 / 0));
}

.vide-message {
  padding: 24px 14px;
  color: var(--muet);
  font-style: italic;
}

/* --- Reste à voir -------------------------------------------------- */

.compteur-reste {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 15px;
  margin: 0;
  padding: 0 14px 10px;
}

.encadre-ocre {
  margin: 0 14px 12px;
  border: 1px solid var(--ocre);
  border-left-width: 3px;
  border-radius: 2px;
  padding: 9px 11px;
  font-size: 13px;
  color: var(--encre);
  background: rgb(184 128 31 / 0.08);
}

.liste-reste {
  list-style: none;
  margin: 0;
  padding: 0 14px 24px;
}

.ligne-reste {
  border-top: 1px solid var(--kraft2);
  padding: 9px 0;
}

.jeton {
  display: inline-block;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 2px 5px;
  margin-right: 6px;
  vertical-align: 1px;
}

.jeton-ailleurs {
  background: rgb(184 128 31 / 0.16);
  color: var(--ocre);
  border: 1px solid var(--ocre);
}

.jeton-nulle-part {
  background: transparent;
  color: var(--muet);
  border: 1px solid var(--kraft2);
}

.reste-contenu {
  font-size: 13.5px;
}

.reste-attendu {
  font-size: 12px;
  color: var(--muet);
  margin-top: 2px;
}

/* --- Bandeau de synchronisation ------------------------------------ */

.bandeau-sync {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--ocre);
  color: var(--papier);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
  text-align: center;
}

/* --- Panneau d'encodage -------------------------------------------- */

.voile {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgb(30 43 38 / 0.55);
}

.panneau {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 51;
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  background: var(--papier);
  border-top: 3px solid var(--encre);
  border-radius: 2px 2px 0 0;
  animation: monter 0.18s ease-out;
}

@keyframes monter {
  from {
    transform: translateY(14px);
  }
}

.panneau form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 88dvh;
}

.panneau-poignee {
  width: 42px;
  height: 3px;
  background: var(--kraft2);
  margin: 8px auto 0;
}

.panneau-titre {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 17px;
  margin: 8px 14px 10px;
}

.champs-haut {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  margin: 0 14px;
}

.champ {
  display: grid;
  gap: 3px;
  margin: 0 14px 10px;
}

.champs-haut .champ {
  margin: 0 0 10px;
}

.champ input {
  border: 1px solid var(--encre);
  border-radius: 2px;
  background: transparent;
  padding: 8px;
  width: 100%;
  font-family: var(--texte);
}

#champ-numero,
#champ-date {
  font-family: var(--mono);
  font-size: 13px;
}

#erreur-panneau {
  margin: 0 14px 8px;
}

.panneau-liste-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 2px 14px 6px;
}

.compteur-coches {
  color: var(--pin);
}

.liste-contenus {
  flex: 1;
  overflow-y: auto;
  border-top: 1px solid var(--kraft2);
  min-height: 120px;
}

.groupe-entete {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--kraft);
  border-bottom: 1px solid var(--kraft2);
  padding: 6px 14px;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 12px;
}

.groupe-entete .axe {
  font-family: var(--texte);
  font-style: italic;
  font-weight: 400;
  color: var(--muet);
}

.option-contenu {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 9px;
  align-items: start;
  padding: 8px 14px;
  border-bottom: 1px solid var(--kraft2);
  cursor: pointer;
}

.option-contenu input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--pin);
}

.option-contenu.cochee {
  background: rgb(47 107 94 / 0.08);
}

.option-contenu.vise {
  box-shadow: inset 3px 0 0 var(--ocre);
}

.option-texte {
  display: block;
  font-size: 13px;
}

.option-attendu {
  display: block;
  font-size: 11.5px;
  color: var(--muet);
  margin-top: 2px;
}

.panneau-actions {
  display: flex;
  gap: 8px;
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--kraft2);
  background: var(--papier);
}

.panneau-actions .bouton-plein {
  margin-left: auto;
}

/* --- En-tête : réglages et années ---------------------------------- */

.entete-haut {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.bouton-icone {
  flex: none;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--kraft2);
  border-radius: 2px;
  background: transparent;
  color: var(--papier);
  padding: 5px 9px;
  cursor: pointer;
}

.bouton-icone:hover {
  background: var(--papier);
  color: var(--encre);
}

.pastille-annee {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  border: 1px solid var(--kraft2);
  border-radius: 2px;
  background: transparent;
  color: var(--papier);
  padding: 5px 9px;
  cursor: pointer;
}

.pastille-annee[aria-pressed='true'] {
  background: var(--papier);
  color: var(--encre);
  border-color: var(--papier);
}

/* --- Barre de filtre du référentiel -------------------------------- */

.barre-filtre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--kraft2);
}

.bascule {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

.bascule input {
  width: 17px;
  height: 17px;
  accent-color: var(--ocre);
  margin: 0;
}

/* --- Référentiel en cartes (téléphone) ----------------------------- */

.liste-referentiel {
  display: block;
  padding: 0 0 24px;
}

.tableau-cadre {
  display: none;
}

@media (min-width: 720px) {
  .liste-referentiel {
    display: none;
  }

  .tableau-cadre {
    display: block;
  }
}

.section-carte {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--kraft);
  border-top: 1px solid var(--encre);
  border-bottom: 1px solid var(--kraft2);
  padding: 7px 14px;
}

.categorie-carte {
  background: rgb(30 43 38 / 0.06);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 4px 14px;
}

.carte {
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--kraft2);
}

.carte-couverte {
  box-shadow: inset 3px 0 0 var(--pin);
}

.carte-contenu {
  margin: 0;
  font-size: 14px;
}

.carte-attendu {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--muet);
}

.carte-pied {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
  flex-wrap: wrap;
}

.carte-periodes {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.puce-periode {
  display: grid;
  gap: 1px;
  justify-items: center;
  min-width: 34px;
  padding: 3px 2px;
  border: 1px solid var(--kraft2);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
}

.puce-periode.courante {
  border-color: var(--ocre);
}

.puce-periode.remplie {
  background: rgb(47 107 94 / 0.12);
  border-color: var(--pin);
}

.puce-id {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  color: var(--muet);
}

.puce-periode.remplie .puce-id {
  color: var(--pin);
}

.puce-num {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--pin);
}

/* --- Recherche dans le panneau ------------------------------------- */

.barre-recherche {
  display: flex;
  gap: 8px;
  margin: 0 14px 8px;
}

.barre-recherche input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--encre);
  border-radius: 2px;
  background: transparent;
  padding: 8px 9px;
  font-family: var(--texte);
  font-size: 14px;
}

.puce {
  flex: none;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border: 1px solid var(--kraft2);
  border-radius: 2px;
  background: transparent;
  color: var(--muet);
  padding: 0 10px;
  cursor: pointer;
}

.puce[aria-pressed='true'] {
  background: var(--pin);
  border-color: var(--pin);
  color: var(--papier);
}

.liste-vide {
  padding: 20px 14px;
}

/* --- Panneau de réglages ------------------------------------------- */

.panneau-corps {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 88dvh;
}

.reglages-defilant {
  flex: 1;
  overflow-y: auto;
  padding: 0 14px 14px;
}

.bloc-etiquette {
  margin: 14px 0 7px;
  padding-top: 12px;
  border-top: 1px solid var(--kraft2);
}

.reglages-classes {
  display: grid;
  gap: 8px;
}

.ligne-classe {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 8px;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--kraft2);
}

.ligne-classe .champ-nom-classe {
  grid-column: 1 / -1;
  border: 1px solid var(--encre);
  border-radius: 2px;
  background: transparent;
  padding: 7px 8px;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 14px;
  width: 100%;
}

.ligne-classe select,
.ligne-ajout select {
  border: 1px solid var(--kraft2);
  border-radius: 2px;
  background: transparent;
  padding: 6px 7px;
  font-family: var(--mono);
  font-size: 11px;
}

.compte-lecons {
  justify-self: start;
}

.bouton-mini {
  padding: 5px 9px;
  font-size: 12px;
  justify-self: end;
}

.ligne-ajout {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  margin-top: 12px;
}

.ligne-ajout input {
  min-width: 0;
  border: 1px solid var(--encre);
  border-radius: 2px;
  background: transparent;
  padding: 7px 8px;
  font-family: var(--texte);
}

.reglages-annees {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.reglages-annees .pastille-annee {
  color: var(--encre);
  border-color: var(--encre);
}

.reglages-annees .pastille-annee[aria-pressed='true'] {
  background: var(--encre);
  color: var(--papier);
}

.note {
  font-size: 12.5px;
  color: var(--muet);
  margin: 8px 0 10px;
}

/* --- Référence citable --------------------------------------------- */

.ref-code {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muet);
}

.ref-option {
  display: inline-block;
  margin-left: 6px;
  font-size: 9px;
  color: var(--kraft2);
}

.barre-actions {
  display: flex;
  gap: 8px;
}

/* --- Groupes accueillis par une classe ----------------------------- */

.groupes-classe {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  grid-column: 1 / -1;
}

.groupe-case {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.groupe-case input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--pin);
}

/* --- Documents imprimables ----------------------------------------- */

#zone-impression {
  display: none;
}

/* --- Accessibilité ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* --- Impression ---------------------------------------------------- */

#entete-impression {
  display: none;
}

@media print {
  @page {
    margin: 12mm 10mm;
  }

  body {
    background: #fff;
    font-size: 9.5px;
  }

  #entete,
  #onglets,
  #bandeau-sync,
  #voile,
  #panneau,
  #panneau-reglages,
  .barre-vue,
  .barre-filtre,
  .barre-collante,
  .bouton,
  .selecteur,
  #ecran-chargement,
  #ecran-login {
    display: none !important;
  }

  /* On imprime le tableau, jamais la liste de cartes du téléphone. */
  .liste-referentiel {
    display: none !important;
  }

  .tableau-cadre {
    display: block !important;
  }

  .feuille {
    max-width: none;
    box-shadow: none;
    min-height: 0;
    background: #fff;
  }

  /* Toutes les sections sont dépliées et imprimées. */
  .vue[hidden] {
    display: block !important;
  }

  #entete-impression {
    display: block;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1.5px solid #000;
  }

  #entete-impression .titre-impression {
    font-family: var(--titre);
    font-weight: 800;
    font-size: 14px;
  }

  #entete-impression .meta-impression {
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .tableau-cadre {
    overflow: visible !important;
    max-height: none !important;
  }

  #tableau-referentiel {
    min-width: 0 !important;
    width: 100% !important;
    font-size: 9.5px;
  }

  #tableau-referentiel thead th {
    position: static;
    background: #000 !important;
    color: #fff !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  #tableau-referentiel thead {
    display: table-header-group;
  }

  tr,
  tr.contenu,
  tr.section,
  tr.categorie,
  .ligne-lecon,
  .ligne-reste {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  tr.section td {
    background: #e6e6e6 !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  td.cellule-periode.remplie {
    background: #eaeaea !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .bouton-numero {
    background: transparent !important;
    color: #000 !important;
    border: 0 !important;
    font-weight: 700;
  }

  .bouton-numero.vide {
    color: #999 !important;
  }

  /* ---- Documents dédiés : prépa et concertation -------------------- */

  body[data-impression] > *:not(#zone-impression) {
    display: none !important;
  }

  body[data-impression] #zone-impression {
    display: block !important;
  }

  .doc {
    font-family: var(--texte);
    font-size: 10.5px;
    color: #000;
  }

  .doc-entete {
    border-bottom: 2px solid #000;
    padding-bottom: 5px;
    margin-bottom: 10px;
  }

  .doc-titre {
    font-family: var(--titre);
    font-weight: 800;
    font-size: 17px;
    margin: 0;
  }

  .doc-meta {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin: 3px 0 0;
  }

  .doc-lecon-titre {
    font-family: var(--titre);
    font-weight: 600;
    font-size: 14px;
    margin: 0 0 10px;
  }

  .doc-zone {
    margin-bottom: 12px;
    break-inside: avoid;
  }

  .doc-saut {
    break-before: page;
  }

  .doc-zone-titre {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    border-bottom: 1px solid #000;
    padding-bottom: 2px;
    margin: 0 0 6px;
  }

  .doc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9.5px;
  }

  .doc-table th,
  .doc-table td {
    border: 1px solid #999;
    padding: 3px 4px;
    text-align: left;
    vertical-align: top;
  }

  .doc-table th {
    background: #000 !important;
    color: #fff !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .doc-table .col-code {
    width: 78px;
    font-family: var(--mono);
    font-size: 8.5px;
    font-weight: 700;
    white-space: nowrap;
  }

  .doc-table .col-domaine {
    width: 118px;
  }

  .doc-table .col-cat {
    width: 62px;
    font-family: var(--mono);
    font-size: 8px;
    text-transform: uppercase;
  }

  .doc-axe {
    display: block;
    font-style: italic;
    font-size: 9px;
  }

  .doc-attendu {
    color: #333;
  }

  .doc-cases {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.05em;
    margin: 0 0 5px;
  }

  .doc-case {
    margin-right: 12px;
    white-space: nowrap;
  }

  .doc-lignes {
    display: block;
  }

  .doc-ligne {
    display: block;
    border-bottom: 1px solid #bbb;
    height: 15px;
  }

  .doc-chiffre {
    font-family: var(--titre);
    font-weight: 800;
    font-size: 13px;
    margin: 0 0 6px;
  }

  .doc-synthese td {
    border: 0;
    border-bottom: 1px solid #ddd;
    padding: 2px 4px;
  }

  .doc-jauge {
    display: block;
    width: 100%;
    height: 7px;
    border: 1px solid #000;
  }

  .doc-jauge-remplie {
    display: block;
    height: 100%;
    background: #000 !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .doc-grille .col-periode {
    width: 26px;
    text-align: center;
    font-family: var(--mono);
    font-size: 8.5px;
  }

  .doc-grille .col-periode.remplie {
    background: #dcdcdc !important;
    font-weight: 700;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .doc-section td {
    background: #ececec !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .doc-liste {
    margin: 0;
    padding-left: 16px;
    font-size: 9.5px;
    columns: 2;
    column-gap: 18px;
  }

  .doc-liste li {
    break-inside: avoid;
    margin-bottom: 2px;
  }
}