/* ═══════════════════════════════════════════════════════════════════════════
   CHROME V3 — TITRE + NAVBARS + GRILLE, PARTAGÉ ENTRE TOUTES LES PAGES
   ───────────────────────────────────────────────────────────────────────────
   ⚠️ RÈGLE (établie par le user, 2026-06-03) : le titre de page (header) et les
   barres de navigation (header-actions en haut / mobile-footer-nav en bas) sont
   du CHROME PARTAGÉ. Ils doivent être STRICTEMENT IDENTIQUES d'une page à l'autre.
   On NE les re-style PAS par page : on copie ICI, telles quelles, les règles de
   l'index (jeu), et chaque page secondaire charge ce fichier.

   Source = `css/game-v3.css` (page de jeu) : grille (≈l.15-42), titre Syne
   (≈l.48-53/98), navbar header (≈l.306-328), footer nav (≈l.515-541). Reproduit
   ici à l'identique. Le « box » du titre (bordure/ombre/padding) + sa couleur
   ALÉATOIRE viennent de style.css + applyRandomTitleColor() (déjà partagés).
   À charger APRÈS style.css.  (cf. spec §15.11)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Grille bleue animée (fond global, identique au jeu) ─────────────────── */
@keyframes dlp-grid-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--grid-size, 32px)), calc(-1 * var(--grid-size, 32px)), 0); }
}
body { background: var(--paper) !important; }
body::before {
  content: '';
  position: fixed;
  top: calc(-1 * var(--grid-size, 32px));
  left: calc(-1 * var(--grid-size, 32px));
  width: calc(100vw + 2 * var(--grid-size, 32px));
  height: calc(100dvh + 2 * var(--grid-size, 32px));
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--grid-blue, rgba(116, 185, 255, 0.35)) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-blue, rgba(116, 185, 255, 0.35)) 1px, transparent 1px);
  background-size: var(--grid-size, 32px) var(--grid-size, 32px);
  background-repeat: repeat;
  animation: dlp-grid-scroll var(--grid-speed, 5s) linear infinite;
  will-change: transform;
}
.reduce-motion body::before { animation: none !important; }
/* Le contenu passe AU-DESSUS de la grille. */
.app, .header { position: relative; z-index: 1; }
.header { z-index: 2; }

/* ─── Titre de page : accent en sticker Syne 800 italic tilté ──────────────
   (la BOÎTE = bordure/ombre/padding vient de style.css `.site-title .accent` ;
    la COULEUR de fond est posée par applyRandomTitleColor() — on ne touche
    qu'à la police + la rotation, exactement comme la page de jeu.) */
.site-title .accent {
  font-family: 'Syne', sans-serif !important;
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;   /* titre en CAPITALES, comme l'index (retour user) */
  display: inline-block;
  transform: rotate(var(--rot-3, -1.5deg));
}

/* ─── Navbar HEADER (haut-droite, desktop) — 4 blocs colorés tiltés ────────── */
.header-actions .btn-collection,
.header-actions .btn-nav {
  box-shadow: var(--sh) !important;
  border: var(--stroke) !important;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out) !important;
}
.header-actions > *:nth-child(1) { transform: rotate(var(--rot-1)); background: var(--purple) !important; }
.header-actions > *:nth-child(2) { transform: rotate(var(--rot-6)); background: var(--yellow) !important; }
.header-actions > *:nth-child(3) { transform: rotate(var(--rot-3)); background: var(--blue) !important; }
.header-actions > *:nth-child(4) { transform: rotate(var(--rot-4)); background: var(--green) !important; }
html.dlp-can-hover .header-actions .btn-collection:hover,
html.dlp-can-hover .header-actions .btn-nav:hover {
  transform: translate(-2px, -2px) rotate(0deg) !important;
  box-shadow: var(--sh-hover) !important;
}
.header-actions .btn-collection:active,
.header-actions .btn-nav:active {
  transform: translate(4px, 4px) !important;
  box-shadow: var(--sh-press) !important;
}

/* ─── Navbar FOOTER (bas, mobile) — 4 blocs colorés tiltés ─────────────────── */
.mobile-nav-btn {
  flex-direction: column !important;
  gap: 4px !important;
  border: var(--stroke) !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
  padding: 8px 2px 7px !important;
  font-size: 9.5px !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.mobile-nav-btn:nth-child(1) { transform: rotate(-1.4deg); background: var(--purple) !important; }
.mobile-nav-btn:nth-child(2) { transform: rotate(1.2deg);  background: var(--yellow) !important; }
.mobile-nav-btn:nth-child(3) { transform: rotate(-1deg);   background: var(--blue) !important; }
.mobile-nav-btn:nth-child(4) { transform: rotate(1.5deg);  background: var(--green) !important; }
.mobile-nav-btn .ico { width: 22px !important; height: 22px !important; }
.mobile-nav-btn:active { transform: translate(3px, 3px) !important; box-shadow: var(--sh-press) !important; }
/* B5.3 — neutralise les règles legacy ≤430px de style.css (« Succès » réduit à
   une icône-seule de 36px) : en grille 4 colonnes, chaque bouton remplit sa
   piste. Copie de la neutralisation déjà faite côté jeu (game-v3.css). */
.mobile-nav-btn,
.mobile-nav-btn-icon-only,
.mobile-nav-btn[href*="achievements.html"] {
  flex: none !important;
  width: auto !important;
  min-width: 0 !important;
}

/* ─── Bascule navbar pilotée par le RATIO (identique au jeu) ──────────────────
   Paysage/carré = navbar du HAUT ; portrait/mobile = navbar du BAS.
   (cf. spec §15.1 : responsive piloté par le ratio, pas par des px.) */
@media (min-aspect-ratio: 1/1) {
  .mobile-footer-nav,
  .mobile-footer-nav.is-fixed { display: none !important; }
  /* HEADER desktop — COPIE EXACTE de l'index (game-v3.css desktop) : layout en
     rangée + TAILLE DU TITRE (clamp 20-30, pas le 44px de style.css) + emoji, pour
     que TOUT le bandeau (titre + nav, ⚙ inclus) soit identique au jeu (retour user). */
  .header { padding: 6px 0 !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; }
  .site-title { container-type: normal !important; flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; }
  .site-title .accent {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: clamp(20px, 2.3vw, 30px) !important;
    padding: 0.16em 0.34em 0.2em 0.4em !important;
  }
  .site-title .site-emoji { font-size: clamp(22px, 2.6vw, 34px) !important; }
  /* Nav du HAUT compacte (boutons + ⚙ même taille qu'au jeu). */
  .header-actions { display: flex !important; flex: 0 0 auto !important; gap: 6px !important; }
  .header-actions .btn-collection,
  .header-actions .btn-nav {
    display: inline-flex !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
    letter-spacing: 0.02em !important;
    gap: 5px !important;
  }
  .header-actions .btn-collection .ico,
  .header-actions .btn-nav .ico { width: 15px !important; height: 15px !important; }
}
@media (max-aspect-ratio: 1/1) {
  .header-actions { display: none !important; }
  .mobile-footer-nav.is-fixed {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    background: var(--paper) !important;
    border-top: var(--stroke) !important;
  }
  /* B5.4 — iPad Pro portrait (>860px de large, ratio < 1) : le position:fixed
     + la réserve de scroll vivaient uniquement dans le @media (max-width:860px)
     de style.css → la nav apparaissait ici (ratio) mais NON épinglée, perdue en
     bas du flux, et le header est masqué → aucune navigation visible. On
     duplique le comportement fixed legacy (mêmes valeurs que style.css). */
  .mobile-footer-nav.is-fixed {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    padding: 10px 10px calc(14px + env(safe-area-inset-bottom, 0px)) 10px;
    margin: 0; max-width: 100%; box-sizing: border-box;
    overflow-x: clip;
  }
  body:has(.mobile-footer-nav.is-fixed) .app {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}