/* Avalue — « L'instrument de l'ascension ».
   Grammaire graphique dérivée du symbole : lentille (mise au point),
   axe (élévation), boussole (pointeur ↗). Chargé après avalue-polish.css. */

/* ---------- 1. Labels d'instrument (Helvetica, capitales, espacé) ---------- */
.av-mono {
  font-family: 'Helvetica Now Display', Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(12, 16, 18, 0.55);
  font-variant-numeric: tabular-nums;
}
[data-dark] .av-mono, .av-panel .av-mono { color: rgba(240, 239, 235, 0.55); }
.av-idx { color: #F97942; }
.av-kicker { display: flex; align-items: baseline; gap: 16px; margin: 0 0 24px; }

/* ---------- 2. Pointeur ↗ à la place des puces ---------- */
.av-pt { position: relative; display: block; padding-left: 28px !important; }
.av-pt::before {
  content: "↗";
  position: absolute; left: 0; top: var(--pt-top, 0);
  color: #F97942;
  font-family: 'Helvetica Now Display', Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: inherit;
}

/* ---------- 3. Exergue nu, ↗ en tête ---------- */
.av-exergue { position: relative; padding-left: 36px; }
.av-exergue::before { content: "↗"; position: absolute; left: 0; top: 0.05em; color: #F97942; font-weight: 400; }

/* ---------- 4. Panneau : fond plus clair, jamais de filet ---------- */
.av-panel { background: #212A2F; border-radius: 5px; color: #F0EFEB; }
.av-panel-light { background: #FFFFFF; border-radius: 5px; }

/* ---------- 5. La mise au point : flou → net ---------- */
html.js-reveal [data-reveal] {
  transition:
    opacity 900ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 900ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  will-change: opacity, filter, transform;
}
html.js-reveal [data-reveal]:not(.on) { opacity: 0 !important; filter: blur(10px) !important; transform: translateY(10px) !important; }
html.js-reveal [data-reveal].on { opacity: 1 !important; filter: blur(0) !important; transform: none !important; }

@keyframes av-focus {
  from { filter: blur(18px); opacity: 0; transform: scale(1.03); }
  to   { filter: blur(0);    opacity: 1; transform: none; }
}
.av-focus { animation: av-focus 1.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both; }

/* ---------- 6. Le symbole : poli ↔ épure ---------- */
.av-sym { position: relative; aspect-ratio: 1; }
.av-sym svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@keyframes av-poli  { 0%, 42% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes av-epure { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }
.av-sym .poli  { animation: av-poli  14s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; }
.av-sym .epure { animation: av-epure 14s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; }
.av-sym:hover .poli  { animation-play-state: paused; opacity: 0 !important; transition: opacity 700ms; }
.av-sym:hover .epure { animation-play-state: paused; opacity: 1 !important; transition: opacity 700ms; }

/* ---------- 7. Trajectoire : la courbe se trace ---------- */
@keyframes av-trace { to { stroke-dashoffset: 0; } }
.av-traj path.trace { stroke-dasharray: 1200; stroke-dashoffset: 1200; }
[data-reveal].on .av-traj path.trace, .av-traj.on path.trace { animation: av-trace 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s forwards; }

/* ---------- 8. Mobile / mouvement réduit ---------- */
@media (max-width: 768px) {
  [data-reveal] { filter: none !important; transform: none !important; }
  .av-focus { animation: none; }
  .av-traj path.trace { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.js-reveal [data-reveal]:not(.on) { filter: none; transform: none; }
  .av-focus, .av-sym .poli, .av-sym .epure { animation: none !important; }
  .av-sym .epure { opacity: 0; }
  .av-traj path.trace { stroke-dashoffset: 0; animation: none; }
}

/* ---------- 9. Pastille de navigation : six entrées tiennent jusqu'à 900px ---------- */
#navpill .nav-item { padding: 9px 14px; }
@media (max-width: 1100px) { #navpill .nav-item { padding: 9px 11px; font-size: 13px; } }