/* Avalue — finition : transitions de page, états de focus, mouvement réduit,
   hygiène typographique, micro-interactions. Chargé après avalue-responsive.css. */

/* ---------- 1. Transition de page ----------
   Retirée : la déclaration @view-transition rendait la transition annulable
   dans cet environnement et produisait un rejet non géré à chaque chargement.
   À réintroduire côté build, pilotée en JS avec une promesse rattrapée. */

/* ---------- 2. Focus clavier visible ---------- */
:focus:not(:focus-visible) { outline: none; }

a:focus-visible,
button:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #F97942;
  outline-offset: 3px;
  border-radius: 3px;
}

input:focus-visible,
textarea:focus-visible {
  outline: none;
  border-bottom-color: #F97942 !important;
  box-shadow: 0 1px 0 0 #F97942;
}

input[type="checkbox"]:focus-visible {
  outline: 2px solid #F97942;
  outline-offset: 2px;
  box-shadow: none;
}

/* Le trait du champ se dessine depuis la gauche à la saisie. */
.av-field { transition: border-color 320ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 320ms cubic-bezier(0.2, 0.8, 0.2, 1); }

/* ---------- 3. Hygiène typographique ---------- */
h1, h2, h3, h4 { text-wrap: balance; }
section p, footer p, blockquote, figcaption { text-wrap: pretty; }
[data-count], time, .av-num { font-variant-numeric: tabular-nums; }

/* ---------- 4. Liens de prose : soulignement qui se dessine ---------- */
section p a:not(.av-btn),
footer p a:not(.av-btn) {
  position: relative;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
section p a:not(.av-btn):hover,
footer p a:not(.av-btn):hover,
section p a:not(.av-btn):focus-visible,
footer p a:not(.av-btn):focus-visible { background-size: 100% 1px; }

/* ---------- 4 bis. Grille des trois essais ---------- */
.av-persp3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) {
  .av-persp3 { grid-template-columns: 1fr !important; }
}

/* ---------- 5. Micro-interactions ---------- */
/* Cartes image : l'image respire, la saturation revient. */
.av-persp3 a img,
.av-seq a img {
  transition: transform 720ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 720ms cubic-bezier(0.2, 0.8, 0.2, 1);
  filter: saturate(0.78);
}
.av-persp3 a:hover img,
.av-seq a:hover img { transform: scale(1.035); filter: saturate(1); }

/* Le conteneur découpe l'agrandissement. */
.av-persp3 a,
.av-seq a { overflow: hidden; }

/* La flèche des liens glisse. */
a [aria-hidden="true"] { display: inline-block; transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1); }
a:hover [aria-hidden="true"] { transform: translateX(4px); }

/* Le marquee s'arrête sous le curseur. */
section:hover [style*="loopX"] { animation-play-state: paused; }

/* ---------- 7. Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .js-reveal [data-reveal]:not(.on) { opacity: 1 !important; }
  [style*="loopX"], [style*="loopYup"], [style*="loopYdown"] { animation: none !important; }
}