/* ==========================================================================
   Expérience LENA — version téléphone (section prestations de /graphen/)

   Sur mobile, la maquette LENA n'est plus un écran de bureau rétréci : c'est
   un vrai site mobile présenté dans une carte au format téléphone (9 / 19,5).

   Deux principes :

   1. La carte est un « écran » de téléphone : ratio 9/19,5, coins arrondis,
      liseré et ombre portée. Elle se cale entre l'en-tête fixe et la barre
      « Parler au studio », toutes deux en position fixed.

   2. Le contenu est mesuré en unités de conteneur, pas en rem. La carte fait
      environ 295 px de large sur un téléphone de 375 px : à taille rem, les
      textes et icônes seraient ~30 % trop gros et la maquette ne ressemblerait
      plus à une capture. --u vaut 1 px d'un téléphone de référence de 390 px
      de large ; toutes les tailles s'écrivent calc(N * var(--u)) et suivent
      donc la largeur réelle de la carte. Le conteneur est
      .minimal-lena-stage (cqw ne peut pas être lu par l'élément qui porte
      lui-même container-type).

   Ce fichier est chargé APRÈS lena-pagination.css : il gagne à spécificité
   égale, ce que le bloc mobile de prestations-minimal.css ne faisait pas.
   ========================================================================== */

/* Éléments propres au mobile, masqués partout ailleurs. */
.assistant-poignee,
.produit-points { display: none; }

@media (max-width: 720px) {

  /* ---------------------------------------------------------------- cadre */

  .minimal-lena-wrap {
    height: 100svh;
    gap: 0.8rem;
    /* haut : en-tête fixe (60 px) ; bas : barre « Parler au studio » (84 px de
       l'arête basse) plus une dizaine de pixels de respiration. */
    padding: 4.2rem 1rem 5.8rem;
    justify-content: center;
  }

  .minimal-lena-stage {
    container-type: inline-size;
    flex: 0 0 auto;
    width: min(100%, calc((100svh - 11.6rem) * 9 / 19.5));
    max-width: 100%;
    height: auto;
    aspect-ratio: 9 / 19.5;
    overflow: hidden;
    border-radius: 1.6rem;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.16),
      0 1.4rem 3rem rgba(0, 0, 0, 0.55);
  }

  .minimal-lena-card { --u: calc(100cqw / 390); }

  /* -------------------------------------------------------- en-tête commun */

  .minimal-lena-menu-btn {
    top: calc(20 * var(--u));
    left: calc(18 * var(--u));
    gap: calc(5 * var(--u));
  }

  .minimal-lena-menu-btn span:first-child { width: calc(19 * var(--u)); }
  .minimal-lena-menu-btn span:last-child { width: calc(12 * var(--u)); }

  .minimal-lena-icons {
    top: calc(19 * var(--u));
    right: calc(18 * var(--u));
    gap: calc(15 * var(--u));
  }

  .minimal-lena-icons svg {
    width: calc(19 * var(--u));
    height: calc(19 * var(--u));
  }

  .minimal-lena-top { top: calc(18 * var(--u)); }
  .minimal-lena-logo { font-size: calc(16 * var(--u)); }

  /* ------------------------------------------------- barre de conversation */

  .minimal-lena-chatbar {
    width: 100%;
    gap: calc(10 * var(--u));
    padding: calc(6 * var(--u));
    border-radius: 999px;
  }

  .minimal-lena-pin {
    width: calc(34 * var(--u));
    height: calc(34 * var(--u));
  }

  .minimal-lena-pin svg {
    width: calc(18 * var(--u));
    height: calc(18 * var(--u));
  }

  .minimal-lena-text { font-size: calc(14 * var(--u)); }

  .minimal-lena-send {
    width: calc(32 * var(--u));
    height: calc(32 * var(--u));
    border-radius: 999px;
  }

  .minimal-lena-send svg {
    width: calc(15 * var(--u));
    height: calc(15 * var(--u));
  }

  /* ------------------------------------------ écran 1 — accueil, plein cadre

     La photo d'origine est un paysage 1780 × 884 : recadrée au centre en
     portrait, il ne resterait qu'une bande de mur. Le sujet est assis au tiers
     gauche, 28 % le ramène au centre de l'écran. */

  [data-lena-slide="0"] {
    padding: 0 calc(18 * var(--u)) calc(26 * var(--u));
    background-position: 28% center;
  }

  [data-lena-slide="0"]::before { height: 22%; }
  [data-lena-slide="0"]::after { height: 28%; }

  .minimal-lena-bottom { gap: calc(14 * var(--u)); }

  .minimal-lena-season {
    font-size: calc(9 * var(--u));
    letter-spacing: 0.22em;
  }

  /* ---------------------------------------------- écran 2 — catalogue mobile

     Fil d'Ariane, onglets en rail horizontal (dégradé de coupe à droite pour
     dire qu'il en reste), compte + filtre sur leur propre ligne, grille à deux
     colonnes. C'est la grammaire d'un catalogue mobile. */

  .minimal-lena-card--catalogue {
    padding: calc(62 * var(--u)) calc(14 * var(--u)) 0;
  }

  .catalogue-fil {
    margin: 0 0 calc(10 * var(--u));
    font-size: calc(9.5 * var(--u));
  }

  .catalogue-onglets-ligne {
    flex-direction: column;
    align-items: stretch;
    gap: calc(10 * var(--u));
    padding-bottom: calc(10 * var(--u));
  }

  .catalogue-onglets {
    gap: calc(15 * var(--u));
    font-size: calc(12 * var(--u));
    -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent);
    mask-image: linear-gradient(90deg, #000 84%, transparent);
  }

  .catalogue-compte {
    justify-content: space-between;
    gap: calc(10 * var(--u));
    margin-left: 0;
    font-size: calc(10 * var(--u));
  }

  .catalogue-filtre {
    width: calc(26 * var(--u));
    height: calc(26 * var(--u));
    border-radius: calc(4 * var(--u));
  }

  .catalogue-filtre svg {
    width: calc(14 * var(--u));
    height: calc(14 * var(--u));
  }

  .catalogue-grille {
    gap: calc(14 * var(--u)) calc(10 * var(--u));
    margin-top: calc(12 * var(--u));
  }

  .catalogue-produit { gap: calc(6 * var(--u)); }
  .catalogue-produit p { font-size: calc(10.5 * var(--u)); }

  .catalogue-tag {
    top: calc(8 * var(--u));
    left: calc(8 * var(--u));
    font-size: calc(8.5 * var(--u));
  }

  /* --------------------------- écran 2 — myLENA en feuille remontante (sheet)

     Sur ordinateur l'assistant est un panneau latéral : il y a de la largeur
     en trop. Sur téléphone il n'y en a pas, donc l'assistant devient ce qu'il
     est partout ailleurs sur mobile — une feuille qui remonte du bas, poignée
     en haut, saisie ancrée en bas. Elle s'arrête à 68 % pour laisser voir le
     haut du catalogue : on comprend d'où l'on vient. */

  .minimal-lena-card--catalogue::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgba(17, 17, 17, 0.12);
    pointer-events: none;
  }

  .assistant-panneau {
    inset: auto 0 0 0;
    width: 100%;
    height: 68%;
    padding: calc(10 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u));
    border-left: 0;
    border-radius: calc(20 * var(--u)) calc(20 * var(--u)) 0 0;
    background: #fff;
    box-shadow: 0 calc(-10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.18);
  }

  .assistant-poignee {
    display: block;
    flex-shrink: 0;
    width: calc(34 * var(--u));
    height: calc(3 * var(--u));
    margin: 0 auto calc(10 * var(--u));
    border-radius: calc(2 * var(--u));
    background: rgba(17, 17, 17, 0.2);
  }

  .assistant-entete { margin-bottom: calc(12 * var(--u)); }
  .assistant-titre { font-size: calc(13 * var(--u)); }

  .assistant-entete-btns { gap: calc(6 * var(--u)); }

  .assistant-reglages,
  .assistant-fermer {
    width: calc(18 * var(--u));
    height: calc(18 * var(--u));
  }

  .assistant-reglages span { font-size: calc(7 * var(--u)); }
  .assistant-fermer { font-size: calc(17 * var(--u)); }

  .assistant-messages { gap: calc(8 * var(--u)); }

  .assistant-message { font-size: calc(11 * var(--u)); }
  .assistant-message--achat { max-width: 100%; }
  .assistant-message--achat > p { font-size: calc(11.5 * var(--u)); }
  .assistant-message--groupe { gap: calc(8 * var(--u)); }

  .assistant-reference {
    gap: calc(9 * var(--u));
    padding: calc(8 * var(--u));
    border-radius: calc(8 * var(--u));
    background: #f4f2ef;
  }

  .assistant-reference-photo {
    width: calc(40 * var(--u));
    height: calc(47 * var(--u));
  }

  .assistant-reference-info { gap: calc(2 * var(--u)); }
  .assistant-reference-nom { font-size: calc(9.5 * var(--u)); }
  .assistant-reference-date,
  .assistant-reference-commande { font-size: calc(8.5 * var(--u)); }

  .assistant-produits { gap: calc(10 * var(--u)); }
  .assistant-produit { gap: calc(5 * var(--u)); }
  .assistant-produit-photo { aspect-ratio: 4 / 5; }
  .assistant-produit-photo img { object-position: center 18%; }
  .assistant-produit p { font-size: calc(9.5 * var(--u)); }

  .assistant-cta {
    padding: calc(9 * var(--u));
    border-radius: calc(4 * var(--u));
    font-size: calc(9.5 * var(--u));
  }

  .assistant-message--groupe .assistant-followup {
    margin-top: calc(10 * var(--u));
    font-size: calc(11 * var(--u));
  }

  .assistant-panneau .minimal-lena-chatbar { margin-top: calc(10 * var(--u)); }

  /* ------------------------------------------------- écran 3 — fiche produit

     Sur ordinateur : deux visuels côte à côte et une carte flottante en bas à
     droite. Sur téléphone, la fiche produit se lit toujours de la même façon :
     un visuel plein cadre en galerie (points de pagination), puis la fiche en
     feuille ancrée au bas de l'écran — nom, prix, couleur, taille, achat. Le
     prix remonte juste sous le nom, comme sur tous les sites mobiles. */

  /* La carte est déjà une colonne flex : le visuel prend ce qui reste, la
     fiche se pose dessous. Pas de hauteur en pourcentage à faire coïncider —
     la fiche remonte de 16 u sur la photo, ses angles arrondis mordent
     dessus, et il ne peut jamais apparaître de bande beige entre les deux. */
  .produit-images {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
  }

  .produit-image--alt { display: none; }
  .produit-image img { object-position: center 12%; }

  .produit-points {
    position: absolute;
    left: 50%;
    bottom: calc(26 * var(--u));
    z-index: 4;
    display: flex;
    gap: calc(5 * var(--u));
    transform: translateX(-50%);
  }

  /* Blancs et ombrés : le bas du visuel peut être clair (mur) comme très
     sombre (manteau noir), les points doivent tenir sur les deux. */
  .produit-points span {
    width: calc(5 * var(--u));
    height: calc(5 * var(--u));
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  }

  .produit-points span:first-child { background: #fff; }

  .minimal-lena-card--produit .produit-panneau {
    position: relative;
    inset: auto !important;
    z-index: 6;
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    height: auto;
    margin-top: calc(-16 * var(--u));
    padding: calc(18 * var(--u)) calc(18 * var(--u)) calc(20 * var(--u));
    gap: calc(9 * var(--u));
    overflow: visible;
    border-radius: calc(20 * var(--u)) calc(20 * var(--u)) 0 0;
    box-shadow: 0 calc(-8 * var(--u)) calc(26 * var(--u)) rgba(0, 0, 0, 0.13);
  }

  .produit-nom { order: 1; font-size: calc(16 * var(--u)); }
  .produit-prix { order: 2; font-size: calc(14 * var(--u)); }
  .produit-couleur { order: 3; font-size: calc(11 * var(--u)); }
  /* Seule sur sa ligne, la vignette ne se lit plus comme une image mais comme
     un nuancier : le liseré dit « coloris sélectionné ». */
  .produit-vignette {
    order: 4;
    width: calc(36 * var(--u));
    outline: 1px solid #111;
    outline-offset: calc(2 * var(--u));
  }
  .produit-taille { order: 5; padding: calc(10 * var(--u)) 0; font-size: calc(12.5 * var(--u)); }

  .produit-btns {
    order: 6;
    gap: calc(8 * var(--u));
    margin-top: calc(4 * var(--u));
  }

  .produit-btn-mylena {
    justify-content: center;
    padding: calc(11 * var(--u)) 0;
    font-size: calc(12 * var(--u));
  }

  .produit-btn-panier {
    padding: calc(11 * var(--u)) calc(6 * var(--u));
    border-radius: calc(4 * var(--u));
    font-size: calc(10 * var(--u));
  }
}