@property --r-settle { syntax: "<angle>"; inherits: false; initial-value: -88deg }
@property --r-mouse  { syntax: "<angle>"; inherits: false; initial-value: 0deg }
@property --c { syntax: "<color>"; inherits: false; initial-value: #a3bee0 }

* { box-sizing: border-box; margin: 0; padding: 0 }

body {
  font: 15px/1.5 Ubuntu, sans-serif;
  color: #0a1f47;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  padding: clamp(1rem, 5vh, 2rem) 24px;
  text-align: center;
  animation: settle 4s ease-in-out forwards, breathe 8s ease-in-out infinite;
  background:
    conic-gradient(at 50% 72%, #0000 0 130deg, #e4002b22 130deg 230deg, #0000 230deg),
    conic-gradient(from calc(var(--r-settle) + var(--r-mouse)) at 50% 72%,
      #0000 0 8deg, #ffcd0028 8deg 12deg,
      #0000 12deg 53deg, #ffcd0028 53deg 57deg,
      #0000 57deg 98deg, #ffcd0028 98deg 102deg,
      #0000 102deg 143deg, #ffcd0028 143deg 147deg,
      #0000 147deg 188deg, #ffcd0028 188deg 192deg,
      #0000 192deg),
    linear-gradient(var(--c), #e5edf7);
}

@keyframes settle {
  /* Oscillation amortie asymétrique, amplitudes très réduites (deg vs -100 cible) :
     +12 → -2 → +1.2 → -0.7 → +0.3 → -0.2 → +0.1 → 0. Bascule sous l'horizontale
     conservée (overshoot principal à -102°) mais beaucoup plus discrète qu'avant.
     Asymétrie : amortissement gauche/droite pas miroir parfait, effet organique.
     --r-settle est combiné à --r-mouse (modifié par assets/js/parallax.js)
     via calc() dans le conic-gradient du body — l'arrivée settle et le pivot
     souris vivent leur vie indépendamment, puis se composent. */
  0%    { --r-settle: -88deg }     /* départ à droite */
  24%   { --r-settle: -102deg }    /* overshoot gauche, juste sous l'horizontale (discret) */
  42%   { --r-settle: -98.8deg }   /* rebond droite */
  57%   { --r-settle: -100.7deg }  /* rebond gauche, légèrement asymétrique */
  70%   { --r-settle: -99.5deg }   /* rebond droite atténué */
  82%   { --r-settle: -100.2deg }  /* rebond gauche micro */
  92%   { --r-settle: -99.9deg }   /* rebond droite micro */
  100%  { --r-settle: -100deg }    /* position finale (inchangée) */
}
@keyframes breathe {
  /* Cycle de respiration complet dans une seule itération : inspire (vers la teinte
     plus profonde) puis expire (retour à la teinte claire). Plus organique qu'un
     simple `alternate` qui pouvait être mal interpolé sur certains moteurs. */
  0%    { --c: #a3bee0 }   /* inspire : teinte claire de départ */
  50%   { --c: #85a8d4 }   /* expire : teinte plus profonde */
  100%  { --c: #a3bee0 }   /* retour à la teinte claire */
}

main { max-width: 540px; width: 100%; margin-bottom: 5vh }

picture, img {
  display: block;
  max-width: 180px;
  height: auto;
  margin: 0 auto 1.4rem;
}
img { mix-blend-mode: multiply }

h1 {
  font-size: clamp(1.5rem, 5vh, 2.4rem);
  margin-bottom: .6rem;
  color: #475569;
}
h1 span { color: #7cb342 }  /* vert calibré sur le lézard (rime visuelle directe entre la mascotte et le « 974 »). Contraste ~1.8:1 sub-AA, encore plus bas que lime-700 (#4d7c0f, ~2.5:1) — choix esthétique assumé, le projet a explicitement opté pour le punch lime contre la stricte conformité AA sur cet accent brand. */

p { color: #1e3a8a; margin-bottom: 2rem }
p i { font-size: .85em }  /* opacity retirée : empêchait d'atteindre WCAG AA */

.l {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
}

a {
  display: inline-block;
  font-weight: 700;
  background: #000;
  color: #fff;
  text-decoration: none;
  padding: .75rem 1.4rem;  /* ≥44px touch target (WCAG 2.5.5 AAA) avec font-size 15px + line-height */
  min-height: 44px;
  border-radius: 99em;
  font-size: .95rem;       /* ≥14.66px bold = large text WCAG (3:1 contrast suffisant) */
  box-shadow: 0 4px 14px #0003;
  transition: transform .15s ease, box-shadow .15s ease;
}

a:focus-visible {
  outline: 3px solid #1e3a8a;
  outline-offset: 3px;
}
a.k:focus-visible {
  outline-color: #1e3a8a;  /* contraste fort contre coral et contre le fond bleu pâle */
}
a.k {
  background: #ef5350;  /* coral légèrement assombri vs Ko-fi brand #ff5e5b : contraste ~3.3:1 vs blanc, AA large ≥3:1 */
  box-shadow: 0 4px 14px #ef535055;
}
a b { margin-right: .4em }

a:hover  { box-shadow: 0 6px 20px #0005 }
a.k:hover { box-shadow: 0 6px 20px #ef535088 }
a:active { transform: translateY(1px); box-shadow: 0 2px 8px #0004 }
a.k:active { box-shadow: 0 2px 8px #ef535066 }

@media (prefers-reduced-motion: reduce) {
  body, a { animation: none; transition: none }
}