/* Dundu comme une application : le dessin de l'APK sur le site (PWA, 2026-10-16).

   Tout ce qui est ici ne s'applique qu'en **mode appli** (`html[data-appli]`, posé par `theme.js` quand le site est ouvert depuis
   l'écran d'accueil, ou avec `?appli=1`). Dans un onglet ordinaire, le site garde son dessin de vitrine. Le service d'installation
   (`.ap-*`) est, lui, visible partout.

   ## D'où viennent les valeurs

   Les jetons ci-dessous sont **ceux de l'application**, copiés de `mobile/jue_mobile/lib/app/theme.dart` (couleurs `AnufoColors`,
   espaces `AnufoSpacing`, rayons `AnufoRadius`, mouvements `AnufoMotion`, styles de texte). Un essai (`tests/test_pwa_appli.py`) les
   relit dans `theme.dart` et échoue s'ils s'écartent : le site ne peut pas dériver de l'application sans que cela se voie.
   L'application est sombre seulement (`ThemeMode.dark`) : le mode appli l'est aussi, quel que soit le thème choisi dans l'onglet.
   La police est Roboto, celle d'Android, servie par le site (`/polices/roboto-latin.woff2`) pour que l'iPhone et l'ordinateur
   dessinent les mêmes lettres. */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/polices/roboto-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Les jetons de l'application (AnufoColors, nuit) ────────────────────────────────────────────────────────── */
:root[data-appli],
:root[data-appli][data-theme="light"] {
  color-scheme: dark;
  /* APP-JETONS-DEBUT */
  --app-night: #15181f;
  --app-surface: #1f2230;
  --app-surface-high: #2f3241;
  --app-outline: #434657;
  --app-ink: #f5f5f6;
  --app-ink-muted: #ababb1;
  --app-ink-faint: #7f7f85;
  --app-brand-blue: #062b49;
  --app-brand-blue-bright: #0e6fa8;
  --app-accent: #ffb51d;
  --app-accent-deep: #e8741a;
  --app-accent-glow: #ffd45f;
  --app-terracotta: #e84d2a;
  --app-leaf: #08a86b;
  --app-success: #08a86b;
  --app-warn: #ffb51d;
  --app-danger: #ef7e63;
  /* AnufoSpacing */
  --app-xs: 4px;
  --app-s: 8px;
  --app-m: 12px;
  --app-l: 16px;
  --app-xl: 24px;
  --app-xxl: 32px;
  --app-xxxl: 48px;
  --app-ecran: 16px;
  /* AnufoRadius */
  --app-r-pochette: 8px;
  --app-r-album: 12px;
  --app-r-carte: 16px;
  --app-r-bouton: 24px;
  --app-r-champ: 12px;
  --app-r-feuille: 20px;
  /* AnufoMotion */
  --app-m-ecran: 300ms;
  --app-m-lecteur: 400ms;
  --app-m-feuille: 250ms;
  --app-m-favori: 400ms;
  --app-m-squelette: 1500ms;
  --app-m-appui: 100ms;
  --app-m-rapide: 220ms;
  --app-m-cascade: 45ms;
  --app-entree: cubic-bezier(0.215, 0.61, 0.355, 1);
  --app-sortie: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --app-bascule: cubic-bezier(0.645, 0.045, 0.355, 1);
  /* Barre d'onglets (NavigationBarThemeData) */
  --app-onglets-hauteur: 64px;
  /* APP-JETONS-FIN */

  /* Les variables du site, ramenées aux jetons de l'application : toutes les pages changent de couleur d'un coup. */
  --nuit: var(--app-night);
  --nuit-2: var(--app-surface);
  --surface: var(--app-surface);
  --haute: var(--app-surface-high);
  --bord: var(--app-outline);
  --bord-fort: var(--app-outline);
  --bord-survol: var(--app-ink-faint);
  --encre: var(--app-ink);
  --pale: var(--app-ink-muted);
  --doc: var(--app-ink-muted);
  --accent: var(--app-accent);
  --accent-2: var(--app-accent-deep);
  --accent-3: var(--app-accent-glow);
  --accent-texte: var(--app-accent);
  --sur-accent: var(--app-night);
  --rouge: var(--app-danger);
  --vert: var(--app-success);
  --soleil: var(--app-accent);
  --bouton: var(--app-accent);
  --panneau: var(--app-surface);
  --onglets: var(--app-surface);
  --voile: rgba(21, 24, 31, 0.9);
  --voile-fort: rgba(21, 24, 31, 0.94);
  --voile-moyen: rgba(21, 24, 31, 0.58);
  --voile-leger: rgba(21, 24, 31, 0.38);
  --lueur: rgba(255, 181, 29, 0.1);
  --filet: var(--app-outline);
  --survol: rgba(255, 255, 255, 0.04);
  --vide-1: var(--app-surface-high);
  --vide-2: var(--app-surface);
  --douce: var(--app-entree);
  --rebond: var(--app-entree);
}

/* ── Le texte : Roboto et les styles de l'application (_textTheme) ──────────────────────────────────────────── */
:root[data-appli] body {
  font: 400 15px/1.5 "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--app-night);
  color: var(--app-ink);
  overscroll-behavior-y: none;
}
:root[data-appli] button,
:root[data-appli] input,
:root[data-appli] select,
:root[data-appli] textarea { font-family: inherit; }
:where(:root[data-appli]) h1 { font: 700 32px/1.15 "Roboto", system-ui, sans-serif; }
:where(:root[data-appli]) h2 { font: 700 22px/1.2 "Roboto", system-ui, sans-serif; }
:where(:root[data-appli]) h3 { font: 600 18px/1.3 "Roboto", system-ui, sans-serif; }
:where(:root[data-appli]) small,
:where(:root[data-appli]) .note { font-size: 13px; line-height: 1.4; color: var(--app-ink-muted); }
:root[data-appli] ::selection { background: rgba(255, 181, 29, 0.35); }

/* ── L'installation (visible partout) ───────────────────────────────────────────────────────────────────────── */
.ap-carte {
  position: fixed;
  z-index: 80;
  left: 12px;
  right: 12px;
  bottom: calc(var(--ap-bas, 16px) + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 4px 12px;
  align-items: center;
  max-width: 520px;
  margin: 0 auto;
  padding: 12px;
  border: 1px solid #434657;
  border-radius: 16px;
  background: #1f2230;
  color: #f5f5f6;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  font-family: "Roboto", system-ui, sans-serif;
  animation: ap-monte 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.ap-logo { width: 44px; height: 44px; border-radius: 12px; }
.ap-carte-corps { display: grid; gap: 2px; min-width: 0; }
.ap-carte-titre { font-size: 15px; font-weight: 600; }
.ap-carte-texte { font-size: 13px; line-height: 1.4; color: #ababb1; }
.ap-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.ap-bouton {
  min-height: 44px;
  padding: 0 24px;
  border: 0;
  border-radius: 24px;
  background: #ffb51d;
  color: #15181f;
  font: 700 15px/1 "Roboto", system-ui, sans-serif;
  cursor: pointer;
}
.ap-bouton:active { transform: scale(0.97); }
.ap-lien {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 24px;
  background: none;
  color: #ababb1;
  font: 600 14px/1 "Roboto", system-ui, sans-serif;
  cursor: pointer;
}
.ap-bouton:focus-visible,
.ap-lien:focus-visible { outline: 2px solid #ffb51d; outline-offset: 2px; }
.ap-fond {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
}
.ap-feuille {
  width: 100%;
  max-width: 520px;
  padding: 8px 24px calc(24px + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0;
  background: #1f2230;
  color: #f5f5f6;
  font-family: "Roboto", system-ui, sans-serif;
  animation: ap-monte 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.ap-poignee { width: 32px; height: 4px; margin: 4px auto 16px; border-radius: 2px; background: #7f7f85; opacity: 0.4; }
.ap-titre { margin: 0 0 12px; font-size: 18px; font-weight: 600; line-height: 1.3; }
.ap-etapes { margin: 0 0 24px; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; line-height: 1.5; color: #f5f5f6; }
.ap-feuille .ap-bouton { width: 100%; }
.ap-maj {
  position: fixed;
  z-index: 85;
  left: 12px;
  right: 12px;
  bottom: calc(var(--ap-bas, 16px) + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 520px;
  margin: 0 auto;
  padding: 8px 8px 8px 16px;
  border-radius: 12px;
  background: #2f3241;
  color: #f5f5f6;
  font: 400 14px/1.4 "Roboto", system-ui, sans-serif;
  animation: ap-monte 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.ap-maj-bouton { min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: none; color: #ffb51d; font: 700 14px/1 "Roboto", system-ui, sans-serif; cursor: pointer; }
/* ── Le châssis de l'application (AppShell) ─────────────────────────────────────────────────────────────────── */
.onglets-appli { display: none; }
:root[data-appli] header.barre,
:root[data-appli] footer.pied,
:root[data-appli] nav.onglets,
:root[data-appli] .cta-entete { display: none; }
/* NavigationBar : 64 de haut, fond « surface », sans pastille, icône de 24 dans une zone de 64 x 32, libellé de 11 en gras. */
:root[data-appli] .onglets-appli {
  display: grid; grid-template-columns: repeat(5, 1fr);
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: calc(var(--app-onglets-hauteur) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--app-surface);
}
:root[data-appli] .onglets-appli a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--app-ink-muted); text-decoration: none; font: 600 11px/16px "Roboto", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent; transition: opacity var(--app-m-appui) linear;
}
:root[data-appli] .onglets-appli a:active { opacity: 0.7; }
:root[data-appli] .ap-onglet-icone { display: grid; place-items: center; width: 64px; height: 32px; color: var(--app-ink-faint); }
:root[data-appli] .ap-onglet-icone svg { display: block; width: 24px; height: 24px; }
:root[data-appli] .onglets-appli a[aria-current="page"],
:root[data-appli] .onglets-appli a[aria-current="page"] .ap-onglet-icone { color: var(--app-accent); }
:root[data-appli] .onglets-appli a:focus-visible { outline: 2px solid var(--app-accent); outline-offset: -4px; border-radius: 12px; }
/* Le contenu laisse la place aux onglets ; l'accueil de l'application remplace la vitrine et dessine lui-même ses marges. */
:root[data-appli] body { padding-bottom: 0; }
:root[data-appli] main#contenu { padding-bottom: calc(var(--app-onglets-hauteur) + env(safe-area-inset-bottom) + var(--app-xl)); padding-top: env(safe-area-inset-top); }
:root[data-appli][data-page="accueil"] main#contenu { padding: 0; max-width: none; }
:root[data-appli][data-page="accueil"] main#contenu > :not(.v-ecran) { display: none; }
:root[data-appli] .toast { bottom: calc(var(--app-onglets-hauteur) + 16px + env(safe-area-inset-bottom)); }

.ap-hors { display: grid; justify-items: center; gap: 12px; padding: 72px 16px; text-align: center; }
.ap-hors img { border-radius: 24px; }
.ap-hors h1 { margin: 8px 0 0; }
.ap-hors .note { max-width: 320px; margin: 0 0 12px; }
@keyframes ap-monte { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { :root { --ap-bas: 76px; } }
@media (prefers-reduced-motion: reduce) { .ap-carte, .ap-feuille, .ap-maj { animation: none; } }