/* 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; }
/* 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; }
.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 */
[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'] .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 0.6s 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; }
/* 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; }

/* ---- 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; }
}