/* Page publique de la webcam LFXU — aéroclub de Neuilly.
 *
 * Feuille autonome : ni police, ni script, ni image d'un autre domaine. La page
 * doit se rendre correctement même quand tout le reste est indisponible, et la
 * liste blanche du .htaccess n'autorise de toute façon que index.html,
 * style.css, logo.png et les images de l'anneau. Tout fichier ajouté ici devra
 * être ajouté à cette liste : c'est l'effet recherché.
 *
 * Le premier lecteur de cette page est un pilote, souvent sur un téléphone, en
 * plein soleil, avant un vol. D'où les contrastes appuyés et le bandeau
 * d'obsolescence dimensionné pour être vu sans être cherché.
 */

:root {
  --fond: #10131a;
  --carte: #171b24;
  --trait: #262c38;
  --texte: #e8eaef;
  --attenue: #98a1b0;
  --lien: #7aa2f7;
  --alerte-fond: #3a1616;
  --alerte-trait: #7d2f2f;
  --alerte-texte: #ffd7d7;
  /* L'avertissement d'essai n'est pas une alerte : rien ne va mal, la caméra
     n'est simplement pas encore à sa place. Le rouge est réservé à
     l'obsolescence, qui, elle, signale une panne. */
  --essai-fond: #2a2410;
  --essai-trait: #7a6520;
  --essai-texte: #f5e6b8;
}

@media (prefers-color-scheme: light) {
  :root {
    --fond: #f4f5f7;
    --carte: #ffffff;
    --trait: #dcdfe5;
    --texte: #14171d;
    --attenue: #5b6472;
    --lien: #1a4fa0;
    --alerte-fond: #fdeaea;
    --alerte-trait: #d98080;
    --alerte-texte: #6b1414;
    --essai-fond: #fdf6e0;
    --essai-trait: #c8a83c;
    --essai-texte: #5a4708;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 1.25rem 1rem 3rem;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

header, main, footer {
  max-width: 60rem;
  margin: 0 auto;
}

h1 {
  font-size: 1.35rem;
  margin: 0;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
}

.lieu {
  margin: 0.15rem 0 1rem;
  color: var(--attenue);
  font-size: 0.95rem;
}

a { color: var(--lien); }

/* --- le bandeau d'obsolescence -------------------------------------------
 * Il doit être vu sans être cherché : c'est la seule chose qui sépare un
 * visiteur d'une image vieille d'une semaine prise pour la vue du jour. D'où le
 * fond plein plutôt qu'un simple liseré, et sa place AU-DESSUS de l'image.
 */
.bandeau {
  max-width: 60rem;
  margin: 0 auto 0.9rem;
  padding: 0.75rem 1rem;
  background: var(--alerte-fond);
  border: 1px solid var(--alerte-trait);
  border-left-width: 5px;
  border-radius: 8px;
  color: var(--alerte-texte);
  font-size: 0.95rem;
}

.bandeau[hidden] { display: none; }

/* L'avertissement d'essai emprunte la forme du bandeau et pas sa couleur : même
 * taille, même place, mais l'ambre au lieu du rouge. Les deux peuvent
 * s'afficher ensemble, et il faut alors qu'on les distingue d'un coup d'oeil. */
.bandeau--essai {
  background: var(--essai-fond);
  border-color: var(--essai-trait);
  color: var(--essai-texte);
}

/* --- l'image -------------------------------------------------------------- */
.vue {
  /* Le contexte de positionnement du calque de la manche reconstituée. */
  position: relative;
  margin: 0;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: 12px;
  overflow: hidden;
}

.vue img {
  display: block;
  width: 100%;
  height: auto;
  /* L'image publiée est en 16:9. Réserver le rapport évite que le reste de la
     page saute au premier chargement, et surtout que le bandeau d'obsolescence
     se déplace sous le doigt du visiteur au moment où il le lit. */
  aspect-ratio: 16 / 9;
  background: #0b0d12;
}

/* L'image est un lien vers elle-même en pleine résolution, et le curseur le dit
 * avant le clic. Le sélecteur est un enfant DIRECT : le lien de la légende vit
 * lui aussi dans la figure, et il n'est pas une vignette à agrandir. */
.vue > a {
  display: block;
  cursor: zoom-in;
}

/* LE CALQUE DE LA MANCHE RECONSTITUÉE, posé sur la vue.
 *
 * 🚨 NI COORDONNÉE NI DÉCOUPE : le PNG fait exactement la taille de l'image
 * publiée et n'est opaque que sur le cadre de la loupe. Cette page n'a donc
 * rien à savoir de la géométrie de la loupe, et n'aura rien à apprendre le
 * jour où elle changera de place.
 *
 * ⚠️ LE FOND DOIT ÊTRE REMIS À `transparent`, ET C'EST LE PIÈGE DE CE BLOC.
 * `.vue img` pose `background: #0b0d12` pour que la photo ne clignote pas
 * blanche avant d'avoir chargé ; hérité par un calque posé PAR-DESSUS elle, ce
 * même fond la masquerait entièrement. Le sélecteur est plus spécifique que
 * `.vue img` — pas de `!important`, qui cacherait la raison. */
.vue img.calque {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background: transparent;
  /* Hors d'atteinte de la souris : le clic appartient au lien de la vue. */
  pointer-events: none;
}

.vue img.calque[hidden] { display: none; }

/* L'interrupteur de la manche, dans la légende. */
.choix {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.choix[hidden] { display: none; }

.choix-titre {
  color: var(--attenue);
  margin-right: 0.2rem;
}

/* 44 px de haut : la cible tactile minimale. La légende se lit sur un
 * téléphone, en plein soleil, avant un vol. */
.choix-bouton {
  min-height: 44px;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--trait);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.choix-bouton[aria-pressed="true"] {
  background: var(--trait);
  font-weight: 600;
}

.attente {
  padding: 3.5rem 1rem;
  text-align: center;
  color: var(--attenue);
  font-size: 0.95rem;
}

.attente[hidden] { display: none; }

figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  justify-content: space-between;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--trait);
  font-size: 0.88rem;
}

.horodatage { font-variant-numeric: tabular-nums; }
.orientation { color: var(--attenue); }
.orientation[hidden] { display: none; }
/* Le lien de pleine résolution ferme la légende à droite. Il naît masqué et
 * c'est le script qui le montre, une fois qu'une image a réellement chargé. */
.pleine[hidden] { display: none; }

/* --- avertissement d'usage ------------------------------------------------
 * Pas une formule de style : la seule chose qui empêche de prendre cette image
 * pour une observation officielle. Il reste lisible sans être criard, faute de
 * quoi il subirait le sort de tout avertissement permanent.
 */
.avertissement {
  margin: 1rem 0 0;
  padding: 0.8rem 1rem;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: 8px;
  font-size: 0.92rem;
}

/* Le lien vers la page d'aide, collé sous l'avertissement qu'il prolonge. */
.aide { margin: 0.6rem 0 0; font-size: 0.92rem; }

/* --- historique ----------------------------------------------------------- */
.historique { margin-top: 2rem; }
.historique[hidden] { display: none; }

.historique iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--trait);
  border-radius: 10px;
}

.credit { margin: 0.4rem 0 0; font-size: 0.82rem; color: var(--attenue); }

/* --- mention d'information ------------------------------------------------ */
.mention {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--trait);
  font-size: 0.88rem;
  color: var(--attenue);
}

.mention p { margin: 0 0 0.6rem; }
.mention strong { color: var(--texte); }

.secondaire { font-size: 0.82rem; color: var(--attenue); }

footer { margin-top: 2rem; }
footer p { margin: 0; }