/* Thème « Carte du ciel », palette « bleu de Prusse » */
@font-face {
  font-family: "Fraunces";
  src: url(fonts/fraunces.woff2) format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson";
  src: url(fonts/atkinson-400.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson";
  src: url(fonts/atkinson-700.woff2) format("woff2");
  font-weight: 700;
  font-display: swap;
}
:root {
  --nuit: #0f2638;
  --nuit-2: #163249;
  --etoile: #eef2f0;
  --or: #e9c46a;
  --trait: #7fb0c6;
  --brume: #a7bfca;
  --bg: var(--nuit);
  --fg: var(--etoile);
  --muted: var(--brume);
  --line: #244559;
  --link: #a6d6ea;
  --link-hover: var(--or);
  --focus: var(--or);
  --display: "Fraunces", Georgia, serif;
  --body: "Atkinson", system-ui, sans-serif;
}

/* ---- Structure commune (identique pour tous les thèmes) ---- */
* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: var(--fs, 18px);
  line-height: var(--lh, 1.6);
}
.wrap {
  max-width: var(--wrap, 1040px);
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
a {
  color: var(--link);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--link-hover);
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
img,
video {
  max-width: 100%;
  height: auto;
}
.muted {
  color: var(--muted);
}
.skip {
  position: absolute;
  left: -9999px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
} /* texte pour lecteurs d'écran seulement */
.skip:focus {
  left: 16px;
  top: 8px;
  background: var(--focus);
  color: var(--bg);
  padding: 6px 10px;
  z-index: 10;
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  padding-bottom: 8px;
}
.brand {
  color: var(--fg);
  text-decoration: none;
  display: flex;
  gap: 10px;
  align-items: center;
}
.langs {
  display: flex;
  gap: 4px;
  font-size: 0.85rem;
}
.langs a,
.langs span {
  padding: 3px 7px;
  text-decoration: none;
}
.menu ul {
  list-style: none;
  margin: 0;
  padding: 4px 0 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
}
.menu a {
  text-decoration: none;
}

main.wrap {
  width: 100%;
  padding-top: 40px;
  padding-bottom: 64px;
}
.page {
  max-width: 68ch;
}

/* Lien de retour d'une sous-page vers sa page de rubrique */
.retour {
  display: inline-block;
  margin: 0 0 0.9rem;
  padding: 6px 0;
  color: var(--brume);
  text-decoration: none;
  font-size: 0.95rem;
}
.retour:hover {
  color: var(--or);
}
/* Sommaire des longues pages : liens vers les intertitres */
.sommaire {
  margin: 0 0 1.8rem;
  padding: 12px 18px 14px;
  background: var(--nuit-2);
  border-left: 3px solid var(--or);
  border-radius: 0 4px 4px 0;
}
.sommaire-titre {
  margin: 0 0 0.35rem;
  color: var(--brume);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sommaire ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}
.sommaire li {
  margin: 0;
}
.sommaire a {
  text-decoration: none;
}
.page h2 {
  scroll-margin-top: 16px;
}
/* Pied des longues pages : retour à la rubrique et haut de page */
.page-pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 2.5rem;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.page-pied .retour {
  margin: 0;
}
.page-pied .haut {
  margin-left: auto;
}

/* Cartes des sous-pages d'une rubrique (macro `sous_pages`) : toute la carte est cliquable */
.sous-pages {
  list-style: none;
  margin: 1.5rem 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.sous-pages li {
  margin: 0;
}
.sous-pages a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 16px 20px 18px;
  background: var(--nuit-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--fg);
  text-decoration: none;
}
.sous-pages a:hover {
  border-color: var(--or);
  color: var(--fg);
}
/* Mêmes réglages de police que le titre de page (h1), seule la taille change : en transition, le titre de la carte
   devient ce titre (et l'inverse), sans changement de graisse ni de forme des lettres à la fin. */
.sous-pages-titre {
  align-self: flex-start;
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1.15;
  color: var(--etoile);
  font-weight: 500;
  font-variation-settings:
    "SOFT" 100,
    "WONK" 1,
    "opsz" 144;
  letter-spacing: -0.01em;
}
.sous-pages a:hover .sous-pages-titre {
  color: var(--or);
}
.sous-pages-texte {
  color: var(--brume);
  font-size: 0.95rem;
  line-height: 1.45;
}
/* Retour visuel au clic : la carte s'enfonce légèrement */
.sous-pages a:active {
  transform: scale(0.975);
  border-color: var(--or);
  box-shadow: 0 0 0 4px rgba(233, 196, 106, 0.18);
}

/* Transitions entre pages (View Transitions entre documents) : la page passe à la suivante en fondu enchaîné (l'en-tête,
   identique, ne bouge pas), et le titre de la carte cliquée glisse jusqu'au titre de la page, et l'inverse au retour.
   js/transitions.js nomme « titre » ce titre-là, s'il est visible à l'écran ; sinon, seulement le fondu.
   Les navigateurs sans View Transitions (Firefox…) changent de page normalement ; coupées si l'on demande moins
   d'animations. */
html {
  scrollbar-gutter: stable;
} /* même largeur de page avec ou sans barre de défilement : rien ne se décale */
.page h1 {
  width: fit-content;
  max-width: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
  /* Page : fondu enchaîné de l'écran entier (le navigateur le garde opaque d'un bout à l'autre). Ni l'en-tête ni le
     contenu n'ont de nom : nommés, ils sont photographiés à leur place dans la page, et si l'on a fait défiler,
     Chrome les fait glisser et changer de taille d'une page à l'autre. */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 240ms;
  }
  /* Titre : seule la plus grande des deux images voyage (réduite, elle reste nette), sans fondu entre les deux. Le sens
     se lit sur la page d'arrivée : un lien « ← » (sous-page), on y va ; des cartes (page de rubrique), on en revient. */
  ::view-transition-group(titre) {
    animation-duration: 340ms;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  ::view-transition-old(titre),
  ::view-transition-new(titre) {
    animation: none;
  }
  :root:has(.page > .retour)::view-transition-old(titre),
  :root:has(.sous-pages)::view-transition-new(titre) {
    opacity: 0;
  }
  /* Titre nommé d'un seul côté (l'autre n'était pas à l'écran) : même fondu que la page */
  ::view-transition-old(titre):only-child {
    animation: vt-sortie 240ms ease both;
  }
  ::view-transition-new(titre):only-child {
    animation: vt-entree 240ms ease both;
  }
  :root:has(.page > .retour)::view-transition-old(titre):only-child,
  :root:has(.sous-pages)::view-transition-new(titre):only-child {
    opacity: 1;
  }
  .sous-pages a {
    transition:
      transform 90ms ease,
      box-shadow 90ms ease,
      border-color 90ms ease;
  }
}
@keyframes vt-sortie {
  to {
    opacity: 0;
  }
}
@keyframes vt-entree {
  from {
    opacity: 0;
  }
}
h1,
h2,
h3 {
  font-family: var(--display);
  line-height: 1.15;
}
h2 {
  margin: 2.2rem 0 0.6rem;
}
h3 {
  margin: 1.6rem 0 0.4rem;
}
p,
ul,
ol {
  margin: 0.5rem 0 1rem;
}
li {
  margin: 0.25rem 0;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.5rem 0 1rem;
}
th,
td {
  text-align: left;
  padding: 0.45rem 0.8rem 0.45rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-weight: normal;
}
caption {
  text-align: left;
  font-weight: 700;
  padding-bottom: 0.35rem;
}
table.hours td {
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.note {
  margin: 1.2rem 0 1.6rem;
  padding: 14px 18px;
}
.note p {
  margin: 0;
}
.request {
  margin: 2.5rem 0 1rem;
  padding: 20px 24px;
}
.button {
  display: inline-block;
  text-decoration: none;
  padding: 10px 18px;
  font-weight: 700;
}
address.card {
  font-style: normal;
  padding: 18px 22px;
  margin: 1rem 0 1.5rem;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 32px;
  align-items: center;
  margin-bottom: 40px;
}
.hero h1 {
  margin: 0 0 0.8rem;
}
.lead {
  font-size: 1.2rem;
  margin: 0;
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
  margin: 2rem 0;
}
.card {
  padding: 20px 24px;
}
.card h2 {
  margin-top: 0;
}

.site-footer {
  padding: 32px 0;
  font-size: 0.9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

@media (max-width: 760px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  :root {
    --fs: 17px;
  }
}
@media print {
  body {
    background: #fff;
    color: #000;
  }
  .site-header nav,
  .button,
  .skip,
  .hero-art {
    display: none;
  }
}

.site-header {
  border-bottom: 1px solid var(--line);
}
.brand {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 600;
  font-variation-settings:
    "SOFT" 100,
    "opsz" 48;
}
.brand-mark {
  color: var(--or);
}
.langs a {
  color: var(--brume);
}
.langs span {
  color: var(--or);
  border-bottom: 2px solid var(--or);
}
.langs a.lang-repli {
  opacity: 0.55;
} /* page non traduite : le lien mène à la rubrique (ou à l'accueil) dans cette langue */
.langs a.lang-repli:hover {
  opacity: 1;
}
.menu a {
  color: var(--brume);
}
.menu a:hover,
.menu a[aria-current] {
  color: var(--etoile);
}
.menu a[aria-current] {
  border-bottom: 2px solid var(--or);
  padding-bottom: 3px;
}
h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 500;
  font-variation-settings:
    "SOFT" 100,
    "WONK" 1,
    "opsz" 144;
  color: var(--etoile);
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
}
h2 {
  font-size: 1.6rem;
  font-weight: 500;
  font-variation-settings:
    "SOFT" 100,
    "opsz" 72;
  color: var(--or);
}
h3 {
  font-size: 1.2rem;
  font-weight: 600;
}
.lead {
  color: var(--brume);
  font-family: var(--display);
  font-style: italic;
  font-variation-settings: "SOFT" 100;
}
.sky-chart {
  width: 100%;
  height: auto;
  display: block;
}
.sky-chart .grid {
  stroke: var(--line);
  stroke-width: 1;
}
.sky-chart .grid-label {
  fill: #4f7488;
  font: 12px var(--body);
}
.sky-chart .figure {
  stroke: var(--trait);
  stroke-width: 1.2;
  opacity: 0.75;
}
.sky-chart .star {
  fill: var(--etoile);
}
.sky-chart .galaxy {
  fill: none;
  stroke: var(--or);
  stroke-width: 1.2;
}
.sky-chart .obj-label {
  fill: var(--or);
  font: italic 13px var(--display);
}
.sky-chart .con-label {
  fill: var(--brume);
  font: italic 17px var(--display);
  letter-spacing: 0.02em;
}
.sky-chart .asterism {
  fill: none;
  stroke: var(--or);
  stroke-width: 1;
  stroke-dasharray: 3 6;
  opacity: 0.45;
} /* Triangle d'été */
.sky-chart .cluster-star {
  fill: var(--or);
} /* Pléiades */
/* Survol (souris seulement) : une constellation s'allume en or ; un objet montre son nom et sa distance.
   Zones de survol invisibles (.hit) : un trait épais sous chaque ligne, un disque sous chaque objet. */
.sky-chart .hit {
  fill: none;
  stroke: none;
  pointer-events: none;
}
.sky-chart .obj-bulle {
  opacity: 0;
  pointer-events: none;
}
.sky-chart .obj-bulle rect {
  fill: var(--nuit-2);
  stroke: var(--or);
  stroke-width: 1;
}
.sky-chart .obj-rappel {
  stroke: var(--or);
  stroke-width: 1;
  opacity: 0.7;
} /* trait de l'objet à son étiquette */
.sky-chart .obj-bulle text {
  fill: var(--etoile);
  font: 14px var(--display);
}
.sky-chart .obj-bulle .obj-distance {
  fill: var(--brume);
  font: 12px var(--body);
}
@media (hover: hover) {
  .sky-chart line.hit {
    stroke: transparent;
    stroke-width: 16;
    stroke-linecap: round;
    pointer-events: stroke;
  }
  .sky-chart circle.hit {
    fill: transparent;
    pointer-events: fill;
  }
  .sky-chart .con:hover .figure {
    stroke: var(--or);
    opacity: 1;
  }
  .sky-chart .con:hover .con-label {
    fill: var(--or);
  }
  .sky-chart .obj:hover .obj-bulle {
    opacity: 1;
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sky-chart .con .figure,
  .sky-chart .con .con-label {
    transition:
      stroke 0.2s ease,
      fill 0.2s ease,
      opacity 0.2s ease;
  }
  .sky-chart .obj-bulle {
    transition: opacity 0.2s ease;
  }
}
/* Le ciel se dessine à l'arrivée (un peu plus de 3 s, une fois) : la grille, puis les étoiles des plus brillantes aux plus
   faibles (classes m0–m5), puis les lignes constellation par constellation (c0–c2) et trait par trait (l0–l8), puis
   les objets et les noms. Classes posées par tools/carte_ciel.py ; délais en variables CSS (pas d'attribut style). */
@media (prefers-reduced-motion: no-preference) {
  .sky-chart {
    --ciel-duree: 1.25;
  } /* facteur de vitesse : 1 = 2,5 s en tout, 1.25 = un peu plus de 3 s */
  .sky-chart .grid,
  .sky-chart .grid-label {
    animation: ciel-apparait calc(var(--ciel-duree) * 800ms) ease both;
  }
  /* Étoiles : elles s'allument, puis scintillent doucement, chacune à son rythme (classes s0–s5 : durée --sd,
     départ décalé --sr après le tracé) */
  .sky-chart .star {
    transform-box: fill-box;
    transform-origin: center;
    animation:
      ciel-allume calc(var(--ciel-duree) * 500ms) ease-out var(--de, 0ms) both,
      ciel-scintille var(--sd, 5s) ease-in-out
        calc(var(--ciel-duree) * 2600ms + var(--sr, 0ms)) infinite;
  }
  .sky-chart .s1 {
    --sd: 3.8s;
    --sr: 900ms;
  }
  .sky-chart .s2 {
    --sd: 6.4s;
    --sr: 300ms;
  }
  .sky-chart .s3 {
    --sd: 4.6s;
    --sr: 1500ms;
  }
  .sky-chart .s4 {
    --sd: 7.2s;
    --sr: 600ms;
  }
  .sky-chart .s5 {
    --sd: 5.6s;
    --sr: 1200ms;
  }
  .sky-chart .figure {
    stroke-dasharray: 1;
    animation: ciel-trace calc(var(--ciel-duree) * 600ms) ease-in-out
      calc(var(--ciel-duree) * 700ms + var(--dc, 0ms) + var(--dl, 0ms)) both;
  }
  .sky-chart .galaxy {
    stroke-dasharray: 1;
    animation: ciel-trace calc(var(--ciel-duree) * 900ms) ease-in-out
      calc(var(--ciel-duree) * 1500ms) both;
  }
  .sky-chart .cluster-star {
    animation: ciel-apparait calc(var(--ciel-duree) * 600ms) ease
      calc(var(--ciel-duree) * 1600ms) both;
  }
  .sky-chart .con-label,
  .sky-chart .obj-label {
    animation: ciel-apparait calc(var(--ciel-duree) * 600ms) ease
      calc(var(--ciel-duree) * 1900ms) both;
  }
  .sky-chart .asterism {
    animation: ciel-apparait calc(var(--ciel-duree) * 800ms) ease
      calc(var(--ciel-duree) * 1900ms) both;
  }
  .sky-chart .m1 {
    --de: calc(var(--ciel-duree) * 100ms);
  }
  .sky-chart .m2 {
    --de: calc(var(--ciel-duree) * 200ms);
  }
  .sky-chart .m3 {
    --de: calc(var(--ciel-duree) * 300ms);
  }
  .sky-chart .m4 {
    --de: calc(var(--ciel-duree) * 400ms);
  }
  .sky-chart .m5 {
    --de: calc(var(--ciel-duree) * 500ms);
  }
  .sky-chart .c1 {
    --dc: calc(var(--ciel-duree) * 150ms);
  }
  .sky-chart .c2 {
    --dc: calc(var(--ciel-duree) * 300ms);
  }
  .sky-chart .l1 {
    --dl: calc(var(--ciel-duree) * 90ms);
  }
  .sky-chart .l2 {
    --dl: calc(var(--ciel-duree) * 180ms);
  }
  .sky-chart .l3 {
    --dl: calc(var(--ciel-duree) * 270ms);
  }
  .sky-chart .l4 {
    --dl: calc(var(--ciel-duree) * 360ms);
  }
  .sky-chart .l5 {
    --dl: calc(var(--ciel-duree) * 450ms);
  }
  .sky-chart .l6 {
    --dl: calc(var(--ciel-duree) * 540ms);
  }
  .sky-chart .l7 {
    --dl: calc(var(--ciel-duree) * 630ms);
  }
  .sky-chart .l8 {
    --dl: calc(var(--ciel-duree) * 720ms);
  }
}
@keyframes ciel-apparait {
  from {
    opacity: 0;
  }
}
@keyframes ciel-allume {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
  60% {
    opacity: 1;
    transform: scale(1.4);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes ciel-trace {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes ciel-scintille {
  0%,
  100% {
    opacity: 1;
  }
  45% {
    opacity: 0.6;
  }
  55% {
    opacity: 0.9;
  }
}
.card,
.note,
.request,
address.card {
  background: var(--nuit-2);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.note {
  border-left: 3px solid var(--or);
}
.card h2 {
  font-size: 1.3rem;
}
table.hours td {
  color: var(--or);
  font-family: var(--display);
  font-size: 1.08em;
  font-variation-settings: "opsz" 24;
}
.button {
  background: var(--or);
  color: var(--nuit);
  border-radius: 3px;
}
.button:hover {
  color: var(--nuit);
  background: #f1d48e;
}
/* Paysage au-dessus du pied de page (images/fond_de_page_opt.svg, 1440 × 160 : ciel transparent, lune, collines
   dont le bas est #0b1d2b, la couleur du pied de page : pas de bord, d'où l'absence de border-top).
   Il est posé dans la marge du haut du pied de page, qui lui réserve sa hauteur : 1/9 de la largeur, au moins 100 px
   (même calcul que l'horizon de l'accueil). Pas d'aspect-ratio avec min-height : le minimum serait reporté sur la
   largeur (900 px) et élargirait la page sur téléphone. Comme ciel.svg, l'image garde au moins 900 px de large et est
   rognée sur les côtés sur téléphone ; centrée, la lune (un peu à droite du milieu) reste visible. */
.site-footer {
  position: relative;
  margin-top: max(11.12vw, 100px);
  background: #0b1d2b;
  color: var(--brume);
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: max(11.12vw, 100px);
  background: url(images/fond_de_page_opt.svg) center bottom / max(100%, 900px) auto no-repeat;
  pointer-events: none;
}
@media print {
  .site-footer {
    margin-top: 0;
  }
  .site-footer::before {
    display: none;
  }
}

.site-footer .muted {
  color: inherit;
  opacity: 0.8;
}

@media (max-width: 760px) {
  .hero {
    grid-template-columns: 1fr;
  }
}

/* ---- Logo ---- */
.brand-logo {
  height: 56px;
  width: auto;
}

@media (max-width: 760px) {
  .brand-logo {
    height: 44px;
  }
}

/* ---- Ligne « Vendredi soir » sous l'en-tête (tous formats) ---- */
.next-visit {
  background: rgba(11, 29, 43, 0.6); /* laisse voir le décor du ciel */
  border-top: 1px solid var(--line);
}
.next-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 0.95rem;
}
.next-row strong {
  color: var(--or);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05em;
}
.next-cta {
  color: var(--nuit);
  background: var(--or);
  text-decoration: none;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 3px;
  white-space: nowrap;
}
.next-cta:hover {
  color: var(--nuit);
  background: var(--or2, #f1d48e);
}
/* ---- Décor du ciel derrière l'en-tête (dégradé et grain), sur toutes les pages ----
   body est une grille : en-tête en ligne 1, <main> en 2, pied de page en 3 (la ligne 2 s'étire : le pied reste en
   bas d'une page courte). Le dégradé (body::before) et le grain (body::after) couvrent la ligne 1 : toute la
   largeur, derrière l'en-tête. Le dégradé reprend celui du ciel de images/ciel.svg, sans l'horizon, et finit sur
   --nuit, le fond de la page : pas de bord. Le grain s'efface vers le bas pour la même raison.
   L'accueil (plus bas) étend le décor jusque sous .hero et y met ciel.svg, horizon compris.
   Rien n'est nommé pour les View Transitions : le décor fait partie du fondu de la page. */
body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  isolation: isolate; /* le décor (z-index -1) reste devant le fond de body, derrière le contenu */
}
/* Une seule colonne pour tout le monde : sans cela, l'en-tête et <main> se placent à côté du décor */
body > *,
body::before,
body::after {
  grid-column: 1;
}
body > .site-header {
  grid-row: 1;
}
body > main {
  grid-row: 2;
}
body > .site-footer {
  grid-row: 3;
}
body::before,
body::after {
  content: "";
  grid-row: 1;
  z-index: -1;
  pointer-events: none;
}
body::before {
  background: linear-gradient(#06131f, #0b1f30 45%, var(--nuit)); /* arrêts du dégradé de ciel.svg */
}
body::after {
  background: url(images/grain.png); /* tuile 128 px, raccordable */
  mix-blend-mode: overlay; /* texture sans éclaircir les bleus profonds */
  opacity: 0.25;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
  mask-image: linear-gradient(to bottom, #000 40%, transparent);
}
@media print {
  body::before,
  body::after {
    display: none;
  }
}
/* ---- Accueil : le décor descend jusque sous .hero, avec l'horizon ----
   body.accueil (index.html) a une ligne de plus : <main> occupe les lignes 2–3 en sous-grille (.hero en 2,
   .home-content en 3), pied de page en 4. Le décor couvre les lignes 1–2 : du haut de page jusque sous .hero,
   sans sortir .hero de <main>.
   images/ciel.svg (1440 × 640, horizon dans les 160 px du bas) est dimensionné sur la LARGEUR (au moins 900 px pour
   que l'observatoire reste lisible sur téléphone) et calé en bas : l'horizon fait donc 1/4 de la hauteur de l'image,
   soit max(11.12vw, 100px), place réservée sous .hero. Au-dessus de l'image, --ciel-haut prolonge le ciel.
   Navigateurs sans sous-grille : décor derrière l'en-tête seulement, comme sur les autres pages. */
@supports (grid-template-rows: subgrid) {
  body.accueil {
    --ciel-haut: #06131f; /* couleur du haut du dégradé de ciel.svg */
    grid-template-rows: auto auto 1fr auto;
  }
  body.accueil > main {
    grid-row: 2 / 4;
    display: grid;
    grid-template-rows: subgrid;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
  /* La largeur de .wrap est portée par les enfants de <main>, pas par <main> : pour calculer les lignes de body,
     Firefox mesure les enfants d'une sous-grille sur toute la largeur de body, sans la largeur maximale ni les
     marges intérieures de <main>. La carte du ciel (hauteur proportionnelle à sa largeur) y paraissait plus haute,
     et la ligne de .home-content s'allongeait d'autant (jusqu'à plusieurs centaines de px en grand écran). */
  body.accueil > main > * {
    width: 100%;
    max-width: var(--wrap, 1040px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
  }
  body.accueil > .site-footer {
    grid-row: 4;
  }
  body.accueil::before,
  body.accueil::after {
    grid-row: 1 / 3;
  }
  body.accueil::before {
    background: var(--ciel-haut) url(images/ciel.svg) center bottom / max(100%, 900px) auto no-repeat;
  }
  body.accueil::after {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 160px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 160px), transparent);
  }
  body.accueil .hero {
    margin-bottom: 0;
    padding-bottom: max(11.12vw, 100px); /* hauteur de l'horizon */
  }
}
/* ---- Inscription aux visites publiques (fragments du service de réservation) ---- */
.obs-sessions {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.5rem;
}
.obs-session {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 16px;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.obs-session__title {
  grid-column: 1 / -1;
  color: var(--brume);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.obs-session__when {
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--etoile);
}
.obs-session__status {
  color: var(--or);
  white-space: nowrap;
  text-align: right;
}
.obs-session__message,
.obs-session__note {
  grid-column: 1 / -1;
  margin: 0.4rem 0 0;
}
.obs-session__note {
  color: var(--muted);
  font-size: 0.9rem;
}
.obs-state--not_yet_open .obs-session__status,
.obs-state--closed .obs-session__status {
  color: var(--muted);
}
.obs-state--cancelled .obs-session__when {
  text-decoration: line-through;
  color: var(--muted);
}
.obs-sessions {
  border-top: 1px solid var(--line);
}
.obs-form {
  display: grid;
  gap: 0.35rem;
  max-width: 34rem;
  margin: 2.5rem auto 1.5rem;
  padding: 24px 28px 28px;
  background: var(--nuit-2);
  border: 1px solid var(--trait);
  border-top: 4px solid var(--or);
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.obs-form h3 {
  margin: 0 0 0.6rem;
  font-size: 1.5rem;
  color: var(--or);
}
.obs-form label {
  margin-top: 0.5rem;
  font-weight: 700;
}
.obs-form input[type="text"],
.obs-form input[type="email"],
.obs-form input[type="tel"],
.obs-form input[type="number"],
.obs-form input[type="date"],
.obs-form select,
.obs-form textarea {
  font: inherit;
  color-scheme: dark; /* sélecteur de date et flèches lisibles sur fond nuit */
  color: var(--etoile);
  background: var(--nuit);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 8px 10px;
  width: 100%;
}
.obs-form textarea {
  resize: vertical;
  min-height: 6rem;
}
.obs-form input[type="number"] {
  max-width: 8rem;
}
.obs-form input[type="date"] {
  max-width: 14rem;
}
.obs-form input[aria-invalid="true"],
.obs-form select[aria-invalid="true"],
.obs-form textarea[aria-invalid="true"] {
  border-color: #e98a6a;
}
.obs-form .obs-form__consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-weight: normal;
}
.obs-form .obs-form__consent input {
  margin-top: 0.35rem;
  accent-color: var(--or);
}
.obs-form__note,
.obs-form__privacy {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0.4rem 0 0;
}
.obs-form .button {
  justify-self: start;
  margin-top: 0.8rem;
  border: 0;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
/* Formulaires de demande (classes, groupes, passeport-vacances, adhésion) */
.obs-optional {
  font-weight: normal;
  color: var(--muted);
}
.obs-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}
/* Dans le bloc de demande (déjà une carte) : pas de seconde carte autour du formulaire. */
.request .obs-form {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.obs-result .button {
  margin-top: 0.6rem;
}
/* Champ piège anti-spam : honeypot */
.obs-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.obs-field-error {
  color: #f0a58c;
  margin: 0;
  font-size: 0.9rem;
}
.obs-result--error {
  border-left-color: #e98a6a;
}
.obs-registration th {
  width: 12rem;
  color: var(--muted);
}
.obs-action {
  margin: 1.2rem 0;
}
.obs-button-secondary {
  font: inherit;
  color: var(--etoile);
  background: transparent;
  border: 1px solid var(--trait);
  border-radius: 3px;
  padding: 9px 16px;
  cursor: pointer;
}
.obs-button-secondary:hover {
  border-color: var(--or);
  color: var(--or);
}
@media (max-width: 760px) {
  .obs-session {
    grid-template-columns: 1fr;
  }
  .obs-session__status {
    text-align: left;
  }
  .obs-form {
    padding: 16px;
  }
}

/* ---- Navigation mobile : bouton Menu  ---- */
.burger {
  display: none;
}
.site-header {
  position: relative;
}

@media (max-width: 760px) {
  .menu {
    display: none;
  }
  .burger {
    display: block;
  }
  .header-row {
    gap: 10px;
    padding-bottom: 12px;
  }
  .brand {
    flex: 1;
    font-size: 1rem;
    min-width: 0;
    gap: 6px;
  }
  .brand span:last-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .langs {
    gap: 0;
  }
  .burger summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--etoile);
    font-weight: 700;
    font-size: 0.95rem;
  }
  .burger summary::-webkit-details-marker {
    display: none;
  }
  .burger-icon-svg {
    width: 24px;
    height: 24px;
  }
  .burger-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    background: var(--nuit-2);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px rgba(5, 15, 25, 0.45);
  }
  .burger-panel ul {
    list-style: none;
    margin: 0;
    padding: 6px 0;
  }
  .burger-panel a {
    display: block;
    padding: 14px 20px;
    color: var(--etoile);
    text-decoration: none;
    font-size: 1.1rem;
    border-bottom: 1px solid var(--line);
  }
  .burger-panel li:last-child a {
    border-bottom: 0;
  }
  .burger-panel a[aria-current] {
    color: var(--or);
  }
  /* Rubrique : le nom (lien) et, à droite, la flèche qui ouvre ses sous-pages (accordéon <details>) */
  .burger-panel .rub {
    position: relative;
  }
  .burger-panel .rub > a {
    min-height: 3.6rem;
    display: flex;
    align-items: center;
    padding-right: 68px;
  }
  .burger-panel .rub summary {
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 3.6rem;
    display: grid;
    place-items: center;
    list-style: none;
    cursor: pointer;
    color: var(--brume);
    border-left: 1px solid var(--line);
  }
  .burger-panel .rub summary::-webkit-details-marker {
    display: none;
  }
  .burger-panel .rub summary svg {
    width: 14px;
    height: 14px;
  }
  .burger-panel .rub details[open] > summary {
    color: var(--or);
  }
  .burger-panel .rub details[open] > summary svg {
    transform: rotate(180deg);
  }
  .burger-panel .rub summary:focus-visible {
    outline: 3px solid var(--or);
    outline-offset: -3px;
  }
  .burger-panel .rub > a {
    border-bottom: 1px solid var(--line);
  }
  .burger-panel ul.sous {
    padding: 2px 0 8px;
    background: rgba(0, 0, 0, 0.12);
    border-bottom: 1px solid var(--line);
  }
  .burger-panel li:last-child > details > ul.sous {
    border-bottom: 0;
  }
  .burger-panel .sous a {
    position: relative;
    padding: 9px 20px 9px 38px;
    font-size: 1rem;
    color: var(--brume);
    border-bottom: 0;
  }
  .burger-panel .sous a::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 50%;
    width: 7px;
    height: 1px;
    background: var(--line);
  }
  .burger-panel .sous a[aria-current] {
    color: var(--or);
    font-weight: 700;
  }
  .burger-panel .sous a[aria-current]::before {
    height: 2px;
    background: var(--or);
  }
}
@media (max-width: 430px) {
  .burger-label {
    position: absolute;
    left: -9999px;
  }
  .burger summary {
    padding: 9px 10px;
  }
  .brand span:last-child {
    position: absolute;
    left: -9999px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .burger-panel .rub summary svg {
    transition: transform 0.18s ease;
  }
}
/* ---- Icône Menu : constellation (templates/partials/icone-menu.html) ----
   Fermé : trois lignes de constellation écartées. Ouvert (.burger[open]) : celles du haut et du bas pivotent
   en croix, celle du milieu s'efface, une étoile d'or s'allume au croisement puis scintille. */
.burger-icon-svg {
  width: 28px;
  height: 28px;
  overflow: visible;
}
.burger-icon-svg .cst {
  transform-box: view-box;
  transform-origin: 14px 14px;
}
.burger-icon-svg line {
  stroke: var(--brume);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.burger-icon-svg circle {
  fill: var(--etoile);
}
.burger-icon-svg circle.or {
  fill: var(--or);
}
.burger-icon-svg .cst-haut {
  transform: translateY(-7px);
}
.burger-icon-svg .cst-bas {
  transform: translateY(7px);
}
.burger-icon-svg .cst-etoile {
  fill: var(--or);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
}
.burger[open] .cst-haut {
  transform: rotate(45deg);
}
.burger[open] .cst-bas {
  transform: rotate(-45deg);
}
.burger[open] .cst-milieu {
  transform: scaleX(0);
  opacity: 0;
}
.burger[open] .cst-etoile {
  transform: scale(1);
}
.burger[open] summary {
  border-color: var(--or);
}
@media (prefers-reduced-motion: no-preference) {
  .burger-icon-svg .cst-haut,
  .burger-icon-svg .cst-bas {
    transition: transform 480ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .burger-icon-svg .cst-milieu {
    transition:
      transform 380ms ease,
      opacity 300ms ease;
  }
  .burger-icon-svg .cst-etoile {
    transition: transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1) 160ms;
  }
  .burger[open] .cst-etoile {
    animation: cst-scintille 2.4s ease-in-out 700ms infinite;
  }
  .burger summary {
    transition: border-color 300ms ease;
  }
}
@keyframes cst-scintille {
  0%,
  100% {
    opacity: 1;
  }
  45% {
    opacity: 0.45;
  }
  60% {
    opacity: 0.9;
  }
}
/* Panneau du menu mobile : il glisse à l'ouverture, les rubriques arrivent l'une après l'autre */
.burger-panel {
  border-top: 2px solid var(--or);
}
@media (prefers-reduced-motion: no-preference) {
  .burger[open] .burger-panel,
  .burger[open] .burger-panel > ul > li {
    animation: menu-entre 380ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .burger[open] .burger-panel > ul > li:nth-child(2) { animation-delay: 45ms; }
  .burger[open] .burger-panel > ul > li:nth-child(3) { animation-delay: 90ms; }
  .burger[open] .burger-panel > ul > li:nth-child(4) { animation-delay: 135ms; }
  .burger[open] .burger-panel > ul > li:nth-child(5) { animation-delay: 180ms; }
}
@keyframes menu-entre {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}