/* Altiplume — feuille de style du client.
   Papier et ciel. Un seul objet audacieux : l'enveloppe par avion.
   Aucun style en ligne nulle part : la CSP l'interdit, et c'est tant mieux. */

@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/pixelify-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/pixelify-sans-latin-600-normal.woff2') format('woff2');
}

:root {
  /* Petit matin sur l'aérodrome */
  --brume: #cfd8dd;        /* fond : brume bleu-gris */
  --brume-fonce: #b7c3ca;
  --papier: #f6f1e7;       /* enveloppe : papier chaud */
  --papier-ombre: #e3dccd;
  --encre: #2a2f33;        /* texte : ardoise */
  --encre-douce: #4a5359;
  --vert-de-gris: #6e8b7a; /* accents secondaires */
  --cachet: #b23a2f;       /* rouge du cachet — une seule fois */
  --cachet-encre: #8e2b22;
  --avion-bleu: #2f4f7a;   /* chevrons par avion */
  --laiton: #7d5f17;       /* liens — 5,3:1 sur papier */
  --laiton-clair: #9a7a2a;
  --ok: #2f6b4a;
  --erreur: #a4322a;
  --focus: #1a4f9f;

  --texte: var(--encre);
  --fond: var(--brume);
  --surface: var(--papier);

  --police-texte: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --police-titre: 'Pixelify Sans', 'Atkinson Hyperlegible', system-ui, sans-serif;

  --mesure: 62ch;
  --rayon: 3px;
  --gouttiere: 16px;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    /* Nuit sur l'aérodrome : lanternes et papier à la lampe */
    --brume: #1f262c;
    --brume-fonce: #171d22;
    --papier: #2e3339;
    --papier-ombre: #23282d;
    --encre: #e9ecef;
    --encre-douce: #b4bcc2;
    --vert-de-gris: #8fa898;
    --cachet: #d6584b;
    --cachet-encre: #e9796c;
    --avion-bleu: #7ea2d4;
    --laiton: #d9b35a;
    --laiton-clair: #e6c67a;
    --ok: #7cc59d;
    --erreur: #ef8a81;
    --focus: #8fb4ff;
  }
}
:root[data-theme='dark'] {
  --brume: #1f262c;
  --brume-fonce: #171d22;
  --papier: #2e3339;
  --papier-ombre: #23282d;
  --encre: #e9ecef;
  --encre-douce: #b4bcc2;
  --vert-de-gris: #8fa898;
  --cachet: #d6584b;
  --cachet-encre: #e9796c;
  --avion-bleu: #7ea2d4;
  --laiton: #d9b35a;
  --laiton-clair: #e6c67a;
  --ok: #7cc59d;
  --erreur: #ef8a81;
  --focus: #8fb4ff;
}

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

html {
  font-family: var(--police-texte);
  font-size: 100%;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fond);
  color: var(--texte);
  /* Un voile de brume : deux nappes très douces, pas un dégradé décoratif. */
  background-image:
    radial-gradient(60rem 30rem at 15% -10%, rgba(255, 255, 255, 0.35), transparent 60%),
    radial-gradient(40rem 20rem at 100% 100%, rgba(255, 255, 255, 0.18), transparent 60%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) body {
    background-image:
      radial-gradient(60rem 30rem at 15% -10%, rgba(255, 220, 160, 0.06), transparent 60%),
      radial-gradient(40rem 20rem at 100% 100%, rgba(255, 220, 160, 0.04), transparent 60%);
  }
}

a { color: var(--laiton); text-underline-offset: 0.15em; }
a:hover { color: var(--laiton-clair); }

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

.skip {
  position: absolute;
  left: var(--gouttiere);
  top: -4rem;
  padding: 0.5rem 0.8rem;
  background: var(--papier);
  color: var(--encre);
  border-radius: var(--rayon);
  z-index: 10;
}
.skip:focus { top: var(--gouttiere); }

/* ---- Structure ---- */

.page {
  width: min(100% - 2 * var(--gouttiere), 64rem);
  margin-inline: auto;
}

.entete {
  display: flex;
  flex-wrap: wrap;          /* sur un téléphone, la navigation passe en dessous plutôt que de déborder */
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  padding-block: 1.2rem;
}
.entete nav { margin-left: auto; }
.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--encre);
  text-decoration: none;
}
.marque .plume { width: 1.75rem; height: 1.75rem; }
.plume .px-k { fill: var(--encre); }
.plume .px-l { fill: var(--laiton); }
.plume .px-r { fill: var(--cachet); }

.entete nav { display: flex; gap: 0.25rem; }
.entete nav a,
.entete nav button {
  font: inherit;
  color: var(--encre-douce);
  background: none;
  border: 0;
  padding: 0.5rem 0.7rem;
  min-height: 44px;
  border-radius: var(--rayon);
  text-decoration: none;
  cursor: pointer;
}
@media (hover: hover) {
  .entete nav a:hover, .entete nav button:hover { color: var(--encre); background: rgba(0, 0, 0, 0.05); }
}
.entete nav a, .entete nav button { white-space: nowrap; }
@media (max-width: 30rem) {
  .marque { font-size: 1.25rem; gap: 0.45rem; }
  .entete nav a, .entete nav button { padding-inline: 0.5rem; }
}
.entete nav button svg { fill: currentColor; }
/* L'étiquette de version, en haut à droite : le stade du projet et ce qui tourne.
   Petite, en chiffres alignés, jamais au-dessus du texte — elle informe, elle ne
   réclame pas l'attention. Le survol donne le commit exact. */
.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.1rem 0.45rem;
  border: 1px dashed var(--brume-fonce);
  border-radius: var(--rayon);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--encre-douce);
  text-decoration: none;
  white-space: nowrap;
}
.etiquette-stade {
  font-family: var(--police-titre);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cachet);
}
.etiquette-version { font-variant-numeric: tabular-nums; }
@media (hover: hover) {
  .etiquette:hover { border-style: solid; color: var(--encre); }
}
@media print { .etiquette { display: none; } }

/* La fiche de version : deux colonnes serrées, les valeurs en chiffres alignés. */
.fiche-version {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 1rem;
  margin: 1.2rem 0;
  padding: 0.8rem 1rem;
  background: var(--surface);
  border: 1px solid var(--papier-ombre);
  border-radius: var(--rayon);
}
.fiche-version dt { color: var(--encre-douce); }
.fiche-version dd { margin: 0; font-variant-numeric: tabular-nums; }


/* Jour/nuit : on montre l'icône de ce qu'on obtiendra en cliquant. */
.icone-soleil { display: block; }
.icone-lune { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .icone-lune { display: block; }
  :root:not([data-theme='light']) .icone-soleil { display: none; }
}
:root[data-theme='dark'] .icone-lune { display: block; }
:root[data-theme='dark'] .icone-soleil { display: none; }
:root[data-theme='light'] .icone-lune { display: none; }
:root[data-theme='light'] .icone-soleil { display: block; }

main { padding-block: 1rem 3rem; }

.pied {
  padding-block: 2rem;
  color: var(--encre-douce);
  font-size: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}
.pied a { color: inherit; }

/* ---- Accueil ---- */

.accueil {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 52rem) {
  .accueil { grid-template-columns: 1.1fr 1fr; gap: 3.5rem; }
}

h1 {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
  margin: 0.6em 0 0.4em;
  max-width: 16ch;
}
.pitch {
  font-size: 1.125rem;
  max-width: 42ch;
  margin: 0 0 1.2rem;
}
.pitch + .pitch { color: var(--encre-douce); }

.promesse {
  margin-top: 2rem;
  padding-left: 1rem;
  border-left: 3px solid var(--vert-de-gris);
  color: var(--encre-douce);
  max-width: 42ch;
}
.promesse strong { color: var(--encre); font-weight: 700; }
.monde { font-family: var(--police-titre); font-size: 1.1rem; color: var(--vert-de-gris); margin-top: 1.4rem; }

/* ---- L'enveloppe par avion ---- */

.enveloppe {
  position: relative;
  background: var(--papier);
  color: var(--encre);
  padding: 1.6rem 1.4rem 1.5rem;
  border-radius: var(--rayon);
  box-shadow: 0 1px 0 var(--papier-ombre), 0 10px 24px -14px rgba(20, 30, 40, 0.5);
  /* La bordure à chevrons : la signature du courrier aérien de l'époque. */
  border: 10px solid transparent;
  border-image: repeating-linear-gradient(
    -45deg,
    var(--cachet) 0 14px,
    var(--papier) 14px 28px,
    var(--avion-bleu) 28px 42px,
    var(--papier) 42px 56px
  ) 10;
}
@media (min-width: 40rem) { .enveloppe { padding: 2rem 2rem 1.8rem; } }

.enveloppe h2 {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.5rem;
  margin: 0 0 0.3rem;
}
.enveloppe .sous-titre { margin: 0 0 1.4rem; color: var(--encre-douce); }

.champ { display: grid; gap: 0.35rem; margin-bottom: 1.1rem; }
.champ label { font-weight: 700; }
.champ .aide { color: var(--encre-douce); font-size: 0.92rem; margin: 0; }
.champ .erreur-champ { color: var(--erreur); font-size: 0.95rem; margin: 0; }
/* Le champ-piège du formulaire de contact : hors de l'écran, hors du parcours
   clavier, hors de l'arbre d'accessibilité. Seuls les robots le remplissent. */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

input[type='email'],
input[type='text'],
textarea,
select {
  font: inherit;
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.7rem;
  color: var(--encre);
  background: color-mix(in srgb, var(--papier) 70%, white);
  border: 1.5px solid var(--brume-fonce);
  border-radius: var(--rayon);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) input[type='email'],
  :root:not([data-theme='light']) input[type='text'],
  :root:not([data-theme='light']) textarea,
  :root:not([data-theme='light']) select { background: var(--papier-ombre); }
}
:root[data-theme='dark'] input[type='email'],
:root[data-theme='dark'] input[type='text'],
:root[data-theme='dark'] textarea,
:root[data-theme='dark'] select { background: var(--papier-ombre); }
textarea { resize: vertical; min-height: 9rem; line-height: 1.5; }
input[aria-invalid='true'] { border-color: var(--erreur); }

.case {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  margin-bottom: 0.9rem;
}
.case input { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; accent-color: var(--avion-bleu); }

.bouton {
  font: inherit;
  font-weight: 700;
  min-height: 48px;
  padding: 0.7rem 1.3rem;
  border-radius: var(--rayon);
  border: 2px solid var(--encre);
  background: var(--encre);
  color: var(--papier);
  cursor: pointer;
  width: 100%;
  margin-top: 0.4rem;
}
.bouton:hover { background: var(--encre-douce); border-color: var(--encre-douce); }
.bouton[disabled] { opacity: 0.6; cursor: wait; }
.bouton.secondaire { background: transparent; color: var(--encre); }
.bouton.secondaire:hover { background: rgba(0, 0, 0, 0.05); }
.bouton.danger { border-color: var(--cachet); background: transparent; color: var(--cachet-encre); }
.bouton.danger:hover { background: var(--cachet); color: var(--papier); }

.message {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--rayon);
  border-left: 4px solid var(--erreur);
  background: color-mix(in srgb, var(--erreur) 10%, transparent);
}
.message.ok { border-left-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.message:empty { display: none; }

.enveloppe .bas { margin: 1.2rem 0 0; color: var(--encre-douce); font-size: 0.95rem; }

/* ---- Le cachet de la poste ---- */

.cachet {
  --taille: 9.5rem;
  position: absolute;
  right: -0.4rem;
  top: -1.2rem;
  width: var(--taille);
  height: var(--taille);
  border-radius: 50%;
  border: 3px solid var(--cachet);
  color: var(--cachet);
  display: grid;
  place-content: center;
  text-align: center;
  font-family: var(--police-titre);
  font-weight: 600;
  line-height: 1.1;
  transform: rotate(-12deg);
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.9;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .cachet { mix-blend-mode: screen; } }
:root[data-theme='dark'] .cachet { mix-blend-mode: screen; }
.cachet::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1.5px solid var(--cachet);
}
.cachet .cachet-nom { font-size: 1rem; letter-spacing: 0.04em; }
.cachet .cachet-date { font-family: var(--police-texte); font-weight: 700; font-size: 0.8rem; margin-top: 0.15rem; }
.cachet .cachet-mention { font-size: 0.7rem; margin-top: 0.2rem; }

@media (prefers-reduced-motion: no-preference) {
  .cachet.tampon { animation: tamponner 420ms cubic-bezier(0.2, 1.4, 0.4, 1) both; }
  @keyframes tamponner {
    from { transform: rotate(-12deg) scale(1.6); opacity: 0; }
    to   { transform: rotate(-12deg) scale(1); opacity: 0.9; }
  }
}

/* ---- Pages de lecture (compte, mentions) ---- */

.lecture { max-width: var(--mesure); }
.entete-page { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem 1rem; margin: 1.2rem 0 0.8rem; }
.entete-page h1 { margin: 0; }
.saison { margin: 0.15rem 0 0; font-size: 0.9rem; color: var(--encre-douce); max-width: 38rem; }
.entete-page .bouton { width: auto; }
.lecture h1 { max-width: none; font-size: clamp(1.8rem, 4vw, 2.4rem); }
.lecture h2 { font-family: var(--police-titre); font-weight: 600; font-size: 1.4rem; margin-top: 2rem; }
.lecture p, .lecture li { max-width: var(--mesure); }
/* L'aide du jeu : un sommaire compact, des questions qui se lisent d'un coup d'œil. */
.aide-jeu .sommaire { background: var(--papier); border-radius: var(--rayon); padding: 0.8rem 1.2rem; margin: 1.2rem 0; }
.aide-jeu .sommaire ol { margin: 0; padding-left: 1.8rem; columns: 2 14rem; column-gap: 2rem; }
.aide-jeu .sommaire li { margin: 0.15rem 0; break-inside: avoid; }
.aide-jeu h2 { scroll-margin-top: 1rem; }
.aide-jeu .faq dt { font-weight: 700; margin-top: 1rem; }
.aide-jeu .faq dd { margin: 0.2rem 0 0; max-width: var(--mesure); }
.lecture .relecture {
  border-left: 3px solid var(--laiton);
  padding-left: 1rem;
  color: var(--encre-douce);
}

/* ---- Compte ---- */

.fiche { display: grid; gap: 0.3rem 1rem; grid-template-columns: max-content 1fr; margin: 1rem 0 1.5rem; }
.fiche dt { color: var(--encre-douce); }
.fiche dd { margin: 0; }
.bloc { background: var(--papier); padding: 1.3rem; border-radius: var(--rayon); margin-bottom: 1.2rem; }
.bloc h2 { margin-top: 0; }
.bloc form { max-width: 28rem; }
.bloc .bouton { width: auto; }
.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ---- Passkeys et QR ---- */

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

.autres { margin-top: 1.4rem; }
.autres .actions { justify-content: center; }
.autres .bouton { width: auto; }
.separateur {
  display: flex; align-items: center; gap: 0.8rem; margin: 0 0 1rem;
  color: var(--encre-douce); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em;
}
.separateur::before, .separateur::after { content: ''; flex: 1; border-top: 1px dashed var(--papier-ombre); }

.qr { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; margin-top: 1.2rem; }
.qr canvas {
  flex: 0 0 auto; width: 196px; height: 196px; image-rendering: pixelated;
  border: 6px solid var(--papier); outline: 1px solid var(--papier-ombre); background: #f6f1e7;
}
.qr-texte { flex: 1 1 14rem; }
.qr-texte p { margin: 0 0 0.6rem; }

/* Le code se compare d'un écran à l'autre : police lisible, pas la police pixel. */
.code-appareil {
  font-family: var(--police-texte); font-weight: 700; font-size: 2.1rem; letter-spacing: 0.16em;
  margin: 0.4rem 0 0.8rem; color: var(--encre); font-variant-numeric: tabular-nums;
}
.enveloppe .code-appareil { text-align: center; }

.liste-cles { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.8rem; }
.liste-cles li { border: 1px dashed var(--papier-ombre); border-radius: var(--rayon); padding: 0.8rem; }
.liste-cles .cle { max-width: none; display: grid; gap: 0.5rem; }
.liste-cles .cle input { max-width: 22rem; }
.liste-cles .aide { margin: 0; color: var(--encre-douce); font-size: 0.92rem; }
.bloc .aide { color: var(--encre-douce); font-size: 0.92rem; }

.cache { display: none !important; }

@media print { .entete nav, .pied, .bouton { display: none; } }

/* ---- L'aérodrome ---- */

.jeu .fondation .enveloppe { margin-top: 1.4rem; }
.choix-noms { display: grid; gap: 0.5rem; margin-bottom: 1rem; }
.choix-nom {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.7rem;
  padding: 0.7rem 0.9rem; min-height: 44px; border: 1.5px dashed var(--brume-fonce); border-radius: var(--rayon);
  font-family: var(--police-titre); font-size: 1.15rem; cursor: pointer;
}
.choix-nom:has(input:checked) { border-style: solid; border-color: var(--encre); background: color-mix(in srgb, var(--laiton) 12%, transparent); }
.choix-nom input { width: 1.25rem; height: 1.25rem; accent-color: var(--avion-bleu); }
.jeu .actions { margin-bottom: 1.1rem; }

/* La scène : 320 × 144 pixels, dessinée par scripts/scene-build.mjs. Les couleurs
   vivent ici pour suivre l'heure (data-moment) et le mode nuit. */
.scene { border-radius: var(--rayon); overflow: hidden; aspect-ratio: 320 / 144; max-height: 16rem; margin: 0.4rem 0 1rem; background: var(--brume-fonce); }
.scene svg { display: block; width: 100%; height: 100%; }
.scene .ciel-haut { fill: #a9c8de; }
.scene .ciel-milieu { fill: #bdd5e5; }
.scene .ciel-bas { fill: #d3e2ea; }
.scene .etoile { fill: #e9ecef; opacity: 0; }
.scene .astre-disque { fill: #f3dc8a; }
.scene .astre-halo { fill: #f3dc8a; opacity: 0.45; }
.scene .nuage { fill: #f6f7f8; }
.scene .nuage-ombre { fill: #d9e2e8; }
.scene .colline-loin { fill: #9fb6a5; }
.scene .arbre-loin { fill: #86a08f; }
.scene .colline { fill: #7f9a6c; }
.scene .buisson { fill: #5f8252; }
.scene .buisson-clair { fill: #7aa166; }
.scene .feuillage { fill: #4f7a45; }
.scene .feuillage-clair { fill: #6f9a5a; }
.scene .feuillage-sombre { fill: #3f6a3f; }
.scene .tronc { fill: #6b4a2a; }
.scene .sol { fill: #6b8a5a; }
.scene .herbe { fill: #7fa06a; }
.scene .piste-sol { fill: #9fb27c; }
.scene .piste-bord { fill: #8aa06a; }
.scene .piste[data-niveau='2'] .piste-sol, .scene .piste[data-niveau='3'] .piste-sol { fill: #b9b39a; }
.scene .piste[data-niveau='2'] .piste-bord, .scene .piste[data-niveau='3'] .piste-bord { fill: #a09a84; }
.scene .piste-longue .piste-sol { fill: #b9b39a; }
.scene .piste-longue .piste-bord { fill: #a09a84; }
.scene .pierre { fill: #f6f1e7; }
.scene .chemin { fill: #b8a98a; }
.scene .chemin-ombre { fill: #a3957a; }
.scene .croix { fill: #8c8c86; }
.scene .croix-ombre { fill: #6e6e68; }
.scene .socle { fill: #7d7d77; }
.scene .hangar .toit { fill: #3f4b45; }
.scene .hangar .toit-clair { fill: #55655d; }
.scene .hangar .mur { fill: #5a6a62; }
.scene .hangar .mur-clair { fill: #66776e; }
.scene .hangar .porte { fill: #3a463f; }
.scene .hangar .porte-clair { fill: #46544d; }
.scene .hangar .bardage { fill: #3a463f; }
.scene .hangar .vitre { fill: #a9c8de; }
.scene .hangar .cheminee { fill: #3a3a38; }
.scene .hangar .seuil { fill: #4f5a54; }
.scene .hangar[data-niveau='2'] .porte-clair { fill: #6a7a70; }
.scene .hangar[data-niveau='3'] .porte-clair { fill: #8a9a8e; }
.scene .hangar.peint .mur { fill: #6e8b7a; }
.scene .hangar.peint .mur-clair { fill: #7f9c8a; }
.scene .hangar.peint .toit { fill: #4f6a5a; }
.scene .hangar.peint .toit-clair { fill: #5f7a6a; }
.scene .hangar.peint .porte-clair, .scene .hangar.peint .bardage { fill: #b23a2f; }
.scene .hangar.peint .porte { fill: #8c2d24; }
.scene .enseigne .planche { fill: #f6f1e7; }
.scene .enseigne .planche-bord { fill: #d9d2c4; }
.scene .enseigne text { fill: #2a2f33; font-family: var(--police-titre); font-weight: 600; }
.scene .mat { fill: #3f4b45; }
.scene .toile { fill: #b23a2f; }
.scene .toile-raie { fill: #f6f1e7; }
.scene .avion .aile { fill: #c9b27a; }
.scene .avion .hauban { fill: #2a2f33; }
.scene .avion .fuselage { fill: #2a2f33; }
.scene .avion .empennage { fill: #b23a2f; }
.scene .avion .helice { fill: #b23a2f; }
.scene .avion .roue { fill: #1b1f22; }
.scene .hydravion .aile { fill: #c9b27a; }
.scene .hydravion .hauban { fill: #2a2f33; }
.scene .hydravion .fuselage { fill: #2a2f33; }
.scene .hydravion .empennage { fill: #4fb3b0; }
.scene .hydravion .helice { fill: #b23a2f; }
.scene .hydravion .flotteur { fill: #4fb3b0; }
.scene .eau { fill: #6f93a8; }
.scene .eau-bord { fill: #86a7b8; }
.scene .reflet { fill: #a9c4d2; }
.scene .ponton .planches { fill: #8a6a3a; }
.scene .ponton .planches-clair { fill: #a07f48; }
.scene .ponton .pilotis { fill: #5a4426; }
.scene .ponton .bollard { fill: #3f4b45; }
/* Les décorations */
.scene .fleurs .fleur { fill: #d6584b; }
.scene .fleurs .fleur2 { fill: #f3dc8a; }
.scene .fleurs .feuilles { fill: #4f7a45; }
.scene .fleurs .bac { fill: #8a6a3a; }
.scene .banc .bois { fill: #8a6a3a; }
.scene .banc .pied { fill: #3f4b45; }
.scene .boite .boite-corps { fill: #b23a2f; }
.scene .boite .fente { fill: #5a1d17; }
.scene .boite .pied { fill: #3f4b45; }
.scene .lanterne .cage { fill: #8a6a3a; }
.scene .lanterne .flamme { fill: #f3dc8a; }
.scene .lanterne .halo { fill: #f3dc8a; opacity: 0; }
.scene .pommier .pomme { fill: #d6584b; }
.scene .drapeau .vert { fill: #6e8b7a; }
.scene .drapeau .bleu { fill: #2f4f7a; }
.scene .drapeau .plume { fill: #f6f1e7; }
.scene .cafe .parasol { fill: #b23a2f; }
.scene .cafe .parasol-clair { fill: #f6f1e7; }
.scene .cafe .table { fill: #8a6a3a; }
.scene .cafe .pied, .scene .cafe .chaise { fill: #3f4b45; }

/* Les nuages dérivent, lentement. */
@keyframes derive { from { transform: translateX(-30px); } to { transform: translateX(30px); } }
.scene .nuage-lent { animation: derive 240s linear infinite alternate; }
.scene .nuage-lent-2 { animation-duration: 320s; animation-direction: alternate-reverse; }
@media (prefers-reduced-motion: reduce) { .scene .nuage-lent { animation: none; } }

/* L'aube */
/* L'aérodrome qui grandit. Le hangar et la tour montrent ce qui va avec leur niveau
   (data-niveau) ; chaque place de parking montre le dessin du modèle qui y dort
   (data-modele), et rien quand l'avion est en vol. */
.scene .niveau-1-seul, .scene .niveau-2-plus, .scene .niveau-2-seul, .scene .niveau-3-seul { display: none; }
.scene [data-niveau='1'] .niveau-1-seul, .scene [data-niveau='2'] .niveau-2-seul, .scene [data-niveau='3'] .niveau-3-seul,
.scene [data-niveau='2'] .niveau-2-plus, .scene [data-niveau='3'] .niveau-2-plus { display: inline; }
.scene .hangar .rouille { fill: #8a5a3a; }
.scene .hangar .porte-ombre { fill: #1b1f22; }
.scene .hangar .fumee-a { fill: #c9c9c4; opacity: 0.8; } .scene .hangar .fumee-b { fill: #dededa; opacity: 0.6; }
@keyframes fumer { from { transform: translateY(0); opacity: 0.9; } to { transform: translate(3px, -6px); opacity: 0.2; } }
.scene .hangar .fumee { animation: fumer 4s ease-out infinite; }
.scene .tour-bois { fill: #6b4a2a; } .scene .tour-echelle { fill: #8a6a3a; } .scene .tour-croix { fill: #5a3d22; }
.scene .tour-toit { fill: #8c4a3a; } .scene .tour-mur { fill: #a07f48; } .scene .tour-mur-clair { fill: #b8955a; }
.scene .tour-vitre { fill: #a9c8de; } .scene .tour-porte { fill: #4a3424; } .scene .tour-socle { fill: #7d7d77; }
.scene .tour-lanterne { fill: #3a3a38; } .scene .feu { fill: #7a7a72; } .scene .tour-drapeau { fill: #b23a2f; }
@keyframes balayer { 0%, 45% { fill: #f3dc8a; } 50%, 95% { fill: #3a3a38; } 100% { fill: #f3dc8a; } }
[data-moment='nuit'] .scene .feu, [data-moment='crepuscule'] .scene .feu { animation: balayer 2.4s steps(1) infinite; }
[data-moment='nuit'] .scene .tour-vitre { fill: #f3dc8a; }
.scene .pigeonnier-mur { fill: #f1ece0; } .scene .pigeonnier-trou { fill: #2a2f33; } .scene .pigeon { fill: #9aa3a8; }
.scene .paille { fill: #c9a24a; } .scene .paille-clair { fill: #e0bf6a; } .scene .ruche-entree { fill: #3a2a1a; } .scene .abeille { fill: #f3d24a; }
.scene .place .modele { display: none; }
.scene .place[data-modele='grive'] .modele-grive, .scene .place[data-modele='martinet'] .modele-martinet,
.scene .place[data-modele='heron'] .modele-heron, .scene .place[data-modele='pic'] .modele-pic,
.scene .place[data-modele='sterne'] .modele-sterne, .scene .place[data-modele='goeland'] .modele-goeland { display: inline; }
.scene .avion .verriere { fill: #a9c8de; } .scene .avion .moteur { fill: #3a3a38; } .scene .avion .tole { fill: #c3c8cc; }
.scene .avion .flotteur { fill: #4fb3b0; } .scene .avion .coque { fill: #e9ecef; }
.scene .modele-martinet .fuselage { fill: #7d2f22; } .scene .modele-martinet .empennage, .scene .modele-martinet .helice { fill: #2a2f33; }
.scene .modele-heron .fuselage { fill: #9aa0a4; } .scene .modele-heron .aile { fill: #b6bcc0; } .scene .modele-heron .empennage { fill: #2f4f7a; } .scene .modele-heron .helice { fill: #2a2f33; }
.scene .modele-pic .fuselage { fill: #2f4f7a; } .scene .modele-pic .aile { fill: #e6c67a; } .scene .modele-pic .empennage { fill: #b23a2f; }
.scene .modele-sterne .empennage { fill: #4fb3b0; }
.scene .modele-goeland .fuselage { fill: #2a2f33; } .scene .modele-goeland .empennage { fill: #4fb3b0; } .scene .modele-goeland .helice { fill: #2a2f33; }
@media (prefers-reduced-motion: reduce) { .scene .hangar .fumee, [data-moment='nuit'] .scene .feu, [data-moment='crepuscule'] .scene .feu { animation: none; } }

/* Les saisons (data-saison, celle du calendrier). Les éléments saisonniers ne se
   montrent qu'en leur temps ; les couleurs de la terre et des arbres changent, le
   ciel reste celui de l'heure. Les règles de nuit, plus bas, gardent le dernier mot. */
.scene .saisonnier { display: none; }
[data-saison='printemps'] .scene .printemps-seul, [data-saison='ete'] .scene .ete-seul,
[data-saison='automne'] .scene .automne-seul, [data-saison='hiver'] .scene .hiver-seul { display: inline; }
.scene .neige { fill: #f2f5f7; } .scene .neige-ombre { fill: #d6dee4; } .scene .flocon { fill: #ffffff; }
.scene .feuille-a { fill: #c2652c; } .scene .feuille-b { fill: #e09a52; }
.scene .petale { fill: #f2c4d0; } .scene .petale-clair { fill: #fbe6ec; } .scene .bouton-or { fill: #f3d24a; }
@keyframes tomber { from { transform: translateY(-12px); } to { transform: translateY(18px); } }
@keyframes tomber-loin { from { transform: translate(-4px, -20px); } to { transform: translate(6px, 30px); } }
@keyframes feuille { 0% { transform: translate(0, -6px); } 50% { transform: translate(5px, 4px); } 100% { transform: translate(-2px, 14px); } }
.scene .flocons-1 { animation: tomber 9s linear infinite; }
.scene .flocons-2 { animation: tomber-loin 14s linear infinite; }
.scene .feuilles-tombantes { animation: feuille 11s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .scene .flocons-1, .scene .flocons-2, .scene .feuilles-tombantes { animation: none; } }
/* Printemps : un vert neuf, presque acide. */
[data-saison='printemps'] .scene .feuillage { fill: #5f8f4a; } [data-saison='printemps'] .scene .feuillage-clair { fill: #8fbf6a; }
[data-saison='printemps'] .scene .colline { fill: #86a670; } [data-saison='printemps'] .scene .herbe { fill: #8fb874; }
/* Été : des verts profonds, un pré qui blondit. */
[data-saison='ete'] .scene .feuillage { fill: #3f6a35; } [data-saison='ete'] .scene .feuillage-clair { fill: #5a8a45; }
[data-saison='ete'] .scene .colline { fill: #8a9a5a; } [data-saison='ete'] .scene .colline-loin { fill: #a8b08f; }
[data-saison='ete'] .scene .sol { fill: #7d8f55; } [data-saison='ete'] .scene .herbe { fill: #a5a862; }
/* Seul le pré fauché blondit ; une piste roulée reste une piste roulée. */
[data-saison='ete'] .scene .piste[data-niveau='1'] .piste-sol { fill: #b3b67e; }
/* Automne : les feuillus roussissent ; les sapins restent sapins. */
[data-saison='automne'] .scene .feuillage { fill: #b8733a; } [data-saison='automne'] .scene .feuillage-clair { fill: #e09a52; }
[data-saison='automne'] .scene .buisson { fill: #8f6a3a; } [data-saison='automne'] .scene .buisson-clair { fill: #b88a4a; }
[data-saison='automne'] .scene .arbre-loin { fill: #9a8a6a; } [data-saison='automne'] .scene .colline-loin { fill: #a8a08a; }
[data-saison='automne'] .scene .colline { fill: #7f8a58; } [data-saison='automne'] .scene .sol { fill: #6f7e4f; } [data-saison='automne'] .scene .herbe { fill: #9a8a50; }
/* Hiver : la neige au sol, le givre sur les branches nues. */
[data-saison='hiver'] .scene .feuillage { fill: #8e9590; } [data-saison='hiver'] .scene .feuillage-clair { fill: #c3cbcf; }
[data-saison='hiver'] .scene .feuillage-sombre { fill: #3f5a4a; }
[data-saison='hiver'] .scene .buisson { fill: #b8c2c8; } [data-saison='hiver'] .scene .buisson-clair { fill: #dde4e8; }
[data-saison='hiver'] .scene .colline-loin { fill: #c9d3db; } [data-saison='hiver'] .scene .arbre-loin { fill: #8a98a3; }
[data-saison='hiver'] .scene .colline { fill: #dfe5ea; } [data-saison='hiver'] .scene .sol { fill: #e8ecef; } [data-saison='hiver'] .scene .herbe { fill: #cfd8de; }
/* L'hiver, toute la piste est sous la neige, roulée ou non ; les pierres blanches restent le seul repère. */
[data-saison='hiver'] .scene .piste .piste-sol { fill: #dde3e6; } [data-saison='hiver'] .scene .piste .piste-bord { fill: #c3ccd1; } [data-saison='hiver'] .scene .pierre { fill: #9aa3a8; }
[data-saison='hiver'] .scene .chemin { fill: #cdc8be; } [data-saison='hiver'] .scene .chemin-ombre { fill: #b3ada3; }
[data-saison='hiver'] .scene .eau { fill: #8aa3b3; } [data-saison='hiver'] .scene .reflet { fill: #cfdde6; }

[data-moment='aube'] .scene .ciel-haut { fill: #c9b7c4; }
[data-moment='aube'] .scene .ciel-milieu { fill: #e8c9b4; }
[data-moment='aube'] .scene .ciel-bas { fill: #f3dcc4; }
[data-moment='aube'] .scene .astre-disque { fill: #f2a86a; }
[data-moment='aube'] .scene .astre-halo { fill: #f2a86a; }
[data-moment='aube'] .scene .nuage { fill: #f8e6da; }
[data-moment='aube'] .scene .nuage-ombre { fill: #dcc3b8; }
[data-moment='aube'] .scene .colline-loin { fill: #b9b0a8; }
[data-moment='aube'] .scene .arbre-loin { fill: #a39a92; }
/* Le crépuscule */
[data-moment='crepuscule'] .scene .ciel-haut { fill: #6f6a8a; }
[data-moment='crepuscule'] .scene .ciel-milieu { fill: #c98a7a; }
[data-moment='crepuscule'] .scene .ciel-bas { fill: #e8b08a; }
[data-moment='crepuscule'] .scene .astre-disque { fill: #f0b36a; }
[data-moment='crepuscule'] .scene .astre-halo { fill: #f0b36a; }
[data-moment='crepuscule'] .scene .nuage { fill: #e6c2b0; }
[data-moment='crepuscule'] .scene .nuage-ombre { fill: #b08a84; }
[data-moment='crepuscule'] .scene .colline-loin { fill: #8a8a93; }
[data-moment='crepuscule'] .scene .arbre-loin { fill: #6f7280; }
[data-moment='crepuscule'] .scene .colline { fill: #5f7556; }
[data-moment='crepuscule'] .scene .hangar .vitre { fill: #f3dc8a; }
/* La nuit */
[data-moment='nuit'] .scene .ciel-haut { fill: #121a26; }
[data-moment='nuit'] .scene .ciel-milieu { fill: #1b2634; }
[data-moment='nuit'] .scene .ciel-bas { fill: #263241; }
[data-moment='nuit'] .scene .etoile { opacity: 1; }
[data-moment='nuit'] .scene .astre-disque { fill: #e9ecef; }
[data-moment='nuit'] .scene .astre-halo { fill: #e9ecef; opacity: 0.25; }
[data-moment='nuit'] .scene .nuage { fill: #3a4452; }
[data-moment='nuit'] .scene .nuage-ombre { fill: #2b333e; }
[data-moment='nuit'] .scene .colline-loin { fill: #2f3b47; }
[data-moment='nuit'] .scene .arbre-loin { fill: #27313b; }
[data-moment='nuit'] .scene .colline { fill: #2a3a30; }
[data-moment='nuit'] .scene .buisson, [data-moment='nuit'] .scene .feuillage, [data-moment='nuit'] .scene .feuillage-sombre { fill: #1f2d23; }
[data-moment='nuit'] .scene .buisson-clair, [data-moment='nuit'] .scene .feuillage-clair { fill: #2a3a2c; }
[data-moment='nuit'] .scene .sol { fill: #26342a; }
[data-moment='nuit'][data-saison='hiver'] .scene .sol, [data-moment='nuit'][data-saison='hiver'] .scene .colline { fill: #3a4656; } [data-moment='nuit'][data-saison='hiver'] .scene .herbe, [data-moment='nuit'][data-saison='hiver'] .scene .piste-sol { fill: #47546a; } [data-moment='nuit'][data-saison='hiver'] .scene .piste .piste-sol { fill: #47546a; } [data-moment='nuit'][data-saison='hiver'] .scene .piste .piste-bord { fill: #3d4a5e; } [data-moment='nuit'][data-saison='hiver'] .scene .neige { fill: #8a9ab0; } [data-moment='nuit'][data-saison='hiver'] .scene .neige-ombre { fill: #6f7f96; }
[data-moment='nuit'] .scene .herbe { fill: #2f3f31; }
[data-moment='nuit'] .scene .piste-sol { fill: #3a4a3a; }
[data-moment='nuit'] .scene .piste-bord { fill: #30402f; }
[data-moment='nuit'] .scene .piste[data-niveau='2'] .piste-sol, [data-moment='nuit'] .scene .piste[data-niveau='3'] .piste-sol, [data-moment='nuit'] .scene .piste-longue .piste-sol { fill: #4a4a44; }
[data-moment='nuit'] .scene .pierre { fill: #c9c4b8; }
[data-moment='nuit'] .scene .chemin { fill: #4a4538; }
[data-moment='nuit'] .scene .chemin-ombre { fill: #3a3629; }
[data-moment='nuit'] .scene .hangar .mur { fill: #2c3530; }
[data-moment='nuit'] .scene .hangar .mur-clair { fill: #343e38; }
[data-moment='nuit'] .scene .hangar .toit { fill: #1f2622; }
[data-moment='nuit'] .scene .hangar .toit-clair { fill: #2a322d; }
[data-moment='nuit'] .scene .hangar .porte, [data-moment='nuit'] .scene .hangar .bardage { fill: #1c2420; }
[data-moment='nuit'] .scene .hangar .porte-clair { fill: #26302a; }
[data-moment='nuit'] .scene .hangar .vitre { fill: #f3dc8a; }
[data-moment='nuit'] .scene .enseigne .planche { fill: #d9d2c4; }
[data-moment='nuit'] .scene .eau { fill: #1f2d3a; }
[data-moment='nuit'] .scene .eau-bord { fill: #2a3a48; }
[data-moment='nuit'] .scene .reflet { fill: #3f5566; }
[data-moment='nuit'] .scene .lanterne .halo { opacity: 0.35; }
[data-moment='nuit'] .scene .cafe .parasol-clair { fill: #c9c4b8; }
[data-moment='nuit'] .scene .drapeau .plume { fill: #c9c4b8; }

.nom-compagnie { font-size: clamp(1.6rem, 4.5vw, 2.4rem); max-width: none; }
.adresse { margin: 0.2rem 0 0; color: var(--encre-douce); }
.caisse { display: flex; gap: 1.2rem; margin: 0; }
.caisse div { display: grid; text-align: right; }
.caisse dt { font-size: 0.85rem; color: var(--encre-douce); }
.caisse dd { margin: 0; font-family: var(--police-titre); font-size: 1.5rem; font-variant-numeric: tabular-nums; }

.fiches { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.9rem; }
.fiches li { border: 1px dashed var(--papier-ombre); border-radius: var(--rayon); padding: 0.9rem; }
.fiches h3 { font-family: var(--police-titre); font-weight: 600; font-size: 1.2rem; margin: 0 0 0.3rem; }
.fiches p { margin: 0 0 0.5rem; }
.fiches .actions { margin: 0.4rem 0 0; }
.traits { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.trait { display: inline-block; padding: 0.15rem 0.55rem; border: 1px solid var(--laiton); border-radius: 999px; color: var(--laiton); font-size: 0.9rem; }
.portrait { font-style: italic; color: var(--encre-douce); }

.album { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.6rem; }
.album .page {
  display: grid; gap: 0.25rem; padding: 0.7rem; min-height: 5rem; border: 1.5px dashed var(--brume-fonce); border-radius: var(--rayon);
  color: var(--encre-douce); font-size: 0.9rem;
}
.album .page.gagnee { border: 1.5px solid var(--cachet); color: var(--encre); background: color-mix(in srgb, var(--cachet) 8%, transparent); transform: rotate(-1.5deg); }
.album .page.gagnee strong { color: var(--cachet-encre); font-family: var(--police-titre); }

/* Le carnet d'histoires. */
.histoire { max-width: min(100% - 2rem, 34rem); border: 0; border-radius: var(--rayon); padding: 1.4rem; background: var(--papier); color: var(--encre); }
.histoire::backdrop { background: rgba(20, 24, 28, 0.6); }
.histoire-serie { margin: 0; color: var(--encre-douce); font-size: 0.9rem; }
.histoire h2 { font-family: var(--police-titre); margin: 0.2rem 0 1rem; }
.repliques { display: grid; gap: 0.8rem; margin-bottom: 1.2rem; }
.replique { margin: 0; }
.replique.narrator { font-style: italic; color: var(--encre-douce); }
.replique .qui { display: block; font-weight: 700; font-size: 0.9rem; color: var(--laiton); }
.replique.you .qui { color: var(--avion-bleu); }

/* ---- Le courrier ---- */

.nouvelles { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.4rem; }
.nouvelles:empty { display: none; }
.nouvelle { padding: 0.6rem 0.9rem; border-left: 4px solid var(--vert-de-gris); background: var(--papier); border-radius: var(--rayon); }
.nouvelle.bonne { border-left-color: var(--ok); }
.nouvelle.cachet-nouveau { border-left-color: var(--cachet); }

.cartes { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.9rem; }
@media (min-width: 52rem) { .cartes { grid-template-columns: repeat(2, 1fr); } }
.carte {
  position: relative; padding: 1rem 1rem 0.9rem; border-radius: var(--rayon); background: var(--papier);
  border: 1.5px solid var(--papier-ombre); box-shadow: 0 2px 0 var(--papier-ombre);
}
.carte.contract { border-top: 6px solid var(--avion-bleu); }
.carte.event { border-top: 6px solid var(--cachet); }
.carte.opportunity { border-top: 6px solid var(--laiton); }
.carte-genre { margin: 0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--encre-douce); }
.carte h3 { font-family: var(--police-titre); font-weight: 600; font-size: 1.25rem; margin: 0.2rem 0 0.4rem; }
.carte p { margin: 0 0 0.5rem; }
.carte .actions { margin: 0.6rem 0 0; }
.carte .actions .bouton { width: auto; }
.expedition { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px dashed var(--papier-ombre); }
.expedition .champ { margin-bottom: 0.7rem; }

.vol h3 { margin-bottom: 0.2rem; }
.jauge { height: 0.6rem; background: var(--brume-fonce); border-radius: 999px; overflow: hidden; margin: 0.5rem 0; }
.jauge-remplie { height: 100%; background: var(--avion-bleu); transition: width 1s linear; }
@media (prefers-reduced-motion: reduce) { .jauge-remplie { transition: none; } }

.bord { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; font-size: 0.95rem; }
.bord li { border-bottom: 1px dashed var(--papier-ombre); padding-bottom: 0.35rem; }
.montant { font-variant-numeric: tabular-nums; font-weight: 700; }
.montant.plus { color: var(--ok); }
.montant.moins { color: var(--encre-douce); }

/* ---- Ce qu'on a construit, dans la scène ---- */

.scene .piste[data-niveau='2'] { fill: #b4c48a; }
.scene .piste[data-niveau='3'] { fill: #c2cf96; }
.deco li.posee { border-style: solid; border-color: var(--laiton); }
.routes li.ouverte { border-style: solid; border-color: var(--laiton); }
.routes .tagline { font-style: italic; margin: 0 0 0.4rem; }
/* Le fret lourd : la carte porte une bande à chevrons épaisse, comme une caisse
   marquée pour le courrier aérien ; le convoi s'ouvre dans le formulaire. */
.carte.lourd { border-left: 6px solid var(--avion-bleu); }
.carte.lourd .carte-genre { color: var(--avion-bleu); font-weight: 700; }
.expedition .convoi { border: 1px dashed var(--brume-fonce); border-radius: var(--rayon); padding: 0.4rem 0.8rem 0.6rem; margin: 0.6rem 0; }
.expedition .convoi legend { font-size: 0.9rem; color: var(--encre-douce); padding: 0 0.3rem; }

/* Les vignettes des régions : un petit paysage en tête de chaque route. */
.routes .vignette { display: block; width: 100%; aspect-ratio: 160 / 48; border-radius: var(--rayon); margin: 0 0 0.6rem; }
.routes li:not(.ouverte) .vignette { filter: saturate(0.35) brightness(0.92); }
.vignette .v-ciel { fill: #b9d3e3; } .vignette .v-brume { fill: #d9e2e6; opacity: 0.8; } .vignette .v-colline-loin { fill: #9fb6a5; }
.vignette .v-sol { fill: #7f9a6c; } .vignette .v-mur { fill: #d9cfb8; } .vignette .v-toit { fill: #8c4a3a; } .vignette .v-fenetre { fill: #f3dc8a; } .vignette .v-croix { fill: #8c8c86; }
.vignette .v-ciel-saline { fill: #e6edf0; } .vignette .v-mer { fill: #4fb3b0; } .vignette .v-reflet { fill: #a9e0dc; }
.vignette .v-sel { fill: #f1ece0; } .vignette .v-digue { fill: #d8d1b6; } .vignette .v-eau-sel { fill: #cfe6e3; }
.vignette .v-phare { fill: #f6f1e7; } .vignette .v-phare-bande { fill: #b23a2f; } .vignette .v-lumiere { fill: #f3dc8a; } .vignette .v-rocher { fill: #5a5a55; } .vignette .v-barque { fill: #6b4a2a; }
.vignette .v-nuit { fill: #1f2d4a; } .vignette .v-mer-nuit { fill: #16243a; } .vignette .etoile-vignette { fill: #e9ecef; } .vignette .v-lune { fill: #e9ecef; }
.vignette .v-ile { fill: #2a3a46; } .vignette .v-lanterne { fill: #f0a848; } .vignette .v-halo { fill: #f0a848; opacity: 0.35; } .vignette .v-piquet { fill: #3a3a38; } .vignette .v-reflet-lanterne { fill: #f0a848; opacity: 0.4; }
[data-moment='nuit'] .vignette .v-ciel { fill: #1b2634; } [data-moment='nuit'] .vignette .v-sol { fill: #2a3a30; } [data-moment='nuit'] .vignette .v-colline-loin { fill: #2f3b47; } [data-moment='nuit'] .vignette .v-brume { fill: #2b333e; }
[data-moment='nuit'] .vignette .v-ciel-saline { fill: #263241; } [data-moment='nuit'] .vignette .v-mer { fill: #1f3d3c; } [data-moment='nuit'] .vignette .v-sel { fill: #8a8a80; } [data-moment='nuit'] .vignette .v-digue { fill: #6a6a60; } [data-moment='nuit'] .vignette .v-eau-sel { fill: #4a6a68; }
/* Les vignettes vivent hors de la grande scène : leurs arbres, leur herbe et leurs
   avions avaient besoin de couleurs à eux (ils s'affichaient en noir depuis la v0.2). */
.vignette .feuillage { fill: #4f7a45; } .vignette .feuillage-clair { fill: #6f9a5a; } .vignette .tronc { fill: #6b4a2a; } .vignette .herbe { fill: #6d8f5a; }
.vignette .aile { fill: #c9b27a; } .vignette .fuselage { fill: #2a2f33; } .vignette .flotteur { fill: #e9ecef; }
/* La Forêt de Cuivre : hêtres roux, toit vert-de-gris, le Pic dans la clairière. */
.vignette .v-ciel-cuivre { fill: #ecd2ad; } .vignette .v-brume-cuivre { fill: #f4e4cc; opacity: 0.85; } .vignette .v-cime-loin { fill: #c7956a; }
.vignette .v-cime-claire { fill: #e09a52; } .vignette .v-cime { fill: #b8733a; } .vignette .v-cime-sombre { fill: #874e26; } .vignette .v-tronc { fill: #4a3424; }
.vignette .v-foret-fond { fill: #9a6440; } .vignette .v-foret-ombre { fill: #c7956a; } .vignette .v-tronc-loin { fill: #6e4630; } .vignette .v-sous-bois { fill: #3b4a30; } .vignette .v-clairiere { fill: #8a9a5b; } .vignette .v-feuille { fill: #c2652c; } .vignette .v-fumee { fill: #b9b2a8; }
.vignette .v-clocher { fill: #a39d8f; } .vignette .v-toit-vert { fill: #5f9e86; } .vignette .v-baie { fill: #3a3631; }
.vignette .v-aile { fill: #c9b27a; } .vignette .v-hauban { fill: #6b5a3a; } .vignette .v-fuselage { fill: #7d2f22; } .vignette .v-empennage { fill: #5a2219; } .vignette .v-helice { fill: #3a3631; } .vignette .v-roue { fill: #1f2326; }
[data-moment='nuit'] .vignette .v-ciel-cuivre { fill: #2a2630; } [data-moment='nuit'] .vignette .v-brume-cuivre { fill: #3a3440; } [data-moment='nuit'] .vignette .v-cime-loin { fill: #3d3330; }
[data-moment='nuit'] .vignette .v-cime-claire { fill: #6e4a2c; } [data-moment='nuit'] .vignette .v-cime { fill: #563620; } [data-moment='nuit'] .vignette .v-cime-sombre { fill: #3a2414; } [data-moment='nuit'] .vignette .v-clairiere { fill: #3a4430; } [data-moment='nuit'] .vignette .v-sous-bois { fill: #1f271b; } [data-moment='nuit'] .vignette .v-foret-fond { fill: #2e221c; } [data-moment='nuit'] .vignette .v-foret-ombre { fill: #3d3330; }

/* ---- La scène vivante ---- */

.caisse-et-musique { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.boutons-ambiance { gap: 0.4rem; }
#push-aide { margin: 0.4rem 0 0; }
.musique { width: auto; min-height: 40px; padding: 0.4rem 0.8rem; font-size: 0.95rem; }
.musique[aria-pressed='true'] { border-color: var(--laiton); color: var(--laiton); }
.scene .avion-vol { fill: #2a2f33; }
[data-moment='nuit'] .scene .avion-vol { fill: #9fb6c4; }

.carte.reguliere { border-style: dashed; border-color: var(--laiton); }

/* ---- La fiche « Sur l'écran d'accueil » (iPhone) ---- */
.fiche-installer { border: 2px dashed var(--laiton); }
.gestes { list-style: none; padding: 0; margin: 0.8rem 0; display: grid; gap: 0.8rem; counter-reset: geste; }
.gestes li { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; align-items: center; counter-increment: geste; }
.gestes li::before { content: counter(geste); grid-row: 1 / span 2; display: none; }
.gestes svg { fill: var(--encre); background: var(--papier-ombre); border-radius: var(--rayon); padding: 4px; width: 40px; height: 40px; }
.gestes strong { color: var(--encre); }

.carte .bloque { color: var(--cachet-encre); margin: 0 0 0.5rem; }
.fiche-passkey { border: 2px solid var(--laiton); }
.fiche-passkey .bouton { width: auto; }

/* ---- Grand écran : deux colonnes ---- */
.fiche-premier-vol { border: 2px solid var(--vert-de-gris); }
.etapes { margin: 0.6rem 0 0; padding-left: 1.4rem; display: grid; gap: 0.5rem; }
.etapes strong { color: var(--encre); }
@media (min-width: 64rem) {
  .lecture.jeu { max-width: 76rem; }
  .jeu .scene { max-height: 24rem; margin-left: auto; margin-right: auto; }
  .jeu .colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; align-items: start; }
  .jeu .colonne { min-width: 0; }
  .jeu .fiche-premier-vol, .jeu .fiche-passkey, .jeu .fiche-installer { max-width: 44rem; }
}