/* 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;
  display: flex;
  flex-direction: column;
  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 {
  flex: 1 0 auto;
  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;
}
.site-footer {
  border-top: 1px solid var(--line);
  background: #0b1d2b;
  color: var(--brume);
}

.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: #0b1d2b;
  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);
}

/* ---- 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 select {
  font: inherit;
  color: var(--etoile);
  background: var(--nuit);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 8px 10px;
  width: 100%;
}
.obs-form input[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;
}
/* 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,
  .burger-icon::before,
  .burger-icon::after {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--or);
    border-radius: 1px;
    position: relative;
  }
  .burger-icon::before,
  .burger-icon::after {
    content: "";
    position: absolute;
    left: 0;
  }
  .burger-icon::before {
    top: -6px;
  }
  .burger-icon::after {
    top: 6px;
  }
  .burger[open] .burger-icon {
    background: transparent;
  }
  .burger[open] .burger-icon::before {
    top: 0;
    transform: rotate(45deg);
  }
  .burger[open] .burger-icon::after {
    top: 0;
    transform: rotate(-45deg);
  }
  .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-icon::before,
  .burger-icon::after {
    transition:
      transform 0.2s ease,
      top 0.2s ease;
  }
  .burger-panel .rub summary svg {
    transition: transform 0.18s ease;
  }
}