/* =========================================================================
   FABIENTÔT — feuille de style
   Monde visuel : carte de suivi de vol de jour. Ciel bleu clair plein
   écran, un accent soleil (ambre chaud), données en lecture d'instrument
   (chiffres tabulaires, libellés courts). Voir le contrat de direction en
   tête de index.html.
   ========================================================================= */

/* ---- Polices auto-hébergées ------------------------------------------- */

@font-face {
  font-family: "Archivo";
  src: url("media/fonts/Archivo-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Mono";
  src: url("media/fonts/SpaceMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Mono";
  src: url("media/fonts/SpaceMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Mono";
  src: url("media/fonts/SpaceMono-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

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

:root {
  /* Ciel — du plus clair (base de page) au plus soutenu (haut du dégradé). */
  --sky-0: #fbfdff;
  --sky-1: #eaf5fd;
  --sky-2: #d2ecfd;
  --sky-3: #ade0fb;

  --line: rgba(20, 42, 66, 0.12);
  --line-strong: rgba(20, 42, 66, 0.22);

  /* Accent soleil. 600 = assez sombre pour porter du texte (labels,
     valeurs) ; 500/400/300 = pour les aplats décoratifs (avion, tracé,
     jauge) qui n'ont pas de contrainte de contraste texte. */
  --amber-600: #8f3e00;
  --amber-500: #f2891b;
  --amber-400: #ffb04d;
  --amber-300: #ffcf8a;
  --amber-glow: rgba(242, 137, 27, 0.35);

  --text-primary: #14283f;
  --text-secondary: rgba(20, 40, 63, 0.75);
  --text-muted: rgba(20, 40, 63, 0.72);

  --font-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --measure: 62ch;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Reset --------------------------------------------------------------*/

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

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

body {
  margin: 0;
  background: var(--sky-0);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-feature-settings: "tnum" 1;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
p {
  margin: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--amber-600);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Ciel de fond, fixe --------------------------------------------------
   Un dégradé de jour posé une fois en position fixed derrière tout le
   contenu : la page entière reste dans la même lumière, sans répéter un
   dégradé identique section par section. Un lobe chaud en haut à droite
   suggère le soleil sans jamais devenir un aplat décoratif isolé. */

.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 120% 55% at 50% -8%, var(--sky-3) 0%, transparent 60%),
    radial-gradient(ellipse 65% 45% at 88% 4%, rgba(255, 197, 120, 0.45) 0%, transparent 65%),
    linear-gradient(180deg, var(--sky-2) 0%, var(--sky-1) 42%, var(--sky-0) 100%);
}

/* ---- Structure générale ------------------------------------------------ */

main {
  position: relative;
}

.panel {
  padding: clamp(3.5rem, 10vh, 6rem) var(--gutter);
  border-top: 1px solid var(--line);
}

.panel__kicker-slot {
  /* Volontairement vide : pas d'eyebrow au-dessus des titres. */
}

.panel__title {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--amber-600);
  margin: 0 0 1.75rem;
}

.panel__inner {
  max-width: 46rem;
  margin: 0 auto;
}

.panel--split .panel__inner {
  max-width: 56rem;
}

/* ---- Hero : la carte de vol -------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.75rem, 4vh, 3rem);
  padding: clamp(3.5rem, 7vh, 6rem) 0 clamp(3rem, 8vh, 5rem);
  overflow: hidden;
}

/* Le ruban de carte occupe toute la largeur, en pleine bordure — comme
   l'écran de suivi de vol embarqué. Sa hauteur suit sa propre proportion,
   plafonnée pour laisser toujours la place au bloc de lecture. Le SVG
   garde "meet" : sur un écran très large et court, il se cale plutôt que
   de rogner ses extrémités (trajet Paris / avion / La Réunion toujours
   entiers). */
.hero__map {
  width: 100%;
  aspect-ratio: 1000 / 440;
  max-height: clamp(200px, 42vh, 440px);
}

.hero__map svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hero__content {
  padding: 0 var(--gutter);
}

.route-path {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1 10;
}

.route-path--flown {
  stroke: var(--amber-500);
  stroke-dasharray: none;
  opacity: 0.75;
  filter: drop-shadow(0 0 6px var(--amber-glow));
  transition: stroke-dashoffset 0.6s var(--ease-out);
}

.marker__dot {
  fill: var(--text-primary);
}

.marker__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  fill: var(--text-secondary);
}

.marker--destination .marker__dot {
  fill: var(--amber-500);
}

.marker--destination .marker__label {
  fill: var(--amber-600);
}

.marker--destination {
  cursor: pointer;
}

.plane {
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 3px 6px rgba(20, 40, 63, 0.3));
  cursor: pointer;
}

.plane__body {
  fill: var(--amber-500);
}

@media (prefers-reduced-motion: no-preference) {
  .plane {
    animation: plane-bob 3.4s ease-in-out infinite;
  }
}

@keyframes plane-bob {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -3px;
  }
}

.hero__content {
  max-width: 40rem;
}

.hero__title {
  font-size: clamp(2.75rem, 8vw, 4.75rem);
  font-weight: 800;
  font-stretch: 122%;
  letter-spacing: -0.01em;
  line-height: 0.95;
  color: var(--text-primary);
}

.hero__subtitle {
  margin-top: 1rem;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  color: var(--text-secondary);
  max-width: 34ch;
}

.hero__subtitle strong {
  color: var(--amber-600);
  font-weight: 700;
}

.clock {
  display: flex;
  gap: clamp(0.6rem, 2vw, 1.5rem);
  margin-top: clamp(2rem, 5vh, 2.75rem);
}

.clock__unit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 3.6rem;
}

.clock__value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(2rem, 7vw, 3.4rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  cursor: pointer;
}

.clock__label {
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.hero__flight {
  margin-top: clamp(1.75rem, 4vh, 2.25rem);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 0.6em;
}

.hero__flight span {
  color: var(--text-secondary);
}

.perspective-toggle {
  margin-top: 1.1rem;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
  cursor: pointer;
  transition: color 0.2s var(--ease-out);
}

.perspective-toggle:hover {
  color: var(--amber-600);
  text-decoration-color: var(--amber-500);
}

.hero__scrollcue {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1.25rem, 4vh, 2rem);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hero__scrollcue svg {
  width: 10px;
  height: 14px;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__scrollcue svg {
    animation: cue-drift 1.8s ease-in-out infinite;
  }
}

@keyframes cue-drift {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(4px);
    opacity: 1;
  }
}

/* ---- Fiche de suivi (statut) -------------------------------------------- */

.status-board {
  display: flex;
  flex-direction: column;
}

.status-board__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(6px);
}

.status-board__row:first-child {
  border-top: 1px solid var(--line);
}

.status-board__label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  white-space: nowrap;
}

.status-board__value {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-align: right;
  color: var(--amber-600);
}

/* Le clignotement d'allumage : un seul moment animé, à l'entrée du panneau. */
.status-board__row.is-live {
  animation: board-flicker 0.5s var(--ease-out) both;
}

@keyframes board-flicker {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  40% {
    opacity: 0.4;
  }
  55% {
    opacity: 0.08;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .status-board__row {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---- Télémetrie (distance / retard) ------------------------------------- */

.telemetry {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 34rem) {
  .telemetry {
    grid-template-columns: 1fr 1fr;
  }
}

.telemetry__item {
  border-left: 1px solid var(--line);
  padding-left: 1.25rem;
}

.telemetry__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.telemetry__value {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.telemetry__note {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* ---- Jauge : niveau de manque -------------------------------------------- */

.gauge__prompt {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: var(--measure);
}

.gauge {
  margin-top: 2.25rem;
}

/* La piste visible reste fine (6px) ; la boîte de l'input est plus haute
   pour offrir une zone tactile confortable au doigt sans épaissir le
   tracé. --fill (posé en JS sur l'input) est hérité par les pseudo-
   éléments de piste des deux moteurs. */
.gauge__track {
  position: relative;
  width: 100%;
  height: 44px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.gauge__track::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--amber-500) 0%, var(--amber-500) var(--fill, 40%), var(--sky-3) var(--fill, 40%), var(--sky-3) 100%);
}

.gauge__track::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--sky-0);
  border: 3px solid var(--amber-600);
  box-shadow: 0 2px 8px rgba(20, 40, 63, 0.3);
  cursor: pointer;
}

.gauge__track::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--amber-500) 0%, var(--amber-500) var(--fill, 40%), var(--sky-3) var(--fill, 40%), var(--sky-3) 100%);
}

.gauge__track::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sky-0);
  border: 3px solid var(--amber-600);
  box-shadow: 0 2px 8px rgba(20, 40, 63, 0.3);
  cursor: pointer;
}

.gauge__ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.gauge__ticks span {
  max-width: 4.5rem;
  text-align: center;
}

.gauge__ticks span:first-child {
  text-align: left;
}

.gauge__ticks span:last-child {
  text-align: right;
}

.gauge__result {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--amber-600);
  min-height: 1.4em;
}

.gauge__result:empty {
  color: transparent;
}

/* ---- Programme d'arrivée --------------------------------------------- */

.schedule__row {
  display: grid;
  grid-template-columns: 5.2rem 1fr;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}

.schedule__row:first-child {
  border-top: 1px solid var(--line);
}

.schedule__time {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--amber-600);
  font-variant-numeric: tabular-nums;
}

.schedule__event {
  font-size: 0.95rem;
  color: var(--text-primary);
}

/* ---- Météo comparative --------------------------------------------------- */

.weather {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 34rem) {
  .weather {
    grid-template-columns: 1fr 1fr;
  }
}

.weather__place {
  border-left: 1px solid var(--line);
  padding-left: 1.25rem;
}

.weather__place--here {
  border-left-color: var(--amber-500);
}

.weather__city {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.weather__reading {
  margin-top: 0.5rem;
  font-size: 1.05rem;
  color: var(--text-primary);
}

.weather__temp {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--amber-600);
}

/* ---- Checklist (apparaît à J-3) ------------------------------------------ */

.checklist {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--line-strong);
  display: none;
}

.checklist.is-visible {
  display: block;
}

.checklist__intro {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.9rem;
}

.checklist__item {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.4rem 0;
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.checklist__item::before {
  content: "—";
  color: var(--amber-600);
}

/* ---- Message du jour ----------------------------------------------------- */

.message {
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(242, 137, 27, 0.08), transparent);
}

.message__inner {
  max-width: 46rem;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.message__glyph {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 0.55rem;
  border-radius: 50%;
  background: var(--amber-500);
  box-shadow: 0 0 10px var(--amber-glow);
}

.message__text {
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  line-height: 1.45;
  color: var(--text-primary);
}

.message__tagline {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ---- Action : bouton dangereux -------------------------------------------- */

.action__prompt {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: var(--measure);
  margin-bottom: 1.75rem;
}

.action__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--amber-500);
  border: none;
  color: var(--text-primary);
  padding: 0.95rem 1.6rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 0 8px 24px -12px rgba(198, 91, 6, 0.55);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.action__button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -12px rgba(198, 91, 6, 0.7);
}

.action__button:active {
  transform: translateY(0);
}

.action__button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.action__led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-primary);
  flex: none;
}

.action__button.is-pending .action__led {
  animation: led-pulse 0.7s ease-in-out infinite;
}

@keyframes led-pulse {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

.action__response {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--text-secondary);
  min-height: 1px;
}

.action__response span {
  opacity: 0;
  transform: translateY(4px);
}

.action__response span.is-shown {
  animation: line-in 0.45s var(--ease-out) both;
}

@keyframes line-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.action__response span:last-child.is-shown {
  color: var(--amber-600);
}

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

.site-footer {
  padding: clamp(2.5rem, 6vh, 3.5rem) var(--gutter) clamp(3rem, 8vh, 4rem);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.site-footer__mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 122%;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}

.site-footer__fine {
  font-size: 0.78rem;
  color: var(--text-muted);
  max-width: 40ch;
}

/* ---- Toasts (easter eggs) --------------------------------------------------
   Un message éphémère, ancré près de l'élément qui l'a déclenché. */

.toast-layer {
  position: fixed;
  inset: auto 0 0 0;
  display: flex;
  justify-content: center;
  padding: 0 var(--gutter) clamp(1.25rem, 5vh, 2.5rem);
  pointer-events: none;
  z-index: 20;
}

/* La puce reste sombre à dessein : un petit repère "instrument" qui pose
   sa touche sur la page claire, plutôt qu'une carte de plus qui s'y fond. */
.toast {
  pointer-events: none;
  max-width: 26rem;
  background: var(--text-primary);
  border: none;
  color: var(--sky-1);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.4;
  padding: 0.8rem 1.1rem;
  border-radius: 4px;
  box-shadow: 0 12px 32px -10px rgba(20, 40, 63, 0.5);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.toast.is-shown {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .toast,
  .action__response span,
  .action__button,
  .route-path--flown {
    transition: none;
    animation: none;
  }
}