/* ============================================================================
   Volet illustré des écrans d'authentification.
   HTML : app/Views/partials/auth_vitrine.php

   Il montre une fin de journée — qui a versé, qui doit encore — parce que
   c'est le geste que le logiciel remplace. Un dégradé abstrait aurait pu
   illustrer n'importe quel produit ; celui-ci ne peut illustrer que celui-là.

   Il ne s'affiche qu'à partir de 900 px : sous cette largeur, il passerait
   au-dessus du formulaire et repousserait le bouton hors du premier écran.
   ============================================================================ */

.av { display: none; }

@media (min-width: 900px) {

  .av {
    display: block;
    position: relative;
    color: #fff;
    padding: clamp(1.5rem, 3vw, 2.5rem) 0;
  }

  /* Halo très doux derrière le contenu : il détache la colonne du fond
     dégradé sans introduire de cadre, qui ferait doublon avec la carte. */
  .av__voile {
    position: absolute;
    inset: -12% -8%;
    background: radial-gradient(
      60% 55% at 35% 30%,
      rgba(255, 255, 255, .16) 0%,
      rgba(255, 255, 255, 0) 70%
    );
    pointer-events: none;
  }

  .av__contenu { position: relative; max-width: 32rem; }

  .av__titre {
    margin: 0 0 1rem;
    font-family: var(--lf-titre, inherit);
    font-size: clamp(1.75rem, 2.6vw, 2.6rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
    text-wrap: balance;
  }

  .av__accroche {
    margin: 0 0 2rem;
    max-width: 34ch;
    font-size: .98rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
  }

  /* ---- Aperçu d'une journée ------------------------------------------ */

  .av__apercu {
    /* Verre dépoli plutôt qu'une surface opaque : la carte du formulaire est
       déjà blanche et pleine ; une seconde surface pleine ferait deux cartes
       qui se disputent l'attention. */
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    padding: 1rem 1.1rem 1.1rem;
    backdrop-filter: blur(6px);
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .7);
  }

  .av__jour {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .8rem;
    margin-bottom: .55rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }

  .av__jour-lbl {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: rgba(255, 255, 255, .6);
  }

  .av__jour-val {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .av__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
  }

  .av__ligne {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .7rem;
    padding: .55rem .3rem;
    border-radius: 9px;
  }

  .av__ligne + .av__ligne { border-top: 1px solid rgba(255, 255, 255, .07); }

  .av__ini {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    font-size: .78rem;
    font-weight: 700;
  }

  .av__qui { display: flex; flex-direction: column; min-width: 0; }
  .av__qui strong {
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: .01em;
  }
  .av__qui small {
    font-size: .74rem;
    color: rgba(255, 255, 255, .58);
  }

  .av__somme {
    font-size: .86rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* L'état se lit à la forme autant qu'au texte : la ligne en attente porte
     une pastille, pour qu'on la repère sans lire. */
  .av__somme--du {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .16rem .5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .82);
    font-size: .72rem;
    font-weight: 600;
  }

  .av__somme--du::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #fbbf24;
  }

  .av__ligne--attente { background: rgba(251, 191, 36, .07); }

  /* ---- Atouts --------------------------------------------------------- */

  .av__atouts {
    list-style: none;
    margin: 1.8rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    font-size: .88rem;
    color: rgba(255, 255, 255, .82);
  }

  .av__atouts li { display: flex; align-items: center; gap: .65rem; }

  .av__ico {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
  }

  .av__ico svg { width: 16px; height: 16px; }

  /* ---- Arrivée -------------------------------------------------------- */

  /* L'animation se joue une fois, à l'ouverture, puis s'arrête. Une colonne
     qui bouge en permanence pendant qu'on tape son mot de passe détourne
     l'attention au lieu de la retenir. `backwards` évite le clignotement
     entre le rendu et le premier pas de l'animation. */
  .av__titre,
  .av__accroche,
  .av__apercu,
  .av__atouts {
    animation: av-monte .5s cubic-bezier(.2, .7, .3, 1) backwards;
  }
  .av__accroche { animation-delay: .06s; }
  .av__apercu   { animation-delay: .12s; }
  .av__atouts   { animation-delay: .3s; }

  .av__ligne {
    animation: av-monte .42s cubic-bezier(.2, .7, .3, 1) backwards;
    animation-delay: calc(.2s + var(--rang) * .09s);
  }

  @keyframes av-monte {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .av__titre,
  .av__accroche,
  .av__apercu,
  .av__atouts,
  .av__ligne { animation: none; }
}