/* LENA — catalogue, en maquette plein écran.
   Les feuilles reprises du site Graphen Studio placent la carte dans une scène
   centrée et limitée en largeur ; ici elle occupe tout l'écran qui l'affiche
   (dalle du MacBook, ou navigateur). */

/* Remise à zéro reprise de styles.css : sans elle, les paddings s'ajoutent aux
   largeurs et le panneau assistant déborde de la carte */
*, *::before, *::after { box-sizing: border-box; }

html, body.lena-mockup {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

body.lena-mockup .minimal-lena-wrap {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: block;
}

body.lena-mockup .minimal-lena-stage {
  position: relative;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
}

body.lena-mockup .minimal-lena-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  opacity: 1;
  visibility: visible;
}

/* L'écran de la maquette est bien plus haut que la carte du site : le logo se
   retrouvait collé tout en haut (sous l'encoche du MacBook) et la conversation
   de l'assistant tassée dans le premier tiers du panneau. On descend l'un et
   on répartit l'autre sur toute la hauteur disponible. */
body.lena-mockup .minimal-lena-top { top: 3.4rem; }

body.lena-mockup .assistant-messages {
  justify-content: space-evenly;
  gap: .9rem;
}

/* Message de l'utilisateur : il n'en existe pas sur le site (la conversation
   y démarre par l'assistant), on en ajoute un pour peupler le haut du panneau.
   Bulle alignée à droite, dans le gris de la charte. */
body.lena-mockup .assistant-message--moi {
  align-self: flex-end;
  max-width: 74%;
  padding: .5rem .8rem;
  border-radius: .9rem .9rem .2rem .9rem;
  background: #f1f1f1;
  color: #111;
}