/* ══════════════════════════════════════════════════════════════════════
   La navigation, hors de la scène.

   Elle vit dans la fenêtre, pas dans la maquette : elle ne se met pas à
   l'échelle et ne recouvre jamais durablement une page. Discrète tant
   qu'on présente, elle se réveille dès que la souris bouge, puis
   s'efface d'elle-même.
   ══════════════════════════════════════════════════════════════════════ */

:root{ --rose:#d20074; --bleu:#005b9c; }

.chrome{
  position:fixed; z-index:100; color:#fff;
  font-family:'Montserrat', 'Segoe UI', system-ui, sans-serif;
}
html[data-mode="choix"] .chrome,
html[data-fige] .chrome{ display:none; }     /* pas de barre sur les captures */

/* ───────────────────────── La barre de progression ──────────────────── */
.chrome-progress{
  left:0; top:0; height:3px; width:100%;
  background:rgba(255,255,255,.06);
  pointer-events:none;
}
.chrome-progress__bar{
  height:100%; width:0;
  background:linear-gradient(90deg, var(--rose), #a0127f 60%, var(--bleu));
  box-shadow:0 0 12px rgba(210,0,116,.55);
  transition:width .6s cubic-bezier(.16,1,.3,1);
}

/* ───────────────────────────── La pilule ────────────────────────────── */
.chrome-nav{
  left:50%; bottom:18px; translate:-50% 0;
  display:flex; align-items:center; gap:12px;
  padding:7px 10px; border-radius:999px;
  background:rgba(10,20,40,.74);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 34px rgba(0,0,0,.35);
  opacity:.22;
  transition:opacity .35s ease, translate .45s cubic-bezier(.16,1,.3,1);
}
.chrome-nav:hover, .chrome-nav:focus-within, html.ui-awake .chrome-nav{ opacity:1; }
/* Au repos, elle se tasse un peu vers le bas : présente, jamais posée
   sur le contenu. */
html:not(.ui-awake) .chrome-nav:not(:hover):not(:focus-within){ translate:-50% 8px; }

.nav-btn{
  width:32px; height:32px; border-radius:50%; flex:none;
  display:grid; place-items:center; padding:0;
  background:rgba(255,255,255,.08); border:none; color:#fff;
  cursor:pointer; text-decoration:none;
  transition:background .2s ease, translate .2s ease, scale .12s ease;
}
.nav-btn:hover{ background:var(--rose); translate:0 -1px; }
.nav-btn:active{ scale:.92; }
.nav-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.nav-btn:disabled{ opacity:.28; cursor:default; translate:none; background:rgba(255,255,255,.06); }
.nav-btn svg{ width:16px; height:16px; }

.nav-dots{ display:flex; align-items:center; gap:6px; }
.nav-dot{
  width:7px; height:7px; border-radius:4px; padding:0; flex:none;
  background:rgba(255,255,255,.28); border:none; cursor:pointer;
  transition:background .25s ease, width .35s cubic-bezier(.16,1,.3,1);
}
.nav-dot:hover{ background:rgba(255,255,255,.65); }
.nav-dot.est-active{ background:var(--rose); width:22px; }
.nav-dot:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

.nav-count{
  font-size:12px; font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.7); letter-spacing:.04em; min-width:48px; text-align:center;
}
.nav-count b{ color:#fff; font-weight:700; }

.nav-sep{ width:1px; height:18px; background:rgba(255,255,255,.14); flex:none; }

/* ─────────────────────── Le titre de la page en cours ────────────────── */
.chrome-title{
  left:22px; bottom:24px; max-width:32vw;
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.4);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  opacity:0; transition:opacity .35s ease;
  pointer-events:none;
}
html.ui-awake .chrome-title{ opacity:1; }

/* Sur un téléphone, les points ne tiennent pas : le compteur suffit. */
@media (max-width:760px){
  .nav-dots, .chrome-title{ display:none; }
  .chrome-nav{ bottom:12px; }
}
@media (prefers-reduced-motion:reduce){
  .chrome-nav, .nav-btn, .nav-dot, .chrome-progress__bar{ transition:none; }
}
@media print{ .chrome{ display:none !important; } }