/* Feuille de style propre à l'application. Bootstrap fournit la base ; seuls
   les éléments spécifiques au calendrier sont définis ici. */

:root {
  --menu-today: #0d6efd;
  --menu-meal-bg: #ffffff;
  --menu-closed-bg: #f1f3f5;
  --menu-unknown-bg: #fbfbfc;
}

.skip-link {
  position: absolute;
  z-index: 1080;
  padding: 0.5rem 1rem;
  background: var(--bs-body-bg);
}

/* --- Grille mensuelle (écrans larges) --- */

.calendar-grid {
  table-layout: fixed;
}

.calendar-cell {
  width: 14.28%;
  height: 9.5rem;
  padding: 0.5rem;
  overflow: hidden;
  font-size: 0.8125rem;
  vertical-align: top;
  background-color: var(--menu-unknown-bg);
}

.calendar-cell .day-number {
  font-weight: 600;
  color: var(--bs-secondary-color);
}

.calendar-cell.out-of-month {
  background-color: var(--bs-tertiary-bg);
  opacity: 0.45;
}

.calendar-cell.weekend:not(.state-meal):not(.state-closed) {
  background-color: var(--bs-tertiary-bg);
}

.calendar-cell.state-meal {
  background-color: var(--menu-meal-bg);
}

.calendar-cell.state-closed {
  background-color: var(--menu-closed-bg);
  /* Hachures : l'état reste distinguable sans dépendre de la couleur. */
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.035) 0 6px,
    transparent 6px 12px
  );
}

/* Le jour courant est signalé par la couleur ET par un libellé, jamais par la
   couleur seule : une bordure colorée est invisible pour une partie des
   utilisateurs. */
.calendar-cell.is-today {
  box-shadow: inset 0 0 0 2px var(--menu-today);
}

.calendar-cell.is-today .day-number {
  color: var(--menu-today);
}

/* --- Contenu d'un menu --- */

.menu-body dt {
  font-weight: 600;
  color: var(--bs-secondary-color);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.menu-body dd {
  margin-bottom: 0.4rem;
}

.menu-body dd:last-child {
  margin-bottom: 0;
}

.allergen-badge {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Mention du porc : fond coloré ET libellé explicite. La couleur seule ne
   suffirait pas, et l'emoji seul n'est pas restitué partout. */
.pork-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #842029;
  background-color: #fde2e4;
  border: 1px solid #f1aeb5;
}

/* --- Cartes (mobile) --- */

.card.is-today {
  border-color: var(--menu-today);
  border-width: 2px;
}

.card.state-closed {
  background-color: var(--menu-closed-bg);
}

@media print {
  .navbar,
  footer,
  .btn-group {
    display: none !important;
  }

  .calendar-cell {
    height: auto;
  }
}