/* filou d'actu : habit « application » (PWA), partagé par toutes les pages.
   Barre d'onglets en bas sur téléphone, bandeau d'installation, mode plein écran (écran d'accueil), transitions entre pages.
   Couleurs codées en dur (pas de dépendance aux variables d'une page) : ivoire #FBF7F0, brun #3B2F29, rouge du logo #B8141B. */

/* Transitions entre pages, comme dans une application (navigateurs récents ; ignoré ailleurs) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms ease-out both filou-sortie; }
::view-transition-new(root) { animation: 220ms ease-out both filou-entree; }
@keyframes filou-sortie { to { opacity: 0; transform: translateY(-6px); } }
@keyframes filou-entree { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Barre d'onglets en bas : téléphone seulement */
.barre-app { display: none; }
@media (max-width: 900px) {
  .barre-app {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 6px 6px max(6px, env(safe-area-inset-bottom));
    background: rgba(251, 247, 240, .96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 -1px 0 rgba(59, 47, 41, .08), 0 -10px 24px rgba(59, 47, 41, .08);
  }
  .barre-app a {
    display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 4px; border-radius: 12px;
    font: 500 11.5px/1.15 'Oswald', 'Arial Narrow', sans-serif; letter-spacing: .08em; text-transform: uppercase; text-align: center;
    color: #3B2F29; text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  .barre-app a[aria-current="page"] { background: #B8141B; color: #fff; }
  .barre-app a:active { transform: scale(.96); }
  /* seulement les pages qui ont la barre (pas la liseuse, en plein écran avec sa propre barre) */
  body:has(.barre-app) { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  /* le menu du haut reste, la barre du bas prend le relais pour les pages principales */
}

/* Ouvert depuis l'écran d'accueil : la barre du haut laisse la place à l'heure et à l'encoche
   (pages qui ont la barre d'onglets ; la liseuse règle sa propre barre) */
.app body:has(.barre-app) .barre { padding-top: env(safe-area-inset-top); height: calc(64px + env(safe-area-inset-top)) !important; }
.app body { overscroll-behavior-y: none; }
.app .installer { display: none !important; }

/* Bandeau « Installer l'application » */
.installer {
  position: fixed; left: 12px; right: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 70;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 14px 14px 16px; border-radius: 18px; background: #fff; color: #3B2F29;
  box-shadow: 0 18px 40px rgba(59, 47, 41, .22), inset 0 0 0 1.5px rgba(59, 47, 41, .08);
  transform: translateY(20px); opacity: 0; transition: transform .35s ease, opacity .35s ease;
}
.installer.visible { transform: none; opacity: 1; }
.installer__texte { flex: 1 1 220px; margin: 0; font: 400 15px/1.4 'Literata', Georgia, serif; }
.installer__texte strong { display: block; font: 400 18px/1.15 'DM Serif Display', Georgia, serif; margin-bottom: 2px; }
.installer__go, .installer__fermer {
  min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  font: 500 12.5px/1 'Oswald', sans-serif; letter-spacing: .12em; text-transform: uppercase;
}
.installer__go { border: 0; background: #B8141B; color: #fff; }
.installer__fermer { border: 1.5px solid #3B2F29; background: transparent; color: #3B2F29; }
@media (min-width: 901px) {
  .installer { left: auto; right: 24px; bottom: 24px; max-width: 420px; }
}
@media (prefers-reduced-motion: reduce) { .installer { transition: none; } }