/* ENDURIA — Animated List (BRIEF_HERO_ANIMATED_LIST).
   Calque vanilla du composant Magic UI animated-list :
   - cartes "notification" qui poppent (scale 0→1 spring sur-amorti),
   - FLIP repositionnement des cartes existantes,
   - sortie (scale 1→0 + fade) quand la pile dépasse MAX,
   - boucle franche dans l'ordre, gérée en JS.

   La courbe spring (stiffness 350 / damping 40, sur-amortie = pas de rebond) est exposée
   en variable CSS pour partage entre l'entrée, la sortie et le FLIP. */
.al-wrap {
  --spring: linear(
    0, 0.0276, 0.0928, 0.1763, 0.2662, 0.3552, 0.4392, 0.516, 0.5849, 0.6456,
    0.6986, 0.7444, 0.7838, 0.8174, 0.8461, 0.8704, 0.891, 0.9084, 0.9231,
    0.9355, 0.9458, 0.9546, 0.9619, 0.9681, 0.9733, 0.9776, 0.9812, 0.9843,
    0.9868, 0.989, 0.9908, 0.9923, 0.9935, 0.9946, 0.9955, 0.9962, 0.9968,
    0.9973, 0.9978, 0.9981, 0.9984
  );

  position: relative;
  /* +32 de chaque côté + 36 en bas pour laisser respirer les box-shadow des cartes
     (BRIEF_HERO_H1_FIXE §2). Le wrap est plus grand que la zone "active" : .al est
     positionné avec un offset interne qui crée la marge à l'intérieur du clip. */
  width: min(504px, 95vw);   /* 440 + 64 padding latéral */
  height: 360px;             /* 320 + 40 padding bas */
  margin-inline: auto;
  margin-top: clamp(0.5rem, 1.5vh, 1.2rem);
  overflow: hidden;
  /* Fondu haut MARQUÉ (28%) > fondu bas (22%) — le haut "mange" pour que la carte
     sortante se dissolve sans coupure (AJUSTEMENTS_ANIMATED_LIST §1+§3). */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, #000 28%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%, #000 28%, #000 78%, transparent 100%);
}

/* Stack ancrée en bas : nouvelle carte apparait EN BAS, pousse les autres vers le haut.
   Offsets internes (left/right/bottom) = marge pour que les box-shadow des cartes ne se
   fassent pas couper par l'overflow:hidden du wrap (BRIEF_HERO_H1_FIXE §2). */
.al {
  position: absolute;
  bottom: 28px;             /* room pour shadow sous la carte du bas */
  left: 32px;               /* room pour shadow latérale gauche */
  right: 32px;              /* room pour shadow latérale droite */
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---- Carte notification (PERF — backdrop-filter retiré, fond semi-opaque uni) ---- */
.al-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  /* Dark : fond semi-opaque (au lieu de verre dépoli) + liseré haut blanc subtil. */
  background-color: rgba(15, 17, 22, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 24px -8px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.2s var(--ease-out);
}
.al-card:hover { transform: scale(1.03); }

/* Light : carte blanche opaque + ombres douces. */
[data-theme="light"] .al-card {
  background-color: #ffffff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 12px 28px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

/* Coche verte animée — remplace les anciens logos d'apps.
   Tile arrondie verte + SVG check dont le path se trace via stroke-dashoffset
   au moment de l'apparition de la carte (CSS pur, animation déclenchée par
   l'insertion DOM). */
.al-card__check-tile {
  width: 26px;          /* réduit encore (32 → 26) */
  height: 26px;
  border-radius: 50%;
  background: #22c55e;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 0 12px -4px rgba(34, 197, 94, 0.4);
}
.al-card__check-svg {
  width: 13px;          /* proportionnel au tile (~50%) */
  height: 13px;
  display: block;
}
.al-card__check-svg path {
  /* Path "M5 12l5 5L20 7" → longueur ≈ 21.2 unités SVG. dasharray 24 couvre proprement. */
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: al-check-draw 0.45s 0.15s ease-out forwards;
}
@keyframes al-check-draw {
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .al-card__check-svg path { animation: none; stroke-dashoffset: 0; }
}

/* Corps : titre + sous-titre */
.al-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.al-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--paper);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.al-card__subtitle {
  font-size: 0.78rem;
  color: var(--fog);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-theme="light"] .al-card__title { color: #111; }
[data-theme="light"] .al-card__subtitle { color: #555; }

/* ---- Animation entrée : pop scale-from-zero (Magic UI motion exact) ---- */
.al-card {
  transform-origin: center;
}
.al-card.al-enter {
  opacity: 0;
  transform: scale(0);
}
.al-card.al-enter-active {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 0.55s var(--spring),
    transform 0.55s var(--spring);
}

/* ---- Animation sortie : fade rapide + slide léger.
   Court (0.5s) car le linger est désormais piloté par EXIT_DELAY_MS côté JS
   (1.9s après le FLIP avant le départ). L'exit se déclenche juste avant le tick
   suivant pour zéro temps mort visible. ---- */
.al-card.al-exit {
  opacity: 0;
  transform: translateY(-28px);
  transition:
    opacity 0.5s ease-out,
    transform 0.5s var(--ease-out);
}

/* ---- Mobile (≤640px) : pile plus compacte, marges réduites pour ne pas déborder. ---- */
@media (max-width: 640px) {
  .al-wrap {
    width: 95vw;
    height: 320px;
    margin-top: clamp(0.6rem, 2vh, 1rem);
  }
  .al {
    left: 16px;
    right: 16px;
    bottom: 20px;
    gap: 12px;
  }
  .al-card {
    padding: 12px;
    border-radius: 14px;
    gap: 10px;
  }
  .al-card__check-tile { width: 22px; height: 22px; }
  .al-card__check-svg { width: 11px; height: 11px; }
  .al-card__check-svg { width: 20px; height: 20px; }
  .al-card__title { font-size: 0.88rem; }
  .al-card__subtitle { font-size: 0.74rem; }
}

/* ---- prefers-reduced-motion : pas d'animation, cartes statiques ---- */
@media (prefers-reduced-motion: reduce) {
  .al-card,
  .al-card.al-enter,
  .al-card.al-enter-active,
  .al-card.al-exit {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}