/**
 * Vitrine des exemples — vraies captures d'écran.
 *
 * Le composant est écrit ici d'un seul tenant, dans une feuille chargée après
 * maymoune.css : les couches de correction successives qui s'y étaient
 * accumulées ne le pilotent plus.
 *
 * Principe : la capture d'ordinateur remplit une fenêtre de navigateur au
 * format 16/10 — donc la même hauteur pour tous les exemples, rognée par le
 * bas, jamais agrandie. Le téléphone la chevauche à droite, centré sur elle
 * et plus haut qu'elle, pour qu'on lise les deux comme un même appareil.
 * Sa largeur découle de la hauteur mesurée de la fenêtre (--wh, posée par le
 * script à chaque changement d'exemple), si bien que la proportion tient à
 * toutes les tailles d'écran.
 */

/* ── la carte ── */
.vitstage.reel{
 grid-template-columns:minmax(0,1fr) 300px;
 gap:44px;
 padding:64px 56px;
 align-items:center;
 /* hauteur du téléphone = 1.14 × la fenêtre ; largeur = hauteur × 0.4617.
    --wh est la hauteur mesurée de la fenêtre, posée par le script. */
 --pw:clamp(148px, calc((var(--wh,368px) * 1.14 - 22px) * .4617), 268px);
}

/* ── la scène : fenêtre + téléphone ── */
.vitshow.reel{min-height:0;display:block!important;position:relative!important}
.vitrail.reel{
 width:100%!important;max-width:100%!important;height:auto!important;
 display:block!important;position:relative!important;flex:none!important;
 min-width:0;outline:none;
}
.vitscene.reel{
 position:relative;height:auto;
 /* le téléphone déborde en haut et en bas : on lui réserve la place */
 padding:calc(var(--pw) * .12) calc(var(--pw) * .66) calc(var(--pw) * .12) 0;
}
.vitscene.reel .vitwin{
 position:relative;width:100%;max-width:none;height:auto;max-height:none;
 border-radius:16px;overflow:hidden;background:#fff;
 box-shadow:0 46px 92px -44px rgba(22,12,41,.5),0 0 0 1px rgba(22,12,41,.06);
}
.vitscene.reel .vshotw{
 display:block;width:100%;height:auto;aspect-ratio:16/10;
 object-fit:cover;object-position:top center;background:#fff;border:0;
}
.vitscene.reel .dev{
 /* bottom:auto est indispensable : une couche plus ancienne pose bottom:0,
    et top + bottom ensemble imposeraient une hauteur à la place de celle
    du contenu. */
 position:absolute;right:0;left:auto;top:50%;bottom:auto;transform:translateY(-50%);
 width:var(--pw);padding:10px;border-radius:calc(var(--pw) * .19);z-index:3;
 background:linear-gradient(150deg,#2A2338,#100B1C 60%,#241D33);
 box-shadow:0 34px 74px -24px rgba(21,10,40,.62),0 0 0 1px rgba(255,255,255,.07) inset;
}
.vitscene.reel .dev .isl{top:calc(var(--pw) * .085);width:calc(var(--pw) * .3);height:calc(var(--pw) * .09)}
.vitscene.reel .dev .scr{
 height:auto;aspect-ratio:.4617;border-radius:calc(var(--pw) * .15);
 display:block;background:#fff;overflow:hidden;
}
.vitscene.reel .vshotm{display:block;width:100%;height:100%;object-fit:contain;background:#fff}

/* ── les flèches : aux deux bords de la carte, à mi-hauteur de la fenêtre ── */
.vitstage.reel > .vitarrow{
 display:grid!important;place-items:center;position:absolute;z-index:6;
 top:var(--ay,50%);
 transform:translateY(-50%);
}
.vitstage.reel > #vprev{left:14px}
.vitstage.reel > #vnext{right:14px}
.vitstage.reel > .vitarrow:hover{transform:translateY(-50%) scale(1.08)}

/* ── la fiche de droite ── */
.vitinfo .vtagline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.vitinfo .vtagline .vtag{margin:0}
/* la pastille d'essai se distingue nettement du libellé de famille */
.vessai{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
 font-family:var(--f-d);font-weight:700;font-size:12px;letter-spacing:-.01em;
 padding:7px 13px;border-radius:999px;color:#fff;background:var(--g);
 background-clip:padding-box;border:1px solid transparent;
 box-shadow:0 10px 22px -12px rgba(232,38,126,.85)}
.vessai:hover{transform:translateY(-1px)}
.vessai em{font-style:normal;font-size:13px;line-height:1}
.vessai[hidden]{display:none}

/* ── la bande de vignettes ── */
.vitstrip.reel{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:26px}
.vitstrip.reel .vsw{height:74px;background-size:cover;background-position:top center;
 background-repeat:no-repeat;border:1px solid var(--line)}

@media (max-width:1180px){
 .vitstage.reel{grid-template-columns:minmax(0,1fr) 280px;gap:36px;padding:52px 44px}
}

/* ════════ mobile et tablette ════════
   Une seule colonne. La scène garde le montage fenêtre + téléphone : c'est
   ce qui évite d'empiler deux aperçus et de manger toute la hauteur. Les
   vignettes défilent de gauche à droite, et les flèches restent posées sur
   le visuel. */
@media (max-width:1040px){
 .vitstage.reel{grid-template-columns:1fr;gap:26px;padding:34px 22px 30px}
 .vitstage.reel{--pw:clamp(112px, calc((var(--wh,240px) * 1.14 - 16px) * .4617), 200px)}
 /* on réserve en plus la place des flèches, qui sont posées sur le visuel */
 .vitscene.reel{padding:calc(var(--pw) * .11) calc(var(--pw) * .5 + 16px) calc(var(--pw) * .11) 0;
  margin-left:-6px}
 .vitscene.reel .dev{padding:7px;box-shadow:0 26px 54px -22px rgba(21,10,40,.5)}
 .vitstage.reel > .vitarrow{width:40px;height:40px;font-size:20px}
 .vitstage.reel > #vprev{left:8px}
 .vitstage.reel > #vnext{right:8px}
 .vitinfo{text-align:left}
 .vitstrip.reel{display:flex!important;grid-template-columns:none;gap:10px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;padding:2px 2px 12px;scrollbar-width:thin;
  margin-top:18px}
 .vitstrip.reel .vth{flex:0 0 164px;scroll-snap-align:start}
 .vitstrip.reel .vsw{height:88px}
}
@media (max-width:600px){
 .vitstage.reel{padding:26px 14px 24px;gap:20px}
 .vitscene.reel .dev{padding:6px}
 .vitstage.reel > .vitarrow{width:36px;height:36px;font-size:18px}
 .vitstage.reel > #vprev{left:5px}
 .vitstage.reel > #vnext{right:5px}
 .vitstrip.reel .vth{flex:0 0 142px}
 .vitstrip.reel .vsw{height:80px}
}