/* Page publique du menu (mobile d'abord) : « la carte ».
   La typographie porte la page, comme sur une carte imprimée : le nom du
   restaurant en grand, de grands titres de catégories, le nom du plat et son
   prix sur la même ligne reliés par des points (la colonne des prix reste
   alignée), de l'air. Pas de cadre autour des plats : ils sont posés sur le
   fond de la page (variables --page-*, fond clair ou sombre choisi par le
   restaurant). La couleur du restaurant sert aux prix, à la catégorie active,
   au bouton principal et au bandeau quand il n'y a pas de photo. */

#app {
  max-width: 640px;
  margin: 0 auto;
}

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

/* Bandeau du haut, arrondi en bas comme le bord d'une assiette. Sans photo de
   couverture : la couleur du restaurant, éclairée, avec un motif de points
   discret. */
.hero-band {
  position: relative;
  height: 172px;
  overflow: hidden;
  border-radius: 0 0 50% 50% / 0 0 30px 30px;
  background:
    radial-gradient(rgb(255 255 255 / 0.12) 1.2px, rgb(255 255 255 / 0) 1.6px) 0 0 / 16px 16px,
    radial-gradient(120% 100% at 100% 0%, rgb(255 255 255 / 0.24), rgb(255 255 255 / 0) 60%),
    radial-gradient(100% 120% at 0% 100%, rgb(0 0 0 / 0.22), rgb(0 0 0 / 0) 65%),
    var(--brand);
}

.hero-band.has-cover {
  height: 236px;
  background: var(--brand);
}

.hero-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* La photo s'assombrit doucement vers le bas : le logo s'y détache. */
.hero-band.has-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0) 50%, rgb(0 0 0 / 0.28));
}

.hero-body {
  position: relative;
  margin-top: -54px;
  padding: 0 22px;
  text-align: center;
}

.logo {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  margin: 0 auto;
  overflow: hidden;
  border: 5px solid var(--page);
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 8px 26px rgb(20 16 10 / 0.16);
  color: var(--brand-text);
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Le nom du restaurant : l'élément fort de la page. */
.hero h1 {
  margin-top: 16px;
  color: var(--page-ink);
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 9.4vw, 2.85rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.tagline {
  max-width: 34ch;
  margin: 10px auto 0;
  color: var(--page-muted);
  font-size: 1rem;
  line-height: 1.45;
  text-wrap: balance;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
}

.chip-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b45309;
}

.chip-status.is-open::before {
  background: #15803d;
  box-shadow: 0 0 0 3px rgb(21 128 61 / 0.15);
}

.chip-table {
  border-color: transparent;
  background: var(--brand);
  color: var(--brand-ink);
}

/* Jour d'horaires exceptionnels (Ramadan, fête…) */
.special-note {
  margin-top: 12px;
  color: #835400;
  font-size: 1rem;
  font-weight: 600;
}

/* Fond sombre choisi par le restaurant : l'ambre clair reste lisible. */
.has-dark-page .special-note {
  color: #f2c46d;
}

/* Bouton « Réserver une table » (si le restaurant a ouvert les réservations) */
.reserve-cta {
  margin-top: 20px;
  min-height: 50px;
  padding-inline: 30px;
  box-shadow: 0 8px 20px rgb(20 16 10 / 0.16);
  font-size: 1rem;
}

/* ---------- Catégories : onglets collants, soulignés ---------- */

.cat-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  margin-top: 28px;
  border-bottom: 1px solid var(--page-line);
  background: var(--page-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.cat-nav-inner {
  position: relative;   /* référence pour offsetLeft des onglets */
  display: flex;
  gap: 24px;
  padding: 0 22px;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.cat-nav-inner::-webkit-scrollbar {
  display: none;
}

.cat-link {
  position: relative;
  flex: none;
  padding: 15px 0 14px;
  color: var(--page-muted);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}

/* Le trait sous la catégorie affichée. */
.cat-link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--page-accent);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

.cat-link[aria-current="true"] {
  color: var(--page-ink);
}

.cat-link[aria-current="true"]::after {
  transform: scaleX(1);
}

/* ---------- La carte ---------- */

.menu {
  padding: 0 22px;
}

.offline-banner {
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff4dc;
  color: #6d4700;
  font-size: 1rem;
  text-align: center;
}

.category {
  margin-top: 38px;
  scroll-margin-top: 64px;   /* la barre collante ne cache pas le titre */
}

.category h2,
.featured h2,
.info h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 4px;
  color: var(--page-ink);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 7.5vw, 1.75rem);   /* un peu plus petits sur un écran de 320 px */
  font-weight: 700;
  line-height: 1.15;
}

.category h2::after,
.featured h2::after,
.info h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--page-line);
}

.items {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Toute la ligne d'un plat ouvre sa fiche : un bouton transparent la couvre. */
.item {
  position: relative;
  padding: 15px 0;
}

/* Nom … prix, sur la ligne de base de la dernière ligne du nom. */
.item-head {
  display: flex;
  align-items: baseline;
  align-items: last baseline;
  gap: 8px;
}

.item-name {
  min-width: 0;
  color: var(--page-ink);
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.3;
}

.item-leader {
  flex: 1 1 28px;
  min-width: 28px;
  height: 1em;
  border-bottom: 2px dotted var(--page-muted);
  opacity: 0.45;
  transform: translateY(-0.3em);
}

.price {
  flex: none;
  color: var(--page-accent);
  font-size: 1.04rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* « FDJ » un peu plus discret que le montant, jamais sous 16 px. */
.price-unit {
  font-size: max(1rem, 0.8em);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.item-body {
  display: flex;
  gap: 14px;
  margin-top: 5px;
}

.item-text {
  flex: 1;
  min-width: 0;
}

.desc {
  max-width: 60ch;
  color: var(--page-muted);
  font-size: 1rem;
  line-height: 1.55;
}

.item-photo {
  flex: none;
  width: 78px;
  height: 78px;
  margin-top: 3px;
  border-radius: 16px;
  background: var(--page-line);
  object-fit: cover;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-block: 3px;
  padding-inline: 8px 10px;   /* côté de l'icône un peu plus serré, aussi en arabe */
  border-radius: 999px;
  background: #f2ede5;
  color: #5b544b;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

.tag .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

.tag-unavailable {
  padding-inline-start: 10px;
}

.tag-epice       { background: #fdeceb; color: #a1261c; }
.tag-vegetarien  { background: #e7f4eb; color: #1d6a39; }
.tag-specialite  { background: var(--brand-soft); color: var(--brand-text); }
.tag-populaire   { background: #fff3d6; color: #835400; }
.tag-nouveau     { background: #e8eefc; color: #2a46a0; }
.tag-unavailable { background: #ececec; color: #4a4a4a; }

/* Épuisé : le plat reste lisible, en retrait, son prix barré. Seule la photo
   s'efface ; le texte passe en couleur secondaire (contraste d'au moins 4,5:1
   sur le fond de la page, clair ou sombre : le plat reste un bouton). */
.item.is-unavailable .item-photo {
  opacity: 0.55;
}

.item.is-unavailable .item-name,
.item.is-unavailable .price {
  color: var(--page-muted);
}

.item.is-unavailable .price {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.item-open {
  position: absolute;
  inset: 0 -22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

.item-open:focus-visible {
  outline-offset: -3px;
}

.item-open:active {
  background: rgb(0 0 0 / 0.04);
}

.has-dark-page .item-open:active {
  background: rgb(255 255 255 / 0.06);
}

@media (hover: hover) {
  .item-open:hover {
    background: rgb(0 0 0 / 0.025);
  }

  .has-dark-page .item-open:hover {
    background: rgb(255 255 255 / 0.04);
  }
}

/* ---------- Les incontournables : un bandeau de grandes photos qui défile ---------- */

.featured {
  margin-top: 34px;
}

.featured-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
}

.featured-head h2 {
  flex: 1;
  min-width: 0;
}

/* Flèches : seulement à la souris (au doigt, le bandeau défile tout seul). */
.rail-arrows {
  display: none;
  gap: 8px;
}

@media (hover: hover) and (pointer: fine) {
  .rail-arrows:not([hidden]) {
    display: flex;
  }
}

.rail-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--page-line);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}

.rail-arrow .icon {
  width: 20px;
  height: 20px;
}

[dir="rtl"] .rail-arrow .icon {
  transform: scaleX(-1);
}

.rail-arrow[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}

/* La carte suivante dépasse à droite : on voit qu'il y en a d'autres. */
.featured-rail {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 14px 22px 4px;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 22px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.featured-rail::-webkit-scrollbar {
  display: none;
}

.feature {
  position: relative;
  flex: none;
  width: min(66vw, 264px);
  scroll-snap-align: start;
}

.feature-media,
.card-media {
  position: relative;
  overflow: hidden;
  background: var(--page-line);
  transition: transform 0.15s ease;
}

.feature-media {
  aspect-ratio: 4 / 5;
  border-radius: 22px;
}

/* Photos : en fondu une fois chargées (jamais d'image à moitié dessinée). */
.feature-photo,
.card-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feature-photo.is-loaded,
.card-photo.is-loaded {
  opacity: 1;
}

.feature-name {
  margin-top: 13px;
  color: var(--page-ink);
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
}

.feature-desc {
  display: -webkit-box;
  margin-top: 5px;
  overflow: hidden;
  color: var(--page-muted);
  font-size: 1rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.feature .price,
.card .price {
  display: block;
}

.feature .price {
  margin-top: 7px;
}

/* ---------- Grille de photos (catégories dont la moitié des plats ont une photo) ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 14px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Très petit écran, ou texte très agrandi : une photo par ligne. */
@media (max-width: 300px) {
  .cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

.card {
  position: relative;
  min-width: 0;
}

.card-media {
  aspect-ratio: 1;
  border-radius: 18px;
}

.card-name {
  display: -webkit-box;
  margin-top: 10px;
  overflow: hidden;
  color: var(--page-ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.28;
  text-wrap: balance;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.card .price {
  margin-top: 3px;
}

/* Plat sans photo (ou photo qui ne charge pas) : la couleur du restaurant,
   éclairée, avec le motif de points du bandeau du haut, et la description. */
.card-plate {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 14px 14px 15px;
  background:
    radial-gradient(rgb(255 255 255 / 0.13) 1.2px, rgb(255 255 255 / 0) 1.6px) 0 0 / 14px 14px,
    radial-gradient(120% 100% at 100% 0%, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0) 60%),
    radial-gradient(100% 120% at 0% 100%, rgb(0 0 0 / 0.2), rgb(0 0 0 / 0) 65%),
    var(--brand);
  color: var(--brand-ink);
}

.card-plate-text {
  display: -webkit-box;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

/* Étiquettes posées sur la photo (opaques : lisibles sur n'importe quelle photo). */
.badges {
  position: absolute;
  inset: 10px 10px auto;
  display: flex;
  flex-wrap: wrap;   /* carte étroite : les pastilles passent dessous, au bout */
  align-items: flex-start;
  /* 2 px au moins entre l'étiquette et les pastilles (poussées au bout, elles
     s'en écartent dès qu'il y a la place) : « Spécialité » et une pastille
     tiennent encore sur une ligne à 390 px. */
  gap: 6px 2px;
  pointer-events: none;
}

.badges .tag,
.badge-diet {
  box-shadow: 0 1px 4px rgb(20 16 10 / 0.2);
}

.badges-diet {
  display: flex;
  gap: 5px;
  margin-inline-start: auto;
}

.badge-diet {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.badge-diet .icon {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

/* Épuisé : la photo (ou la case de couleur) passe en gris et s'efface ; le nom
   et le prix barré restent lisibles, en couleur secondaire (4,5:1 au moins).
   Pas de description sur la case effacée, où elle serait illisible : elle reste
   dans la fiche du plat et pour les lecteurs d'écran. */
.card.is-unavailable .card-photo,
.card.is-unavailable .card-plate {
  filter: grayscale(1);
}

.card.is-unavailable .card-photo.is-loaded,
.card.is-unavailable .card-plate {
  opacity: 0.5;
}

.card.is-unavailable .card-plate-text {
  visibility: hidden;
}

.card.is-unavailable .card-name,
.card.is-unavailable .price {
  color: var(--page-muted);
}

.card.is-unavailable .price {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

/* Toute la carte ouvre la fiche du plat ; la photo s'enfonce un peu sous le doigt. */
.card-open,
.feature-open {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  cursor: pointer;
}

.feature-open {
  border-radius: 22px;
}

.card-open:focus-visible,
.feature-open:focus-visible {
  outline-offset: 4px;
}

.card:has(.card-open:active) .card-media,
.feature:has(.feature-open:active) .feature-media {
  transform: scale(0.97);
}

/* ---------- Fiche d'un plat (monte du bas de l'écran) ---------- */

.dish-sheet {
  width: 100%;
  max-width: 640px;
  max-height: min(90dvh, 820px);
  margin: auto auto 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 20px 20px 0 0;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 -8px 30px rgb(0 0 0 / 0.2);
}

.dish-sheet[open] {
  animation: dish-sheet-up 0.22s ease-out;
}

.dish-sheet::backdrop {
  background: rgb(20 16 10 / 0.45);
}

@keyframes dish-sheet-up {
  from { transform: translateY(40px); opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .dish-sheet[open] {
    animation: none;
  }
}

/* Sur grand écran : fenêtre centrée aux coins arrondis. */
@media (min-width: 700px) {
  .dish-sheet {
    max-width: 560px;
    margin: auto;
    border-radius: 20px;
  }
}

.dish-sheet-body {
  position: relative;
}

/* Haut de la fiche : l'image déjà chargée dans le menu s'affiche tout de suite,
   puis la grande photo arrive en fondu par-dessus. */
.dish-sheet-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--line);
}

.dish-sheet-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dish-sheet-photo:not(.is-placeholder) {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dish-sheet-photo.is-loaded {
  opacity: 1;
}

/* Sans photo : la couleur du restaurant, comme le bandeau du haut de la page. */
.dish-sheet-plate {
  height: 128px;
  background:
    radial-gradient(rgb(255 255 255 / 0.13) 1.2px, rgb(255 255 255 / 0) 1.6px) 0 0 / 14px 14px,
    radial-gradient(120% 100% at 100% 0%, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0) 60%),
    radial-gradient(100% 120% at 0% 100%, rgb(0 0 0 / 0.2), rgb(0 0 0 / 0) 65%),
    var(--brand);
}

.dish-sheet-close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.18);
  color: var(--ink);
  cursor: pointer;
}

.dish-sheet-close .icon {
  width: 22px;
  height: 22px;
}

.dish-sheet-text {
  padding: 22px 20px calc(26px + env(safe-area-inset-bottom));
}

.dish-sheet-name {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
}

/* Dans la fiche (toujours claire), le prix reprend la couleur du restaurant. */
.dish-sheet .price {
  display: block;
  margin-top: 8px;
  color: var(--brand-text);
  font-size: 1.2rem;
}

.dish-sheet-desc {
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.55;
  white-space: pre-line;
}

/* Actions : une question à l'assistant ; hors du restaurant, réserver. */
.dish-sheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.dish-sheet-actions .btn {
  flex: 1 1 200px;
}

.dish-sheet-actions .reserve-cta {
  margin-top: 0;
  box-shadow: none;
}

.dish-sheet-actions .icon {
  width: 20px;
  height: 20px;
}

/* La photo touchée s'agrandit jusqu'à la fiche (View Transitions, navigateurs
   récents) ; l'animation de la fiche qui monte est alors laissée de côté. */
.dish-sheet.is-morphing[open] {
  animation: none;
}

::view-transition-group(dish-photo) {
  animation-duration: 0.34s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

::view-transition-old(dish-photo),
::view-transition-new(dish-photo) {
  height: 100%;
  object-fit: cover;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.26s;
}

@media (prefers-reduced-motion: reduce) {
  .feature-media,
  .card-media,
  .feature-photo,
  .card-photo,
  .dish-sheet-photo {
    transition: none;
  }
}

.empty,
.message {
  margin: 48px 16px;
  color: var(--page-muted);
  text-align: center;
}

.message .btn {
  margin-top: 18px;
}

/* Page « Connexion nécessaire » (hors-ligne.html) */
.offline-page h1 {
  margin: 0 0 10px;
  color: var(--page-ink);
  font-family: var(--font-display);
  font-size: 1.5rem;
}

.offline-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 12px;
}

/* ---------- À table : « Envie de revenir ? » en fin de menu ---------- */

/* Fond presque uni sous le texte : il reste lisible quelle que soit la couleur du restaurant. */
.come-back {
  margin-top: 46px;
  padding: 26px 22px 28px;
  border-radius: 22px;
  background:
    radial-gradient(rgb(255 255 255 / 0.13) 1.2px, rgb(255 255 255 / 0) 1.6px) 0 0 / 14px 14px,
    var(--brand);
  color: var(--brand-ink);
  text-align: center;
}

.come-back h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1.15;
}

.come-back p {
  margin-top: 6px;
}

/* Le bouton s'inverse sur la couleur du restaurant. */
.come-back .reserve-cta {
  margin-top: 18px;
  background: var(--brand-ink);
  color: var(--brand);
  box-shadow: none;
}

/* ---------- Infos pratiques (au dos de la carte) ---------- */

.info {
  margin-top: 46px;
}

.info-card {
  margin-top: 6px;
}

.info-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 0;
  border-top: 1px solid var(--page-line);
  color: var(--page-ink);
}

.info-row:first-child {
  border-top: 0;
}

.info-row > .icon {
  color: var(--page-accent);
}

.info .btn-outline {
  color: var(--page-accent);
}

.info-text {
  flex: 1;
  min-width: 0;
}

.info-hours {
  align-items: flex-start;
}

.info-hours h3 {
  font-size: 1rem;
  font-weight: 600;
}

.hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 14px;
  margin-top: 8px;
  font-size: 1rem;
}

.hours dt {
  color: var(--page-muted);
}

.hours dt::first-letter {
  text-transform: uppercase;
}

.hours dd {
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.hours .service {
  display: inline-block;
  white-space: nowrap;
}

.special-hours .service + .service {
  margin-inline-start: 10px;
}

/* Horaires exceptionnels : une période par ligne (motif, dates, services) */
.special-hours {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  font-size: 1rem;
  list-style: none;
}

.special-hours li {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff4dc;
  color: #5c3c00;
  font-variant-numeric: tabular-nums;
}

.special-hours strong {
  flex-basis: 100%;
}

.hours .service + .service {
  margin-inline-start: 10px;
}

.hours .is-today {
  color: var(--page-ink);
  font-weight: 700;
}

/* Bloc à part (inline-block) : sur un petit téléphone, le badge passe sous le
   jour au lieu d'élargir la colonne et de pousser les heures hors de l'écran. */
.hours .today {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-text);
  font-size: 1rem;
  font-weight: 700;
  vertical-align: 1px;
}

.page-note {
  padding: 28px 16px calc(36px + env(safe-area-inset-bottom));
  color: var(--page-muted);
  font-size: 1rem;
  text-align: center;
}

/* ---------- Squelette de chargement (avant le premier affichage) ---------- */

.skeleton .sk {
  border-radius: 10px;
  background: linear-gradient(90deg, #ece6dc 25%, #f4efe7 50%, #ece6dc 75%) 0 0 / 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

.sk-band   { height: 172px; border-radius: 0 0 50% 50% / 0 0 30px 30px !important; }
.sk-logo   { width: 104px; height: 104px; margin: -54px auto 16px; border: 5px solid var(--page); border-radius: 50% !important; }
.sk-title  { width: 62%; height: 30px; margin: 0 auto 10px; }
.sk-line   { width: 44%; height: 14px; margin: 0 auto; }
.sk-card   { height: 300px; margin: 44px 16px 0; border-radius: var(--radius) !important; }

@keyframes shimmer {
  to { background-position: -200% 0; }
}