/* ============================================================
   composants.css — briques partagées
   ============================================================ */

/* ------------------------------------------------------------
   Barre de navigation
   ------------------------------------------------------------
   Les rubriques sont centrées dans la fenêtre, pas alignées à
   droite : la marque tient la gauche, les outils la droite, et
   le menu reste au milieu quelle que soit la largeur du nom du
   site. Positionnement absolu plutôt que flex, pour que le
   centre soit celui de l'écran et non celui de l'espace restant.
   ------------------------------------------------------------ */
.nav {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(6, 9, 18, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bord);
}
.nav__in {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--nav-h);
}

.marque {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: none;
  margin-right: auto;
}
.marque img { width: 26px; height: 26px; }
.marque__txt {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.04rem;
  letter-spacing: -.02em;
}
.marque__txt em { font-style: normal; color: var(--azur); }

.nav__liens {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav__liens a {
  text-decoration: none;
  font-size: .9rem;
  color: var(--texte-3);
  padding: 8px 13px;
  border-radius: var(--rayon-sm);
  transition: color .15s;
  white-space: nowrap;
}
.nav__liens a:hover { color: var(--texte); }
.nav__liens a[aria-current="page"] {
  color: var(--texte);
  box-shadow: inset 0 -1px 0 0 var(--azur);
  border-radius: 0;
}

/* ------------------------------------------------------------
   L'entrée « Stars »
   ------------------------------------------------------------
   Une étoile à côté du mot, et un éclat qui traverse les lettres
   comme une filante. Le balayage est bref — moins d'une seconde
   toutes les sept — pour attirer l'œil sans clignoter.
   ------------------------------------------------------------ */
.nav__stars { display: inline-flex; align-items: center; gap: 7px; }

.nav__astre {
  width: 12px; height: 12px;
  flex: none;
  fill: currentColor;
  color: var(--azur-vif);
  opacity: .6;
  transition: opacity .25s, transform .35s;
  animation: astre-eclat 7s ease-out infinite;
}
.nav__stars:hover .nav__astre {
  opacity: 1;
  transform: rotate(72deg) scale(1.12);
}

/* La mécanique du calque est dans base.css ; ici on ne fournit
   que la peinture et la cadence propres à la navigation. */
.nav__stars .etincelle::after {
  background-image: linear-gradient(
    104deg,
    transparent 41%,
    rgba(255, 255, 255, .96) 48%,
    rgba(196, 226, 255, .9) 52%,
    transparent 60%
  );
  background-size: 280% 100%;
  background-position: 155% 0;
  animation: filante-texte 7s linear infinite;
}

@keyframes filante-texte {
  0%   { background-position: 155% 0; }
  11%  { background-position: -75% 0; }
  100% { background-position: -75% 0; }
}
@keyframes astre-eclat {
  0%   { opacity: .6; filter: none; }
  4%   { opacity: 1; filter: drop-shadow(0 0 5px rgba(150, 200, 255, .85)); }
  13%  { opacity: .6; filter: none; }
  100% { opacity: .6; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__astre { animation: none; }
  .nav__stars .etincelle::after { animation: none; content: none; }
}

.nav__outils { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }

/* ------------------------------------------------------------
   Le lien vers le compte X du projet
   ------------------------------------------------------------
   Un carré portant la lettre, composée dans la police du site :
   c'est un lien vers le compte, pas une reprise du logo de la
   plateforme. Il s'aligne sur le bouton de fond d'écran et reste
   à droite de la barre, le menu hamburger passant après lui sur
   les écrans étroits.
   ------------------------------------------------------------ */
.nav__x {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  text-decoration: none;
  font-family: var(--titre);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  color: var(--texte-3);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-sm);
  transition: color .18s, border-color .18s, background .18s;
}
.nav__x:hover {
  color: var(--texte);
  border-color: var(--bord-vif);
  background: var(--nuit-2);
}

.nav__burger {
  display: none;
  width: 38px; height: 38px;
  border: 1px solid var(--bord);
  border-radius: var(--rayon-sm);
  color: var(--texte-2);
}

@media (max-width: 980px) {
  .nav__burger { display: grid; place-items: center; order: 3; }
  .nav__outils { margin-left: 12px; order: 2; }
  .nav__liens {
    position: absolute; top: 100%; left: 0; right: 0;
    transform: none;
    flex-direction: column; align-items: stretch;
    background: rgba(8, 12, 24, .98);
    border-bottom: 1px solid var(--bord);
    padding: 8px; gap: 2px;
    display: none;
  }
  .nav__liens.ouvert { display: flex; }
  .nav__liens a { padding: 12px 14px; text-align: center; }
  .nav__liens a[aria-current="page"] { box-shadow: none; color: var(--azur-vif); }
  .nav__stars { justify-content: center; }
}
@media (max-width: 520px) {
  .nav__outils { display: none; }
}

/* ------------------------------------------------------------
   Boutons
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: .92rem;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: var(--rayon-sm);
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .12s, box-shadow .15s, background .15s, border-color .15s;
  white-space: nowrap;
}
.btn--primaire {
  background: var(--azur);
  color: #04101f;
}
.btn--primaire:hover { background: var(--azur-vif); }
.btn--flamme { background: var(--flamme); color: #1b0a02; }
.btn--flamme:hover { background: var(--flamme-2); }
.btn--fantome {
  border-color: var(--bord-vif);
  color: var(--texte-2);
  background: transparent;
}
.btn--fantome:hover { border-color: var(--texte-3); color: var(--texte); }
.btn--sm { padding: 8px 13px; font-size: .84rem; }
.btn[disabled] { opacity: .4; pointer-events: none; }

/* ------------------------------------------------------------
   Panneaux
   ------------------------------------------------------------ */
.carte {
  background: rgba(10, 15, 28, .66);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: clamp(16px, 2.4vw, 26px);
  backdrop-filter: blur(8px);
}
.carte--vif { border-color: var(--bord-vif); }

/* ------------------------------------------------------------
   Pastilles de statut
   ------------------------------------------------------------ */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.pastille::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.st-succes  { color: var(--succes);  background: rgba(52, 211, 153, .10); }
.st-echec   { color: var(--echec);   background: rgba(248, 113, 113, .10); }
.st-attente { color: var(--attente); background: rgba(251, 191, 36, .10); }
.st-partiel { color: var(--partiel); background: rgba(192, 132, 252, .10); }
.st-go      { color: var(--azur);    background: rgba(77, 163, 255, .10); }
.st-neutre  { color: var(--texte-3); background: rgba(255, 255, 255, .04); }
.st-direct  { color: var(--flamme);  background: rgba(255, 107, 53, .14); }
.st-direct::before { animation: bat 1.1s ease-in-out infinite; }
@keyframes bat { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(1.4); } }

/* étiquette d'orbite */
.orbite {
  display: inline-block;
  font-family: var(--mono);
  font-size: .7rem;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(124, 92, 255, .14);
  border: 1px solid rgba(124, 92, 255, .3);
  color: #b9a9ff;
  white-space: nowrap;
}
.orbite[data-o="GTO"], .orbite[data-o="GEO"] { background: rgba(34,211,238,.12); border-color: rgba(34,211,238,.3); color: #7fe6f5; }
.orbite[data-o="SSO"], .orbite[data-o="PO"]  { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.3); color: #7fe3c0; }
.orbite[data-o="TLI"], .orbite[data-o="HCO"], .orbite[data-o="Direct Ascent"] { background: rgba(255,107,53,.12); border-color: rgba(255,107,53,.32); color: #ffb18c; }

/* ------------------------------------------------------------
   Compte à rebours
   ------------------------------------------------------------ */
.rebours { display: flex; gap: 10px; flex-wrap: wrap; }
.rebours__bloc {
  min-width: 68px;
  text-align: center;
  background: rgba(6, 10, 22, .72);
  border: 1px solid var(--bord-vif);
  border-radius: var(--rayon-sm);
  padding: 10px 8px;
}
.rebours__bloc b {
  display: block;
  font-family: var(--mono);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--texte);
  font-variant-numeric: tabular-nums;
}
.rebours__bloc span {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texte-3);
}
.rebours--passe .rebours__bloc b { color: var(--texte-3); }
.rebours--imminent .rebours__bloc { border-color: rgba(255, 107, 53, .5); }
.rebours--imminent .rebours__bloc b { color: var(--flamme-2); }

/* ------------------------------------------------------------
   Tableaux
   ------------------------------------------------------------ */
.tableau-boite {
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  background: rgba(8, 12, 24, .74);
  backdrop-filter: blur(8px);
  overflow: hidden;
}
.tableau-defile { overflow-x: auto; }
table.donnees { min-width: 900px; font-size: .92rem; }

table.donnees thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: rgba(10, 15, 29, .97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bord-vif);
  text-align: left;
  padding: 13px 14px;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--texte-3);
  white-space: nowrap;
  font-weight: 500;
}
table.donnees thead th.triable { cursor: pointer; user-select: none; }
table.donnees thead th.triable:hover { color: var(--azur-vif); }
table.donnees thead th .fl { opacity: .3; margin-left: 5px; }
table.donnees th[aria-sort] .fl { opacity: 1; color: var(--azur); }

table.donnees tbody tr {
  border-bottom: 1px solid rgba(30, 41, 66, .6);
  cursor: pointer;
  transition: background .12s;
}
table.donnees tbody tr:hover { background: rgba(77, 163, 255, .07); }
table.donnees tbody tr:last-child { border-bottom: 0; }
table.donnees tbody td { padding: 12px 14px; vertical-align: middle; }

/* séparateur de mois inséré dans le fil chronologique */
tr.jalon td {
  background: rgba(77, 163, 255, .07);
  border-top: 1px solid rgba(77, 163, 255, .22);
  border-bottom: 1px solid rgba(77, 163, 255, .22);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--azur-vif);
  padding: 8px 14px;
}
tr.jalon { cursor: default; }
tr.jalon:hover { background: rgba(77, 163, 255, .07); }

.c-date { white-space: nowrap; font-family: var(--mono); font-size: .86rem; }
.c-date b { display: block; color: var(--texte); font-weight: 600; }
.c-date span { color: var(--texte-3); font-size: .78rem; }

.c-mission { min-width: 260px; }
.c-mission b { display: block; font-weight: 600; color: var(--texte); }
.c-mission span { font-size: .8rem; color: var(--texte-3); }

.c-lieu { max-width: 210px; font-size: .86rem; }
.c-lieu span { display: block; font-size: .76rem; color: var(--texte-3); }

.drapeau {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .06em;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--bord);
  color: var(--texte-2);
}

.c-nombre { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; }

/* squelette */
.sq td > div {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(30,41,66,.5) 25%, rgba(44,59,96,.75) 50%, rgba(30,41,66,.5) 75%);
  background-size: 220% 100%;
  animation: balayage 1.3s linear infinite;
}
@keyframes balayage { from { background-position: 220% 0; } to { background-position: -20% 0; } }

.tableau-pied {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-top: 1px solid var(--bord);
  background: rgba(6, 10, 21, .6);
  font-size: .84rem;
  color: var(--texte-3);
}

.vide { padding: 60px 24px; text-align: center; color: var(--texte-3); }
.vide b { display: block; font-family: var(--titre); font-size: 1.1rem; color: var(--texte); margin-bottom: 8px; }

/* ------------------------------------------------------------
   Filtres
   ------------------------------------------------------------ */
.filtres {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 18px;
}
@media (max-width: 1040px) { .filtres { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px)  { .filtres { grid-template-columns: 1fr; } }

.champ { display: grid; gap: 6px; min-width: 0; }
.champ > label {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texte-3);
}
.champ input, .champ select {
  width: 100%;
  background: rgba(8, 12, 24, .8);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-sm);
  padding: 11px 13px;
  font-size: .92rem;
  color: var(--texte);
  appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.champ select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--azur) 50%),
    linear-gradient(135deg, var(--azur) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
.champ input:focus, .champ select:focus {
  outline: none;
  border-color: var(--azur);
  box-shadow: 0 0 0 3px rgba(77, 163, 255, .15);
}
.champ input::placeholder { color: var(--texte-3); }

.segments {
  display: inline-flex;
  border: 1px solid var(--bord);
  border-radius: var(--rayon-sm);
  overflow: hidden;
  background: rgba(8, 12, 24, .8);
}
.segments button {
  font-size: .84rem;
  font-weight: 500;
  padding: 11px 15px;
  color: var(--texte-3);
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.segments button:hover { color: var(--texte); }
.segments button[aria-pressed="true"] {
  background: rgba(77, 163, 255, .16);
  color: var(--azur-vif);
  box-shadow: inset 0 -2px 0 var(--azur);
}

/* ------------------------------------------------------------
   Avis de données dégradées
   ------------------------------------------------------------
   Remplace les anciens voyants de source et compteurs de quota,
   qui exposaient la plomberie en permanence. Celui-ci ne se
   montre que lorsqu'il a quelque chose à dire.
   ------------------------------------------------------------ */
.avis {
  max-width: 74ch;
  margin: 0 auto 20px;
  padding: 10px 16px;
  text-align: center;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--attente);
  background: rgba(251, 191, 36, .07);
  border: 1px solid rgba(251, 191, 36, .24);
  border-radius: var(--rayon-sm);
}
.avis[hidden] { display: none; }
.avis--err {
  color: var(--echec);
  background: rgba(248, 113, 113, .07);
  border-color: rgba(248, 113, 113, .24);
}

/* ------------------------------------------------------------
   Modale
   ------------------------------------------------------------ */
.modale {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(3, 5, 12, .84);
  backdrop-filter: blur(6px);
}
.modale.ouverte { display: grid; }
.modale__boite {
  width: min(100%, 940px);
  max-height: 88vh;
  overflow-y: auto;
  background: linear-gradient(165deg, #101728, #080d1a);
  border: 1px solid var(--bord-vif);
  border-radius: 14px;
  box-shadow: var(--ombre);
  animation: monteDoux .22s ease-out;
}
@keyframes monteDoux { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.modale__tete {
  position: sticky; top: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 20px 22px;
  background: rgba(10, 15, 29, .96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bord);
}
.modale__tete h3 { margin-bottom: 6px; }
.modale__fermer {
  flex: none;
  width: 36px; height: 36px;
  border: 1px solid var(--bord-vif);
  border-radius: var(--rayon-sm);
  color: var(--texte-2);
}
.modale__fermer:hover { border-color: var(--echec); color: var(--echec); }
.modale__corps { padding: 22px; display: grid; gap: 20px; }

.grille-faits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.fait {
  background: rgba(8, 12, 24, .7);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-sm);
  padding: 11px 13px;
  min-width: 0;
}
.fait span {
  display: block;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texte-3);
  margin-bottom: 4px;
}
.fait b { font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; }

/* chronologie de vol */
.chrono { display: grid; gap: 2px; }
.chrono__ligne {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 7px 10px;
  border-radius: 5px;
  font-size: .88rem;
}
.chrono__ligne:nth-child(odd) { background: rgba(255, 255, 255, .022); }
.chrono__ligne b { font-family: var(--mono); color: var(--azur); font-weight: 500; font-size: .82rem; }
.chrono__ligne.t0 { background: rgba(255, 107, 53, .12); }
.chrono__ligne.t0 b { color: var(--flamme-2); }

/* ------------------------------------------------------------
   Notifications
   ------------------------------------------------------------ */
.toasts {
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 950;
  display: grid; gap: 10px;
  max-width: min(92vw, 400px);
}
.toast {
  background: rgba(14, 20, 36, .97);
  border: 1px solid var(--bord-vif);
  border-left: 3px solid var(--azur);
  border-radius: var(--rayon-sm);
  padding: 12px 15px;
  font-size: .88rem;
  box-shadow: var(--ombre);
  animation: monteDoux .2s ease-out;
}
.toast--err  { border-left-color: var(--echec); }
.toast--ok   { border-left-color: var(--succes); }

/* ------------------------------------------------------------
   Pied de page
   ------------------------------------------------------------ */
.pied {
  border-top: 1px solid var(--bord);
  background: rgba(4, 6, 14, .8);
  backdrop-filter: blur(10px);
  padding: 52px 0 28px;
  margin-top: 60px;
}
.pied__grille {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 34px;
  margin-bottom: 34px;
}
@media (max-width: 820px) { .pied__grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pied__grille { grid-template-columns: 1fr; } }
.pied h4 {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texte-3);
  margin-bottom: 14px;
}
.pied ul { display: grid; gap: 9px; }
.pied a { color: var(--texte-2); text-decoration: none; font-size: .9rem; }
.pied a:hover { color: var(--azur-vif); }
.pied__bas {
  border-top: 1px solid var(--bord);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: .82rem;
  color: var(--texte-3);
}
.pied__note { font-size: .86rem; color: var(--texte-3); max-width: 44ch; line-height: 1.7; }