/* ==========================================================================
   Animations.

   Deux familles :
     — l'arrivée du contenu (translations courtes, fondus, décalages) ;
     — la réponse au survol, surtout sur les liens, avec un soulignement
       qui se trace de gauche à droite.

   Le bloc `prefers-reduced-motion` de base.css neutralise l'ensemble.
   ========================================================================== */

/* --- Courbes partagées --------------------------------------------------- */

:root {
  --ease: cubic-bezier(0.22, 0.72, 0.24, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pop {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: none; }
}

/* --- Arrivée du contenu -------------------------------------------------- */

.hero > * { animation: rise 0.5s var(--ease) backwards; }
.hero__title { animation-delay: 30ms; }
.hero__sub { animation-delay: 90ms; }

.panel { animation: rise 0.5s var(--ease) 130ms backwards; }

.prose__header > * { animation: rise 0.5s var(--ease) backwards; }
.prose__title { animation-delay: 40ms; }
.prose__updated { animation-delay: 90ms; }

.prose__standfirst { animation: rise 0.5s var(--ease) 110ms backwards; }
.toc { animation: rise 0.5s var(--ease) 160ms backwards; }

.footer__top > *,
.footer__bottom { animation: fade 0.6s var(--ease) backwards; }

/* --- Soulignement animé -------------------------------------------------
   Un dégradé en fond plutôt qu'un ::after : le trait suit le texte même
   lorsqu'il passe à la ligne.
   ----------------------------------------------------------------------- */

.prose a:not(.btn),
.footer a:not(.brand),
.toc a,
.linkbtn,
.notice__body a,
.panel__foot a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.32s var(--ease), color 0.18s var(--ease-soft);
}

.prose a:not(.btn):hover,
.footer a:not(.brand):hover,
.toc a:hover,
.linkbtn:hover,
.notice__body a:hover,
.panel__foot a:hover { background-size: 100% 1px; }

/* Dans le corps de texte, le lien reste souligné au repos ; le trait
   s'épaissit et se colore au survol pour rester repérable. */
.prose a:not(.btn) {
  background-size: 100% 1px;
  background-image: linear-gradient(
    color-mix(in srgb, currentColor 35%, transparent),
    color-mix(in srgb, currentColor 35%, transparent)
  );
  transition: background-size 0.32s var(--ease), background-image 0.2s,
              color 0.18s var(--ease-soft);
}

.prose a:not(.btn):hover {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 2px;
}

/* --- Barre supérieure ---------------------------------------------------- */

.topbar__nav a {
  position: relative;
  transition: color 0.18s var(--ease-soft), background-color 0.18s var(--ease-soft);
}

.topbar__nav a::after {
  content: "";
  position: absolute;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: 3px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s var(--ease);
}

.topbar__nav a:hover::after { transform: scaleX(1); }

.topbar__nav a[aria-current="page"]::after {
  transform: scaleX(1);
  background: var(--fg);
}

.brand { transition: opacity 0.18s var(--ease-soft); }
.brand:hover { opacity: 0.72; }

.brand__img { transition: transform 0.35s var(--ease); }
.brand:hover .brand__img { transform: translateY(-1px) scale(1.05); }

/* --- Boutons et contrôles ------------------------------------------------ */

.btn {
  transition: background-color 0.18s var(--ease-soft), border-color 0.18s var(--ease-soft),
              color 0.18s var(--ease-soft), transform 0.12s var(--ease-soft),
              opacity 0.18s;
}

.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }

.btn__icon { transition: transform 0.3s var(--ease); }
.btn:hover .btn__icon { transform: scale(1.12); }

.chip { transition: border-color 0.18s var(--ease-soft), background-color 0.18s var(--ease-soft),
                    color 0.18s var(--ease-soft), transform 0.12s var(--ease-soft); }
.chip:hover { transform: translateY(-1px); }
.chip:active { transform: translateY(0); }

.chip__check { transition: opacity 0.18s var(--ease), transform 0.24s var(--ease); }

.segment { transition: background-color 0.2s var(--ease-soft), color 0.2s var(--ease-soft),
                       box-shadow 0.2s var(--ease-soft); }

.input,
.select { transition: border-color 0.18s var(--ease-soft), box-shadow 0.18s var(--ease-soft); }

.check,
.check input { transition: color 0.18s var(--ease-soft); }

/* --- Liste de résultats --------------------------------------------------
   `--i` est posé par le rendu, plafonné pour que les dernières lignes
   n'attendent pas.
   ----------------------------------------------------------------------- */

.summary { animation: rise 0.34s var(--ease) backwards; }
.entries { animation: fade 0.34s var(--ease) backwards; }

.entry {
  animation: rise 0.34s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 24ms);
  transition: background-color 0.18s var(--ease-soft);
}

.tag { animation: pop 0.3s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 24ms + 90ms); }

.entry__amount { transition: color 0.22s var(--ease-soft); }

.entry__more { transition: color 0.18s var(--ease-soft); }
.entry__chevron { transition: transform 0.26s var(--ease); }

.entry__also li { transition: border-color 0.18s var(--ease-soft), color 0.18s var(--ease-soft); }

/* --- Dépliant -----------------------------------------------------------
   Le panneau reste `hidden` une fois replié, donc hors du document et de la
   navigation clavier ; l'animation n'habille que la transition.
   ----------------------------------------------------------------------- */

@keyframes unfold {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@keyframes fold {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-6px); }
}

.entry__detail.is-opening { animation: unfold 0.28s var(--ease); }
.entry__detail.is-closing { animation: fold 0.16s var(--ease-soft); }

.entry__detail.is-opening .detail__block { animation: rise 0.32s var(--ease) backwards; }
.entry__detail.is-opening .detail__block:nth-child(2) { animation-delay: 60ms; }
.entry__detail.is-opening .detail__block:nth-child(3) { animation-delay: 120ms; }

.detail__links a { transition: color 0.18s var(--ease-soft); }
.detail__links a::after { display: inline-block; transition: transform 0.26s var(--ease); }
.detail__links a:hover::after { transform: translate(2px, -2px); }

.services li { transition: border-color 0.18s var(--ease-soft), background-color 0.18s var(--ease-soft); }
.services li:hover { border-color: var(--border-strong); }

/* --- Messages et plans -------------------------------------------------- */

.notice { animation: rise 0.3s var(--ease); }

.mapbox { transition: opacity 0.18s var(--ease-soft); }
.mapbox.is-loading { opacity: 0.5; }
.mapbox__frame { animation: fade 0.45s var(--ease); }

/* --- Attente ------------------------------------------------------------ */

.loading li { animation: fade 0.34s var(--ease) backwards; }
.loading li:nth-child(2) { animation-delay: 45ms; }
.loading li:nth-child(3) { animation-delay: 90ms; }
.loading li:nth-child(4) { animation-delay: 135ms; }
.loading li:nth-child(5) { animation-delay: 180ms; }

.skip-link { transition: top 0.18s var(--ease-soft); }

/* --- Pied de page -------------------------------------------------------- */

.footer__cols h2 { transition: color 0.18s var(--ease-soft); }