@charset "UTF-8";

/* ==========================================================================
   Seestar — feuille de style principale

   Direction : l'almanach, pas le planetarium. Le site est un instrument de
   travail. Les seules images qui y apparaissent sont les photographies de
   l'utilisateur, gagnees sur le terrain — jamais du decor.

   La palette est derivee de la physique du ciel plutot que choisie :
     - le fond n'est pas noir mais indigo profond, couleur reelle d'un ciel
       de nuit noire ;
     - l'ambre est celui du crepuscule et des lampadaires au sodium, c'est
       a dire a la fois la beaute et l'ennemi de l'astronome ;
     - le cyan pale est celui de la raie OIII, il ne sert qu'aux donnees ;
     - l'ivoire est celui du clair de Lune.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fontes — auto-hebergees, indispensable au fonctionnement hors ligne
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Plex Cond";
  src: url("../fonts/plex-cond-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Cond";
  src: url("../fonts/plex-cond-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Cond";
  src: url("../fonts/plex-cond-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Sans";
  src: url("../fonts/plex-sans.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Jetons
   -------------------------------------------------------------------------- */

:root {
  --ciel-0: #06080f;
  --ciel-1: #0b0f1d;
  --ciel-2: #121829;
  --ciel-3: #1b2338;

  --trait: rgb(155 164 189 / 16%);
  --trait-fort: rgb(155 164 189 / 32%);

  --texte: #eae8e2;
  --texte-2: #9ba4bd;
  --texte-3: #6b7492;

  --ambre: #e9a648;
  --ambre-clair: #f6c274;
  --cyan: #74cfe6;
  --lune: #efe6cc;

  /* Teintes propres a la barre de nuit. Elles sont declarees en variables et
     non en dur : le mode vision nocturne doit pouvoir les remplacer, sinon une
     large bande ambre et bleue en plein ecran ruine l'adaptation a l'obscurite
     que ce mode cherche precisement a preserver. */
  --barre-jour: #232c46;
  --barre-crep-1: #e9a648;
  --barre-crep-2: #a86b3e;
  --barre-crep-3: #4a3a4d;
  --barre-crep-4: #1b2338;
  --barre-nuit: #05070d;
  --barre-lune-trait: rgb(239 230 204 / 34%);
  --barre-lune-1: rgb(239 230 204 / 13%);
  --barre-lune-2: rgb(239 230 204 / 6%);
  --halo: rgb(27 35 56 / 70%);

  --f-titre: "Plex Cond", "Helvetica Neue", sans-serif;
  --f-corps: "Plex Sans", system-ui, sans-serif;
  --f-data: "Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --largeur: 66rem;
  --gouttiere: clamp(1.25rem, 5vw, 3rem);
  --rayon: 3px;

  --duree: 240ms;
}

/* Mode vision nocturne : rouge sur noir, pour ne pas detruire vingt minutes
   d'adaptation a l'obscurite. Seules les variables changent, pas le balisage. */
:root[data-vision="nuit"] {
  --ciel-0: #000;
  --ciel-1: #000;
  --ciel-2: #0d0200;
  --ciel-3: #1a0400;

  --trait: rgb(255 60 24 / 22%);
  --trait-fort: rgb(255 60 24 / 42%);

  --texte: #ff5230;
  --texte-2: #c33a1d;
  --texte-3: #8a2814;

  --ambre: #ff5230;
  --ambre-clair: #ff7a55;
  --cyan: #ff5230;
  --lune: #ff7a55;

  --barre-jour: #2b0a03;
  --barre-crep-1: #ff5230;
  --barre-crep-2: #a83318;
  --barre-crep-3: #5a1a0b;
  --barre-crep-4: #2b0a03;
  --barre-nuit: #000;
  --barre-lune-trait: rgb(255 122 85 / 34%);
  --barre-lune-1: rgb(255 122 85 / 14%);
  --barre-lune-2: rgb(255 122 85 / 6%);
  --halo: rgb(60 12 4 / 60%);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ciel-1);
  color: var(--texte);
  font: 400 clamp(1rem, 0.97rem + 0.15vw, 1.0625rem) / 1.65 var(--f-corps);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--f-titre);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

p {
  margin: 0;
}

a {
  color: var(--ambre);
  text-decoration-color: rgb(233 166 72 / 40%);
  text-underline-offset: 0.2em;
  transition: color var(--duree);
}

a:hover {
  color: var(--ambre-clair);
}

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

.contenu {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* Etiquette technique : petites capitales espacees, en monospace. C'est le
   vocabulaire des tables d'ephemerides, et il structure toute la page. */
.etiquette {
  font: 500 0.6875rem / 1 var(--f-data);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-3);
}

.donnee {
  font-family: var(--f-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------------------
   Bandeau
   -------------------------------------------------------------------------- */

.bandeau {
  border-bottom: 1px solid var(--trait);
  background: var(--ciel-0);
}

.bandeau__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.125rem;
}

.logo {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  font-family: var(--f-titre);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--texte);
  text-decoration: none;
}

.logo__point {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ambre);
  box-shadow: 0 0 0 3px rgb(233 166 72 / 18%);
  transform: translateY(-1px);
}

.bandeau__note {
  font: 400 0.8125rem / 1 var(--f-data);
  color: var(--texte-3);
}

/* --------------------------------------------------------------------------
   Bouton vision nocturne
   -------------------------------------------------------------------------- */

.vision {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: transparent;
  color: var(--texte-2);
  font: 500 0.6875rem / 1 var(--f-data);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--duree), color var(--duree);
}

.vision:hover {
  border-color: var(--trait-fort);
  color: var(--texte);
}

.vision__pastille {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid currentcolor;
}

:root[data-vision="nuit"] .vision__pastille {
  background: currentcolor;
}

/* --------------------------------------------------------------------------
   Hero — la nuit en cours
   -------------------------------------------------------------------------- */

.nuit {
  padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(2rem, 5vw, 3.25rem);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--halo) 0%, transparent 62%),
    var(--ciel-1);
}

.nuit__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-bottom: 1.25rem;
}

.nuit__lieu {
  font: 500 0.6875rem / 1 var(--f-data);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ambre);
}

.nuit__date {
  font: 400 0.8125rem / 1 var(--f-data);
  color: var(--texte-3);
}

.nuit__titre {
  font-size: clamp(2.1rem, 1.2rem + 4.2vw, 4rem);
  font-weight: 600;
  text-wrap: balance;
}

.nuit__titre .horaire {
  font-family: var(--f-data);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--ambre-clair);
}

.nuit__resume {
  margin-top: 1.125rem;
  color: var(--texte-2);
}

.nuit__resume strong {
  color: var(--texte);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   La barre de nuit — element signature
   -------------------------------------------------------------------------- */

.barre {
  margin-top: clamp(2rem, 5vw, 3rem);
}

/* La piste porte la teinte du ciel encore clair. Les segments de crepuscule
   puis de nuit l'assombrissent progressivement, si bien que la nuit
   astronomique se lit comme ce qu'elle est : la portion la plus sombre.
   Une piste deja noire rendrait cette portion invisible. */
.barre__piste {
  position: relative;
  height: clamp(64px, 11vw, 104px);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--barre-jour);
  overflow: hidden;
}

.barre__seg {
  position: absolute;
  inset-block: 0;
}

/* Le crepuscule du soir : le ciel perd sa lumiere de gauche a droite. */
.barre__seg--soir {
  background: linear-gradient(
    90deg,
    var(--barre-crep-1) 0%,
    var(--barre-crep-2) 18%,
    var(--barre-crep-3) 46%,
    var(--barre-crep-4) 76%,
    var(--barre-nuit) 100%
  );
}

/* Le crepuscule du matin : symetrique, la lumiere revient. */
.barre__seg--matin {
  background: linear-gradient(
    90deg,
    var(--barre-nuit) 0%,
    var(--barre-crep-4) 24%,
    var(--barre-crep-3) 54%,
    var(--barre-crep-2) 82%,
    var(--barre-crep-1) 100%
  );
}

/* La nuit astronomique : le fond de ciel ne descend plus. */
.barre__seg--noir {
  background: var(--barre-nuit);
}

/* La Lune levee. C'est une surimpression et non un segment : la Lune se
   superpose au crepuscule comme a la nuit noire, elle ne les remplace pas. */
.barre__lune {
  position: absolute;
  inset-block: 0;
  background: repeating-linear-gradient(
    -45deg,
    var(--barre-lune-1) 0 6px,
    var(--barre-lune-2) 6px 12px
  );
  border-inline: 1px solid var(--barre-lune-trait);
}

/* La fenetre reellement exploitable : nuit astronomique ET Lune couchee. */
.barre__fenetre {
  position: absolute;
  inset-block: 0;
  border: 1px solid rgb(116 207 230 / 45%);
  border-radius: 2px;
  background: rgb(116 207 230 / 7%);
}

.barre__maintenant {
  position: absolute;
  inset-block: 0;
  width: 1px;
  background: var(--cyan);
  box-shadow: 0 0 10px 1px rgb(116 207 230 / 55%);
}

.barre__maintenant::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  transform: translateX(-50%);
}

.barre__graduations {
  position: relative;
  height: 1.5rem;
  margin-top: 0.5rem;
}

.barre__tick {
  position: absolute;
  top: 0;
  font: 400 0.6875rem / 1 var(--f-data);
  color: var(--texte-3);
  transform: translateX(-50%);
  white-space: nowrap;
}

.barre__tick::before {
  content: "";
  display: block;
  width: 1px;
  height: 5px;
  margin: -0.5rem auto 0.35rem;
  background: var(--trait-fort);
}

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1.25rem;
  padding: 0;
  list-style: none;
}

.legende li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font: 400 0.75rem / 1.4 var(--f-data);
  color: var(--texte-3);
}

.legende__puce {
  width: 14px;
  height: 10px;
  border-radius: 1px;
  flex: none;
}

.legende__puce--soir {
  background: linear-gradient(90deg, var(--barre-crep-1), var(--barre-crep-4));
}

.legende__puce--noir {
  background: var(--barre-nuit);
  border: 1px solid var(--trait-fort);
}

.legende__puce--lune {
  background: repeating-linear-gradient(
    -45deg,
    var(--barre-lune-trait) 0 4px,
    var(--barre-lune-2) 4px 8px
  );
  border: 1px solid var(--barre-lune-trait);
}

.legende__puce--fenetre {
  background: rgb(116 207 230 / 12%);
  border: 1px solid rgb(116 207 230 / 55%);
}

/* --------------------------------------------------------------------------
   Chiffres cles
   -------------------------------------------------------------------------- */

.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  margin-top: clamp(2rem, 5vw, 3rem);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--trait);
  overflow: hidden;
}

.chiffre {
  padding: 1.125rem 1.25rem 1.25rem;
  background: var(--ciel-2);
}

.chiffre__valeur {
  display: block;
  margin-top: 0.5rem;
  font: 400 clamp(1.5rem, 1.2rem + 1.1vw, 1.9rem) / 1 var(--f-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--texte);
}

.chiffre__valeur--attention {
  color: var(--ambre);
}

.chiffre__detail {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--texte-3);
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section {
  padding-block: clamp(3rem, 8vw, 5rem);
  border-top: 1px solid var(--trait);
}

.section__titre {
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2rem);
  margin-bottom: 0.75rem;
}

.section__chapeau {
  color: var(--texte-2);
  margin-bottom: 2.5rem;
}

/* --------------------------------------------------------------------------
   Feuille de route

   La numerotation est justifiee ici : les lots se construisent reellement
   dans cet ordre, chacun s'appuyant sur le precedent. L'ordre porte donc une
   information, il ne decore pas.
   -------------------------------------------------------------------------- */

.lots {
  display: grid;
  gap: 1px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--trait);
  overflow: hidden;
}

.lot {
  display: grid;
  grid-template-columns: 3.25rem 1fr auto;
  align-items: baseline;
  gap: 0.5rem 1rem;
  padding: 1.125rem 1.25rem;
  background: var(--ciel-2);
}

.lot__rang {
  font: 400 0.8125rem / 1.5 var(--f-data);
  color: var(--texte-3);
}

.lot__nom {
  font-family: var(--f-titre);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--texte);
}

.lot__detail {
  grid-column: 2;
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  color: var(--texte-2);
}

.lot__etat {
  font: 500 0.6875rem / 1 var(--f-data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--trait-fort);
  border-radius: 2px;
  color: var(--texte-3);
  white-space: nowrap;
}

.lot--fait .lot__etat {
  color: var(--cyan);
  border-color: rgb(116 207 230 / 45%);
}

.lot--fait .lot__rang {
  color: var(--cyan);
}

.lot--encours .lot__etat {
  color: var(--ambre);
  border-color: rgb(233 166 72 / 45%);
}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.pied {
  padding-block: 2.5rem 3.5rem;
  border-top: 1px solid var(--trait);
  background: var(--ciel-0);
}

.pied__texte {
  font-size: 0.875rem;
  color: var(--texte-3);
}

.pied__texte + .pied__texte {
  margin-top: 0.75rem;
}

/* --------------------------------------------------------------------------
   Messages
   -------------------------------------------------------------------------- */

.messages {
  padding-block: 1rem;
}

.message {
  padding: 0.75rem 1rem;
  border: 1px solid var(--trait-fort);
  border-left-width: 3px;
  border-radius: var(--rayon);
  background: var(--ciel-2);
  font-size: 0.9375rem;
}

.message + .message {
  margin-top: 0.5rem;
}

.message--success {
  border-left-color: var(--cyan);
}

.message--error {
  border-left-color: var(--ambre);
}

/* --------------------------------------------------------------------------
   Pages d'erreur
   -------------------------------------------------------------------------- */

.erreur {
  padding-block: clamp(4rem, 12vw, 8rem);
}

.erreur__code {
  font: 400 clamp(3.5rem, 2rem + 7vw, 6rem) / 1 var(--f-data);
  color: var(--ambre);
  letter-spacing: -0.04em;
}

.erreur__titre {
  margin-top: 0.75rem;
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2rem);
}

.erreur__texte {
  margin-top: 1rem;
  color: var(--texte-2);
}

.erreur__retour {
  display: inline-block;
  margin-top: 2rem;
  font-family: var(--f-data);
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   Petits ecrans
   -------------------------------------------------------------------------- */

@media (max-width: 40rem) {
  .bandeau__inner {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .bandeau__note {
    display: none;
  }

  .lot {
    grid-template-columns: 2.75rem 1fr;
  }

  .lot__etat {
    grid-column: 2;
    justify-self: start;
    margin-top: 0.5rem;
  }
}

/* --------------------------------------------------------------------------
   Accessibilite
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  padding: 0.75rem 1rem;
  background: var(--ciel-3);
  color: var(--texte);
  z-index: 10;
}

.saut-contenu:focus {
  left: 1rem;
  top: 1rem;
}

/* ==========================================================================
   Lot L2 — lieux, instruments, formulaires
   ========================================================================== */

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.nav {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
}

.nav a,
.nav__lien-bouton {
  font: 500 0.75rem / 1 var(--f-data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-2);
  text-decoration: none;
  transition: color var(--duree);
}

.nav a:hover,
.nav__lien-bouton:hover {
  color: var(--texte);
}

.nav__lien-bouton {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

.nav form {
  display: flex;
  align-items: baseline;
}

/* --------------------------------------------------------------------------
   Mises en page
   -------------------------------------------------------------------------- */

.contenu--etroit {
  max-width: 44rem;
}

.entete-page {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 1.5rem;
}

.grille-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1.25rem;
}

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

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1rem;
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon);
  background: transparent;
  color: var(--texte);
  font: 500 0.8125rem / 1 var(--f-data);
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--duree), background-color var(--duree), color var(--duree);
}

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

.bouton--primaire {
  border-color: var(--ambre);
  background: var(--ambre);
  color: #10131f;
}

.bouton--primaire:hover {
  background: var(--ambre-clair);
  border-color: var(--ambre-clair);
  color: #10131f;
}

.bouton--danger:hover {
  border-color: #d4553a;
  color: #e2725a;
}

/* --------------------------------------------------------------------------
   Formulaires
   -------------------------------------------------------------------------- */

.formulaire {
  margin-top: 2rem;
}

.formulaire__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.bloc {
  margin: 0 0 1.75rem;
  padding: 1.5rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--ciel-2);
}

.bloc__titre {
  padding: 0;
  font: 600 1.0625rem / 1.2 var(--f-titre);
  color: var(--texte);
}

.bloc__aide {
  margin: 0.5rem 0 1.25rem;
  font-size: 0.9375rem;
  color: var(--texte-2);
}

.champ {
  margin-bottom: 1.25rem;
}

.champ:last-child {
  margin-bottom: 0;
}

.champ__label {
  display: block;
  margin-bottom: 0.4rem;
  font: 500 0.6875rem / 1 var(--f-data);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-3);
}

.champ__saisie {
  display: block;
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon);
  background: var(--ciel-0);
  color: var(--texte);
  font: 400 1rem / 1.4 var(--f-corps);
  transition: border-color var(--duree);
}

.champ__saisie:focus {
  border-color: var(--ambre);
  outline: none;
}

textarea.champ__saisie {
  resize: vertical;
  min-height: 4.5rem;
}

select.champ__saisie {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--texte-3) 50%),
                    linear-gradient(135deg, var(--texte-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}

.champ__aide {
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--texte-3);
}

.champ__erreur {
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  color: var(--ambre);
}

.case {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.9375rem;
  cursor: pointer;
}

.case input {
  margin-top: 0.28rem;
  width: 1rem;
  height: 1rem;
  accent-color: var(--ambre);
  flex: none;
}

.case .champ__aide {
  display: block;
}

/* --------------------------------------------------------------------------
   Recherche de lieu
   -------------------------------------------------------------------------- */

.recherche {
  position: relative;
}

.recherche__etat {
  min-height: 1.25rem;
  margin-top: 0.4rem;
  font: 400 0.8125rem / 1.25rem var(--f-data);
  color: var(--texte-3);
}

.recherche__resultats {
  position: absolute;
  z-index: 20;
  inset-inline: 0;
  top: calc(100% + 0.4rem);
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon);
  background: var(--ciel-3);
  box-shadow: 0 18px 40px rgb(0 0 0 / 55%);
  max-height: 20rem;
  overflow-y: auto;
}

.recherche__resultat {
  display: block;
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 0;
  border-bottom: 1px solid var(--trait);
  background: none;
  color: var(--texte);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duree);
}

.recherche__resultats li:last-child .recherche__resultat {
  border-bottom: 0;
}

.recherche__resultat:hover,
.recherche__resultat:focus-visible {
  background: rgb(233 166 72 / 12%);
}

.recherche__nom {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.3;
}

.recherche__meta {
  display: block;
  margin-top: 0.2rem;
  font: 400 0.75rem / 1.3 var(--f-data);
  color: var(--texte-3);
}

/* --------------------------------------------------------------------------
   Carte

   Les tuiles d'OpenStreetMap sont concues pour un fond clair. Telles quelles,
   elles font une tache blanche au milieu d'une interface sombre — et en mode
   vision nocturne, elles ruineraient l'adaptation a l'obscurite. On les
   assombrit, et on les vire au rouge avec le reste.
   -------------------------------------------------------------------------- */

.carte-lieu {
  height: clamp(15rem, 40vw, 22rem);
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon);
  background: var(--ciel-0);
  z-index: 0;
}

/* Inversion puis rotation de teinte : c'est la methode qui donne une carte
   reellement sombre tout en gardant les libelles lisibles. Un simple
   assombrissement laisse un fond gris clair qui tranche avec le reste. */
.carte-lieu .leaflet-tile {
  filter: invert(1) hue-rotate(180deg) brightness(0.88) contrast(0.9) saturate(0.32);
}

:root[data-vision="nuit"] .carte-lieu .leaflet-tile {
  filter: grayscale(1) sepia(1) hue-rotate(-24deg) saturate(5) brightness(0.4);
}

.carte-lieu .leaflet-control-attribution {
  background: rgb(6 8 15 / 82%);
  color: var(--texte-3);
  font-family: var(--f-data);
  font-size: 0.6875rem;
}

.carte-lieu .leaflet-control-attribution a {
  color: var(--texte-2);
}

.carte-lieu .leaflet-bar a {
  background: var(--ciel-3);
  color: var(--texte);
  border-bottom-color: var(--trait);
}

.carte-lieu .leaflet-bar a:hover {
  background: var(--ciel-2);
  color: var(--ambre);
}

.carte-lieu__absente {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--ambre);
}

/* --------------------------------------------------------------------------
   Profil d'horizon
   -------------------------------------------------------------------------- */

.horizon {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.horizon__apercu svg {
  width: 100%;
  height: auto;
  max-width: 15rem;
}

.horizon__cercle {
  fill: none;
  stroke: var(--trait-fort);
  stroke-width: 1;
}

.horizon__cercle--fin {
  stroke: var(--trait);
  stroke-dasharray: 2 4;
}

.horizon__masque {
  fill: var(--ambre);
  fill-opacity: 0.32;
  stroke: var(--ambre);
  stroke-width: 0.75;
  stroke-opacity: 0.55;
}

.horizon__rose {
  fill: var(--texte-3);
  font: 500 11px var(--f-data);
  text-anchor: middle;
}

.horizon__legende {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--texte-3);
}

.horizon__saisie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 0.5rem;
}

.secteur {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--ciel-0);
}

.secteur__nom {
  flex: none;
  width: 2.4rem;
  font: 500 0.75rem / 1 var(--f-data);
  color: var(--texte-3);
}

.secteur__valeur {
  width: 100%;
  min-width: 0;
  padding: 0.25rem 0.1rem;
  border: 0;
  background: none;
  color: var(--texte);
  font: 400 0.9375rem / 1 var(--f-data);
  text-align: right;
}

.secteur__valeur:focus {
  outline: none;
  color: var(--ambre);
}

.secteur__unite {
  flex: none;
  font: 400 0.8125rem / 1 var(--f-data);
  color: var(--texte-3);
}

/* --------------------------------------------------------------------------
   Cartes de contenu
   -------------------------------------------------------------------------- */

.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 1.25rem;
}

.carte {
  padding: 1.5rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--ciel-2);
}

.carte--active {
  border-color: rgb(116 207 230 / 45%);
}

.carte__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.carte__titre {
  font-size: 1.25rem;
}

.carte__soustitre {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--texte-3);
}

.carte__note {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--trait);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--texte-2);
}

.carte__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.fanion {
  padding: 0.3rem 0.5rem;
  border: 1px solid rgb(116 207 230 / 45%);
  border-radius: 2px;
  font: 500 0.625rem / 1 var(--f-data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Listes de caracteristiques
   -------------------------------------------------------------------------- */

.fiche {
  margin: 1.25rem 0 0;
  display: grid;
  gap: 0.6rem;
}

.fiche > div {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 0.5rem 1rem;
  align-items: baseline;
}

.fiche dt {
  font: 500 0.6875rem / 1.3 var(--f-data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-3);
}

.fiche dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.fiche--serree > div {
  grid-template-columns: 8.5rem minmax(0, 1fr);
}

.valeur-forte {
  color: var(--ambre);
  font-weight: 500;
}

.attenue {
  color: var(--texte-3);
}

/* --------------------------------------------------------------------------
   Petits ecrans
   -------------------------------------------------------------------------- */

@media (max-width: 48rem) {
  .horizon {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .horizon__apercu {
    justify-self: center;
  }
}

@media (max-width: 40rem) {
  .nav {
    gap: 0.9rem;
  }

  .vision__texte {
    display: none;
  }

  .bloc {
    padding: 1.125rem;
  }

  .fiche > div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .carte__actions .bouton {
    flex: 1 1 auto;
  }
}