/* FICHIER FABRIQUÉ : ne pas le modifier ici. Sources : src/vitrine-section.css et src/vitrine-ecrans.css,
   puis « node src/construire-vitrine.cjs ». */
/*
 * « Tout ce qu'il te faut pour sortir ta musique » : onglets et écrans du portail
 * redessinés (pages/vitrine.php). Feuille à part : style.css est un build
 * Tailwind dont la source n'est pas ici, de nouvelles classes n'y existeraient pas.
 *
 * Le CADRE de la section suit le thème du site (variables --body, --surface…).
 * Les ÉCRANS, eux, sont ceux du portail : sombres dans les deux thèmes.
 *
 * MISE À L'ÉCHELLE SANS SCRIPT. Chaque écran est un conteneur (container-type) ;
 * à l'intérieur, 1em vaut une fraction de sa largeur (unités cqw) : l'écran
 * d'ordinateur fait 80em de large, celui du téléphone 24,375em. Tout le dessin
 * est en em, et rétrécit d'un bloc avec son cadre.
 */

/* ───────── La section ───────── */
.vt { --vt-noir: #131313; --vt-carte: #1a1a1a; --vt-filet: rgba(255,255,255,.14); --vt-pale: rgba(255,255,255,.58); --vt-tq: #0df8c0; }
.vt-bureau { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 36px; align-items: start; }
.vt-liste { display: flex; flex-direction: column; gap: 4px; }
/*
 * LE CONTOUR DES ONGLETS EST UNE OMBRE INTÉRIEURE, PAS UNE BORDURE. assets/js/motion.js (partagé, on n'y touche pas)
 * prend pour une « ligne » tout élément cliquable dont la bordure du bas fait exactement 1 px : il le décalait de
 * 4 px au survol (décalage qui reste collé après un toucher) et posait sa propre transition en ligne, par-dessus
 * les fondus de couleur. Une ombre intérieure lui échappe.
 */
.vt-liste button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 17px; border-radius: 14px; box-shadow: inset 0 0 0 1px transparent; font: 700 16px/1.3 Nunito, sans-serif; color: var(--bodyMuted); transition: background-color .25s, color .25s, box-shadow .25s; }
.vt-liste button:hover { color: var(--bodyFg); }
.vt-liste button[aria-selected="true"] { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--bodyFg); }
.vt-liste button:focus-visible { outline: 2px solid var(--icon); outline-offset: 2px; }
/* Sans script, les dix panneaux se suivent : dix boutons qui ne feraient rien n'ont pas à s'afficher. */
.vt:not([data-js]) .vt-liste { display: none; }
/* Les numéros sans voile (PageSpeed, 18 oct. 2026 ; « tu peux les foncer », Francis) : l'opacité de .7 les laissait
   à 3,0 pour 1 en thème clair et 4,3 en sombre, sous le 4,5 d'un texte de cette taille. */
.vt-num { font: 600 12px/1 ui-monospace, Menlo, monospace; color: var(--bodyMuted); width: 18px; }
.vt-liste button[aria-selected="true"] .vt-num { color: var(--icon); }

.vt-panneau { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.vt-panneau:focus-visible { outline: 2px solid var(--icon); outline-offset: 2px; }
.vt-bureau .vt-panneau { padding: 34px 38px 0; }
/* Avec le script, un seul panneau à la fois ; sans lui, les dix se suivent. */
.vt[data-js] .vt-panneau:not(.actif) { display: none; }
.vt[data-js] .vt-panneaux { display: block; }
.vt:not([data-js]) .vt-panneaux { display: grid; gap: 18px; }
/*
 * LE DÉFILEMENT AUTOMATIQUE (assets/js/vitrine.js, data-auto). Tous les panneaux prennent la hauteur du plus haut
 * (--vt-haut, mesurée par le script) : la place en trop va entre le texte et la scène, et la page ne saute pas
 * quand l'onglet change seul. Le bouton de pause est celui des anciennes cartes : un rond de 30 px.
 */
.vt[data-js] .vt-panneaux { position: relative; }
.vt[data-auto] .vt-panneau { flex-direction: column; min-height: var(--vt-haut, 0px); }
.vt[data-auto] .vt-panneau.actif { display: flex; }
.vt[data-auto] .vt-texte { flex: 1 0 auto; }
.vt[data-auto] .vt-scene { flex: none; }
.vt-pause { position: absolute; z-index: 4; top: 22px; right: 24px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1.5px solid var(--line); border-radius: 50%; background: none; color: var(--bodyFg); cursor: pointer; }
.vt-pause svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vt-pause:focus-visible { outline: 2px solid var(--icon); outline-offset: 2px; }
.vt-surtitre { display: block; font: 700 12px/1 Nunito, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--icon); }
.vt-titre { font: 800 30px/1.15 Poppins, sans-serif; color: var(--bodyFg); margin: 10px 0 10px; letter-spacing: -.01em; }
.vt-titre em { font-style: normal; color: var(--icon); }
.vt-desc { font: 400 16px/1.6 Nunito, sans-serif; color: var(--bodyMuted); margin: 0; max-width: 62ch; }
.vt-qui { font: 600 13px/1.4 Nunito, sans-serif; color: var(--bodyMuted); opacity: .85; margin: 10px 0 0; }
/* Le nom de l'artiste mène à sa page d'artiste : un lien discret, de la couleur du texte. */
/* padding et marge opposés : la zone à toucher grandit (30 px de haut) sans déplacer la ligne. */
.vt-qui a { padding: 6px 0; margin: -6px 0; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.vt-qui a:hover, .vt-qui a:focus-visible { color: var(--bodyFg); }

/* ───────── La scène : capture en perspective, cellulaires devant ───────── */
.vt-scene { position: relative; perspective: 1600px; }
.vt-bureau .vt-scene { height: 430px; margin-top: 24px; }
.vt-nav { position: absolute; left: 0; top: 26px; width: 76%; border-radius: 12px; overflow: hidden; background: #0b0c0c; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 70px -30px rgba(0,0,0,.6); transform: rotateY(-16deg) rotateX(5deg); transform-origin: left center; }
.vt-nav.pale { opacity: .45; width: 64%; }
.vt-nav-barre { height: 24px; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: #161817; }
.vt-nav-barre i { width: 8px; height: 8px; border-radius: 50%; background: #333735; }
.vt-nav-barre span { margin-left: 10px; height: 14px; flex: 0 1 260px; border-radius: 4px; background: #222624; font: 400 9px/14px Nunito, sans-serif; color: rgba(255,255,255,.5); padding: 0 8px; overflow: hidden; white-space: nowrap; }
.vt-tel-cadre { position: absolute; width: 172px; padding: 6px; border-radius: 28px; background: #050606; border: 1px solid #2d302f; box-shadow: 0 34px 60px -24px rgba(0,0,0,.65); }
.vt-tel-cadre .vt-ecran { border-radius: 22px; }
.vt-solo .p1, .vt-res .p1 { right: 18px; top: 22px; transform: rotate(3deg); }
.vt-duo .p0 { right: 196px; top: 48px; transform: rotate(-4deg); }
.vt-duo .p1 { right: 12px; top: 14px; transform: rotate(4deg); }
.vt-trio .vt-tel-cadre { top: 34px; }
.vt-trio .q0 { left: calc(50% - 270px); top: 56px; transform: rotate(-6deg); }
.vt-trio .q1 { left: calc(50% - 86px); z-index: 1; }
.vt-trio .q2 { left: calc(50% + 98px); top: 56px; transform: rotate(6deg); }
.vt-etiquette { position: absolute; z-index: 3; font: 800 11px/1 Nunito, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px; border-radius: 99px; background: var(--body); border: 1px solid var(--icon); color: var(--icon); white-space: nowrap; }
.vt-bureau .vt-duo .e0 { right: 226px; top: 22px; }
.vt-bureau .vt-duo .e1 { right: 6px; top: 0; }
.vt-bureau .vt-res .e0 { left: 10px; top: 0; }
.vt-bureau .vt-res .e1 { right: 0; top: 4px; }
.vt-bureau .vt-trio .e1 { left: 50%; transform: translateX(-50%); top: 6px; }
/* Comme dans la maquette : une étiquette au-dessus de chacun des trois cellulaires, à l'ordinateur seulement. */
.vt-bureau .vt-trio .e0 { left: calc(50% - 262px); top: 10px; }
.vt-bureau .vt-trio .e2 { right: calc(50% - 262px); top: 10px; }

/* ───────── Écrans : mise à l'échelle ───────── */
.vt-ecran { position: relative; overflow: hidden; background: var(--vt-noir); container-type: inline-size; }
.vt-ecran-b { aspect-ratio: 16 / 10; }
.vt-ecran-t { aspect-ratio: 390 / 844; }
.vt-echelle { position: absolute; inset: 0; }
/* --u : un pixel du vrai portail, à l'échelle du cadre (ordinateur de 1280 px, téléphone de 390 px). Les écrans de
   src/vitrine-ecrans.css sont écrits en pixels du portail ; chacun de leurs « px » devient calc(N * var(--u)).
   Sans les unités de conteneur (très vieux navigateur), un écran d'une taille fixe et lisible. */
.vt-ecran-b .vt-echelle { --u: .55px; }
.vt-ecran-t .vt-echelle { --u: .44px; }
@supports (width: 1cqw) {
    .vt-ecran-b .vt-echelle { --u: calc(100cqw / 1280); }
    .vt-ecran-t .vt-echelle { --u: calc(100cqw / 390); }
}
.vt-echelle, .vt-echelle * { box-sizing: border-box; }
.vt-echelle img { display: block; max-width: none; }

/* ───────── Sur téléphone (vue-mobile, 900 px et moins) ───────── */
/*
 * LES PANNEAUX SE GLISSENT AU DOIGT (demande de Francis, 13 oct. 2026) : plus de pastilles à toucher au-dessus.
 * Les dix panneaux sont côte à côte dans une piste qui s'arrête sur chacun (scroll-snap) ; le script suit la piste
 * et la fait avancer seule. La piste déborde de 22 px de chaque côté (la marge de la page) : un panneau glisse
 * jusqu'au bord de l'écran. Sans script, les dix panneaux se suivent de haut en bas, comme avant.
 *   - overflow-y caché : un doigt qui monte ou descend fait défiler la PAGE, jamais la piste ;
 *   - 4 px en haut et en bas : la place du contour de focus d'un panneau, que la piste rognerait ;
 *   - ::after : l'espace d'après le dernier panneau, quel que soit le navigateur (tous ne comptent pas la marge
 *     intérieure de fin dans ce qui défile), pour que le dixième s'arrête à sa place. Un pixel repris par une marge
 *     négative, et non une largeur nulle : une boîte vide de largeur 0 peut être ignorée dans ce calcul.
 * DANS LA PAGE, LES ONGLETS ET LE BOUTON DE PAUSE VIENNENT AVANT LES PANNEAUX (un lecteur d'écran trouve le bouton
 * avant ce qui bouge, et la touche Tab va d'un onglet à son panneau) ; à l'écran, `order` les dessine dessous.
 */
.vt-mobile[data-js] { display: flex; flex-direction: column; }
.vt-mobile[data-js] .vt-panneaux { flex: none; display: flex; gap: 22px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin: -4px -22px; padding: 4px 22px; scroll-padding: 0 22px; }
.vt-mobile[data-js] .vt-panneaux::-webkit-scrollbar { display: none; }
.vt-mobile[data-js] .vt-panneaux::after { content: ""; flex: 0 0 1px; margin-left: -1px; }
/* Les dix sont affichés (la règle « un seul à la fois » est celle de l'ordinateur), tous de la hauteur du plus haut. */
.vt-mobile[data-js] .vt-panneau, .vt-mobile[data-js] .vt-panneau:not(.actif) { display: flex; flex-direction: column; flex: 0 0 100%; min-width: 0; min-height: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.vt-mobile[data-js] .vt-texte { flex: 1 0 auto; }
.vt-mobile[data-js] .vt-scene { flex: none; }
/*
 * SOUS LA PISTE : dix points et le bouton de pause. Les points SONT les onglets de l'ARIA (rôle, nom, flèches du
 * clavier) : seul leur dessin change. Le nom de chacun reste dans la page, hors de la vue. Zone à toucher de 26 px
 * sur 44 (le point, lui, fait 7 px) ; à 320 px de large elle rétrécit à 24 px plutôt que de déborder. Ni rayon ni
 * bordure sur le bouton lui-même : motion.js n'y voit ni « pastille » ni « ligne » (le point est un pseudo-élément,
 * qu'il ne balaie pas). Un point éteint garde un contraste de 3 pour 1 avec le fond, dans les deux thèmes.
 */
.vt-commandes { display: none; }
.vt-mobile[data-js] .vt-commandes { order: 1; display: flex; align-items: center; justify-content: center; margin-top: 7px; }
.vt-mobile .vt-liste { flex-direction: row; gap: 0; min-width: 0; }
.vt-mobile .vt-liste button { position: relative; flex: 0 1 auto; width: 26px; min-width: 0; height: 44px; padding: 0; gap: 0; justify-content: center; border-radius: 0; box-shadow: none; }
.vt-mobile .vt-liste button[aria-selected="true"] { background: none; box-shadow: none; }
.vt-mobile .vt-liste button::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 99px; background: var(--bodyMuted); opacity: .75; transition: width .25s, background-color .25s, opacity .25s; }
.vt-mobile .vt-liste button[aria-selected="true"]::before { width: 20px; background: var(--icon); opacity: 1; }
.vt-mobile .vt-liste button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vt-mobile .vt-pause { position: static; flex: none; margin-left: 6px; }
.vt-mobile .vt-panneau { padding: 22px 20px 0; border-radius: 20px; }
.vt-mobile .vt-titre { font-size: 23px; }
.vt-mobile .vt-desc { font-size: 15px; }
.vt-mobile .vt-scene { height: 340px; margin-top: 18px; perspective: 1000px; }
.vt-mobile .vt-tel-cadre { width: 190px; left: 50%; margin-left: -95px; top: 26px; transform: rotateY(-14deg) rotateX(4deg); }
.vt-mobile .vt-duo .vt-tel-cadre { width: 148px; margin-left: 0; transform: none; border-radius: 24px; padding: 5px; }
.vt-mobile .vt-duo .p0 { left: 2px; right: auto; top: 46px; transform: rotate(-4deg); }
.vt-mobile .vt-duo .p1 { left: auto; right: 2px; top: 26px; transform: rotate(4deg); }
.vt-mobile .vt-trio .vt-tel-cadre { width: 128px; margin-left: 0; transform: none; padding: 5px; border-radius: 22px; }
.vt-mobile .vt-trio .q0 { left: 0; top: 52px; transform: rotate(-6deg); }
.vt-mobile .vt-trio .q1 { left: 50%; margin-left: -64px; top: 30px; }
.vt-mobile .vt-trio .q2 { left: auto; right: 0; top: 52px; transform: rotate(6deg); }
.vt-mobile .vt-etiquette { font-size: 10px; padding: 6px 8px; }
.vt-mobile .vt-duo .e0 { left: 4px; top: 16px; }
.vt-mobile .vt-duo .e1 { right: 4px; top: 0; }
.vt-mobile .vt-res .e1, .vt-mobile .vt-trio .e1 { left: 50%; transform: translateX(-50%); top: 0; }

@media (max-width: 1180px) {
    .vt-bureau { grid-template-columns: 240px minmax(0, 1fr); gap: 24px; }
    .vt-bureau .vt-scene { height: 380px; }
    .vt-bureau .vt-tel-cadre { width: 150px; }
    .vt-bureau .vt-duo .p0 { right: 170px; }
    .vt-bureau .vt-duo .e0 { right: 196px; }
    /* Trois cellulaires de 150 px : resserrés, sinon celui de gauche sort du panneau sous 960 px. */
    .vt-bureau .vt-trio .q0 { left: calc(50% - 236px); }
    .vt-bureau .vt-trio .q1 { left: calc(50% - 75px); }
    .vt-bureau .vt-trio .q2 { left: calc(50% + 86px); }
    .vt-bureau .vt-trio .e0 { left: calc(50% - 228px); }
    .vt-bureau .vt-trio .e2 { right: calc(50% - 228px); }
}
/* Sous 390 px (la largeur de la maquette), les deux étiquettes d'un onglet à deux cellulaires se recouvraient
   jusqu'à cacher des lettres : la première descend d'un cran, et son cellulaire avec elle. À 390 px et plus, rien
   ne bouge. */
@media (max-width: 389px) {
    .vt-mobile .vt-duo .e0 { top: 28px; }
    .vt-mobile .vt-duo .p0 { top: 54px; }
}
@media (prefers-reduced-motion: reduce) {
    .vt-liste button, .vt-mobile .vt-liste button::before { transition: none; }
}

/* ═════════ LES ÉCRANS DU PORTAIL, D'APRÈS LES VRAIES CAPTURES DE LA MAQUETTE ═════════
 *
 * Maquette retenue par Francis (session Cloud, artefact « Cartes Services LML ») : chaque onglet montre de vraies
 * captures du portail. Ces écrans les reproduisent en HTML, avec les mesures du code du portail (classes Tailwind de
 * src/components/ui/maquette.tsx, layout/Sidebar.tsx, etc.), pour que l'artiste choisi dans l'administration s'y
 * affiche sans refaire de capture.
 *
 * TOUT EST EN PIXELS DU VRAI PORTAIL : src/construire-vitrine.cjs convertit chaque « px » à l'échelle du cadre.
 * Ne jamais écrire ici une mesure en em ou en rem.
 */

/* ───────── Cadre commun ───────── */
.vp { position: relative; display: flex; width: 100%; height: 100%; overflow: hidden; background: #131313; color: #fff; font: 400 calc(16 * var(--u))/1.5 Nunito, ui-sans-serif, system-ui, sans-serif; text-align: left; -webkit-font-smoothing: antialiased; }
.vp *, .vp *::before, .vp *::after { box-sizing: border-box; }
.vp img { display: block; max-width: none; }
.vp svg { display: block; flex: none; }
.vp svg.tr { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vp svg.pl { fill: currentColor; }
.vp-pop { font-family: Poppins, Nunito, sans-serif; }
.vp-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.vp-g { color: rgba(255,255,255,.58); }
.vp-t { color: #0df8c0; }
.vp-vide { background: linear-gradient(135deg, #1d7963, #0b2e26 55%, #033e30); }

/* La barre latérale (layout/Sidebar.tsx) */
.vp-cote { display: flex; flex-direction: column; gap: calc(30 * var(--u)); width: calc(252 * var(--u)); flex: none; padding: calc(24 * var(--u)) 0 calc(20 * var(--u)); border-right: calc(1 * var(--u)) solid rgba(255,255,255,.1); background: #011913; }
.vp-logo { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: 0 calc(22 * var(--u)); }
.vp-logo img { width: calc(32 * var(--u)); height: auto; }
.vp-logo span { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); font-weight: 300; text-transform: uppercase; letter-spacing: .3em; white-space: nowrap; color: #0df8c0; }
.vp-nav { display: flex; flex-direction: column; gap: calc(2 * var(--u)); padding: 0 calc(12 * var(--u)); }
.vp-nav > span { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(11 * var(--u)) calc(14 * var(--u)); border-radius: calc(11 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); font-weight: 600; color: rgba(255,255,255,.6); }
.vp-nav > span.on { background: #0df8c0; font-weight: 700; color: #131313; }
.vp-nav svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.vp-moi { display: flex; align-items: center; gap: calc(12 * var(--u)); margin-top: auto; padding: calc(16 * var(--u)) calc(22 * var(--u)) 0; border-top: calc(1 * var(--u)) solid rgba(255,255,255,.1); }
.vp-moi .av { width: calc(36 * var(--u)); height: calc(36 * var(--u)); flex: none; border-radius: 50%; object-fit: cover; }
.vp-moi span.av { display: flex; align-items: center; justify-content: center; background: #0df8c0; font-size: calc(14 * var(--u)); font-weight: 800; color: #131313; }
.vp-moi div { min-width: 0; flex: 1; }
.vp-moi b, .vp-moi small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vp-moi b { font-size: calc(13 * var(--u)); line-height: 1.25; font-weight: 700; }
.vp-moi small { margin-top: calc(3 * var(--u)); font-size: calc(11.5 * var(--u)); line-height: 1.25; color: rgba(255,255,255,.5); }
.vp-moi svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); margin: calc(4 * var(--u)); stroke-width: 2; color: rgba(255,255,255,.5); }

/* La page : en-tête (EnTetePage) et corps (CorpsPage) */
.vp-page { position: relative; display: flex; flex: 1; min-width: 0; flex-direction: column; }
.vp-tete { display: flex; align-items: center; justify-content: space-between; gap: calc(24 * var(--u)); flex: none; padding: calc(24 * var(--u)) calc(40 * var(--u)); border-bottom: calc(1 * var(--u)) solid rgba(255,255,255,.14); }
.vp-tete .st { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); font-weight: 600; text-transform: uppercase; letter-spacing: .2em; color: #0df8c0; }
.vp-tete .h { margin-top: calc(9 * var(--u)); font: 800 calc(30 * var(--u))/1.15 Poppins, Nunito, sans-serif; letter-spacing: -.015em; white-space: nowrap; }
.vp-tete .act { display: flex; align-items: center; gap: calc(12 * var(--u)); flex: none; }
.vp-corps { display: flex; flex-direction: column; gap: calc(22 * var(--u)); padding: calc(32 * var(--u)) calc(40 * var(--u)) calc(48 * var(--u)); }

/* Boutons (BOUTON_PLEIN, _CONTOUR, _PETIT, _SUR_ACCENT) et pastilles */
.vp-b { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); flex: none; padding: calc(14 * var(--u)) calc(24 * var(--u)); border-radius: calc(999 * var(--u)); background: #0df8c0; font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); font-weight: 700; white-space: nowrap; color: #131313; }
.vp-b.c { padding: calc(13 * var(--u)) calc(20 * var(--u)); border: calc(1.5 * var(--u)) solid rgba(255,255,255,.3); background: none; font-weight: 600; color: #fff; }
.vp-b.p { padding: calc(10 * var(--u)) calc(18 * var(--u)); font-size: calc(13 * var(--u)); line-height: calc(19.5 * var(--u)); }
.vp-b.c.p { padding: calc(9 * var(--u)) calc(15 * var(--u)); }
.vp-b.n { padding: calc(12 * var(--u)) calc(18 * var(--u)); background: #131313; font-size: calc(13 * var(--u)); line-height: calc(19.5 * var(--u)); color: #fff; }
.vp-b svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); stroke-width: 2; }
.vp-p { display: inline-block; flex: none; padding: calc(7 * var(--u)) calc(13 * var(--u)); border-radius: calc(999 * var(--u)); background: rgba(13,248,192,.16); font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); font-weight: 700; white-space: nowrap; color: #0df8c0; }
.vp-p.a { background: rgba(255,255,255,.12); color: #fff; }
.vp-p.k { padding: calc(4 * var(--u)) calc(10 * var(--u)); font-size: calc(11.5 * var(--u)); line-height: calc(17.25 * var(--u)); }

/* Cartes et textes (CARTE, TITRE_CARTE, TITRE_SECTION, CLE, VALEUR, ETIQUETTE_CARTE, CHIFFRE) */
.vp-c { border: calc(1 * var(--u)) solid rgba(255,255,255,.14); border-radius: calc(18 * var(--u)); background: #1a1a1a; }
.vp-tc { font-size: calc(19 * var(--u)); line-height: 1.25; font-weight: 700; }
.vp-ts { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); font-weight: 600; text-transform: uppercase; letter-spacing: .2em; color: #0df8c0; }
.vp-cle { font-size: calc(11.5 * var(--u)); line-height: 1; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.58); }
.vp-val { margin-top: calc(7 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.4; }
.vp-et { font-size: calc(12.5 * var(--u)); line-height: calc(18.75 * var(--u)); font-weight: 600; text-transform: uppercase; letter-spacing: .11em; color: rgba(255,255,255,.58); }
.vp-ch { font: 800 calc(34 * var(--u))/1 Poppins, Nunito, sans-serif; }
.vp-bar { height: calc(6 * var(--u)); border-radius: calc(999 * var(--u)); background: rgba(255,255,255,.12); }
.vp-bar i { display: block; height: 100%; border-radius: calc(999 * var(--u)); background: #0df8c0; }

/* La bulle du support, en bas à droite de chaque page */
.vp-bulle { position: absolute; right: calc(24 * var(--u)); bottom: calc(24 * var(--u)); z-index: 6; display: flex; align-items: center; justify-content: center; width: calc(56 * var(--u)); height: calc(56 * var(--u)); border-radius: 50%; background: #0df8c0; box-shadow: 0 calc(10 * var(--u)) calc(25 * var(--u)) rgba(0,0,0,.45); color: #131313; }
.vp-bulle svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); stroke-width: 2; }

/* ───────── Tableau de bord ───────── */
.vp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(16 * var(--u)); }
.vp-k { padding: calc(22 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u)); }
.vp-k .vp-ch { margin: calc(14 * var(--u)) 0 calc(8 * var(--u)); white-space: nowrap; }
.vp-k small { display: block; font-size: calc(13 * var(--u)); line-height: calc(19.5 * var(--u)); font-weight: 600; color: rgba(255,255,255,.58); }
.vp-k.acc { border-color: #0df8c0; background: #0df8c0; color: #131313; }
.vp-k.acc .vp-et, .vp-k.acc small { color: #011913; }
.vp-k.acc .vp-b { margin-top: calc(12 * var(--u)); }
.vp-2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: calc(16 * var(--u)); }
.vp-bloc { padding: calc(26 * var(--u)) calc(28 * var(--u)) calc(28 * var(--u)); }
.vp-bt { display: flex; align-items: baseline; justify-content: space-between; gap: calc(16 * var(--u)); margin-bottom: calc(26 * var(--u)); }
.vp-bt small { font-size: calc(13 * var(--u)); color: rgba(255,255,255,.58); }
.vp-gr { display: flex; align-items: stretch; gap: calc(5 * var(--u)); height: calc(190 * var(--u)); }
.vp-gr > span { display: flex; flex: 1; min-width: 0; flex-direction: column; justify-content: flex-end; }
.vp-gr em { flex: none; height: calc(16 * var(--u)); overflow: hidden; font-style: normal; font-size: calc(11.5 * var(--u)); line-height: 1; text-align: center; white-space: nowrap; color: rgba(255,255,255,.58); }
.vp-gr i { display: block; flex: none; width: 100%; border-radius: calc(5 * var(--u)) calc(5 * var(--u)) calc(2 * var(--u)) calc(2 * var(--u)); background: #0aba90; }
.vp-gr i.h { background: #0df8c0; }
.vp-mois { display: flex; gap: calc(5 * var(--u)); margin-top: calc(12 * var(--u)); font-size: calc(11.5 * var(--u)); line-height: calc(17.25 * var(--u)); color: rgba(255,255,255,.5); }
.vp-mois span { flex: 1; text-align: center; }
.vp-top { margin-top: calc(28 * var(--u)); padding-top: calc(24 * var(--u)); border-top: calc(1 * var(--u)) solid rgba(255,255,255,.14); }
.vp-top .vp-tc { margin-bottom: calc(20 * var(--u)); }
.vp-top .r { display: flex; align-items: center; gap: calc(14 * var(--u)); margin-top: calc(16 * var(--u)); }
.vp-top .po { width: calc(36 * var(--u)); height: calc(36 * var(--u)); flex: none; border-radius: calc(10 * var(--u)); object-fit: cover; }
.vp-top .tx { min-width: 0; flex: 1; }
.vp-top .l { display: flex; align-items: baseline; justify-content: space-between; gap: calc(12 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
.vp-top .l b { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.vp-top .l span { flex: none; color: rgba(255,255,255,.58); }
.vp-top .vp-bar { margin-top: calc(6 * var(--u)); }
.vp-rep .vp-tc { margin-bottom: calc(24 * var(--u)); }
.vp-rep .r + .r { margin-top: calc(18 * var(--u)); }
.vp-rep .l { display: flex; justify-content: space-between; margin-bottom: calc(9 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); font-weight: 600; }
.vp-rep .vp-bar { height: calc(8 * var(--u)); }

/* ───────── Sorties ───────── */
.vp-filtres { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.vp-filtres > small { margin-right: calc(2 * var(--u)); font-size: calc(14 * var(--u)); color: rgba(255,255,255,.58); }
.vp-vues { display: flex; gap: calc(8 * var(--u)); margin-left: auto; }
.vp-vues span { display: flex; align-items: center; justify-content: center; width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: calc(8 * var(--u)); background: rgba(255,255,255,.06); color: rgba(255,255,255,.58); }
.vp-vues span.on { background: rgba(13,248,192,.16); color: #0df8c0; }
.vp-vues svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); stroke-width: 2; }
.vp-sect > .vp-ts { margin-bottom: calc(14 * var(--u)); }
.vp-ligne { display: flex; align-items: center; gap: calc(16 * var(--u)); padding: calc(16 * var(--u)) calc(27 * var(--u)); border-top: calc(1 * var(--u)) solid rgba(255,255,255,.14); }
.vp-ligne:first-child { border-top: 0; }
.vp-ligne .po { width: calc(52 * var(--u)); height: calc(52 * var(--u)); flex: none; border-radius: calc(9 * var(--u)); object-fit: cover; }
.vp-ligne .mi { width: calc(92 * var(--u)); height: calc(52 * var(--u)); flex: none; border-radius: calc(9 * var(--u)); object-fit: cover; }
.vp-ligne .tx { min-width: 0; flex: 1; }
.vp-ligne b { display: block; overflow: hidden; font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u)); font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.vp-ligne small { display: block; margin-top: calc(4 * var(--u)); overflow: hidden; font-size: calc(13 * var(--u)); line-height: calc(17 * var(--u)); white-space: nowrap; text-overflow: ellipsis; color: rgba(255,255,255,.58); }

/* ═════════ LES AUTRES PAGES DU PORTAIL SUR ORDINATEUR (en pixels du vrai portail) ═════════ */

/* ───────── Liens intelligents : la liste (liens-intelligents/page.tsx) ───────── */
.vp-lf { display: flex; align-items: center; gap: calc(16 * var(--u)); padding: calc(16 * var(--u)) calc(20 * var(--u)); }
.vp-lf .tx { min-width: 0; flex: 1; }
.vp-lf .tt { font: 700 calc(15 * var(--u))/calc(22.5 * var(--u)) Poppins, Nunito, sans-serif; }
.vp-lf p { margin: calc(4 * var(--u)) 0 0; font-size: calc(13 * var(--u)); line-height: 1.625; color: rgba(255,255,255,.55); }
.vp-lf .ad { display: block; margin-top: calc(8 * var(--u)); font-size: calc(12.5 * var(--u)); line-height: calc(18.75 * var(--u)); color: #0df8c0; }
.vp-lf .nb { font: 800 calc(34 * var(--u))/1 Poppins, Nunito, sans-serif; color: #0df8c0; }
.vp-note { margin: 0; font-size: calc(13 * var(--u)); line-height: 1.625; color: rgba(255,255,255,.5); }
.vp-liens { display: grid; gap: calc(12 * var(--u)); }
.vp-lien { display: flex; align-items: center; gap: calc(20 * var(--u)); min-width: 0; padding: calc(16 * var(--u)) calc(20 * var(--u)); }
.vp-lien .po { width: calc(68 * var(--u)); height: calc(68 * var(--u)); flex: none; border-radius: calc(10 * var(--u)); object-fit: cover; }
.vp-lien .tx { min-width: 0; flex: 1 1 calc(256 * var(--u)); }
.vp-lien .ti { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.vp-lien .ti b { overflow: hidden; font: 700 calc(19 * var(--u))/calc(28.5 * var(--u)) Poppins, Nunito, sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.vp-lien .ar { margin-top: calc(2 * var(--u)); font-size: calc(13 * var(--u)); line-height: calc(19.5 * var(--u)); color: rgba(255,255,255,.5); }
.vp-lien .ad { display: block; margin-top: calc(8 * var(--u)); overflow: hidden; font-size: calc(12.5 * var(--u)); line-height: calc(18.75 * var(--u)); white-space: nowrap; text-overflow: ellipsis; color: #0df8c0; }
.vp-lien .dr { display: flex; flex: none; align-items: center; justify-content: flex-end; gap: calc(24 * var(--u)); }
.vp-st { display: flex; gap: calc(24 * var(--u)); flex: none; text-align: center; }
.vp-st b { display: block; font: 800 calc(26 * var(--u))/calc(39 * var(--u)) Poppins, Nunito, sans-serif; }
.vp-st small { display: block; font-size: calc(11.5 * var(--u)); line-height: calc(17.25 * var(--u)); text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; color: rgba(255,255,255,.58); }
.vp-lien .bt { display: flex; align-items: center; gap: calc(8 * var(--u)); flex: none; }

/* ───────── Liens intelligents : la fiche d'un lien (liens-intelligents/[id]/page.tsx) ───────── */
.vp-fil { margin: 0; font-size: calc(13 * var(--u)); line-height: calc(19.5 * var(--u)); color: rgba(255,255,255,.58); }
.vp-ld { display: flex; align-items: center; gap: calc(24 * var(--u)); padding: calc(24 * var(--u)) calc(28 * var(--u)); }
.vp-ld .po { width: calc(80 * var(--u)); height: calc(80 * var(--u)); flex: none; border-radius: calc(10 * var(--u)); object-fit: cover; }
.vp-ld .tx { min-width: 0; flex: 1; }
.vp-ld .ad { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--u)); }
.vp-ld .ad > span:first-child { font-size: calc(14 * var(--u)); line-height: calc(21 * var(--u)); color: #0df8c0; }
.vp-ld p { margin: calc(6 * var(--u)) 0 0; font-size: calc(13 * var(--u)); line-height: calc(19.5 * var(--u)); color: rgba(255,255,255,.5); }
.vp-ld .vp-st { gap: calc(32 * var(--u)); }
.vp-vis { padding: calc(26 * var(--u)) calc(28 * var(--u)) calc(28 * var(--u)); }
.vp-vis > p { margin: calc(4 * var(--u)) 0 0; font-size: calc(13 * var(--u)); line-height: calc(19.5 * var(--u)); color: rgba(255,255,255,.5); }
.vp-vis .col { display: grid; grid-template-columns: 1fr 1fr; gap: calc(32 * var(--u)); margin-top: calc(20 * var(--u)); }
.vp-vis .lb { margin: 0 0 calc(12 * var(--u)); font-size: calc(11.5 * var(--u)); line-height: calc(17.25 * var(--u)); text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.58); }
.vp-vis .ln { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.vp-vis .ln + .ln { margin-top: calc(10 * var(--u)); }
.vp-vis .ln svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); fill: rgba(255,255,255,.5); }
.vp-vis .ln .nm { width: calc(120 * var(--u)); flex: none; overflow: hidden; font-size: calc(13 * var(--u)); line-height: calc(19.5 * var(--u)); white-space: nowrap; text-overflow: ellipsis; color: rgba(255,255,255,.7); }
.vp-vis .ln .vp-bar { flex: 1; background: rgba(255,255,255,.08); }
.vp-vis .ln .nb { width: calc(72 * var(--u)); flex: none; font-size: calc(13 * var(--u)); line-height: calc(19.5 * var(--u)); font-weight: 600; text-align: right; }
.vp-vis .ln .nb small { font-size: calc(11.5 * var(--u)); font-weight: 400; color: rgba(255,255,255,.58); }
.vp-vis .pays { grid-column: 1 / -1; }
.vp-vis .etq { margin-top: calc(28 * var(--u)); padding-top: calc(26 * var(--u)); border-top: calc(1 * var(--u)) solid rgba(255,255,255,.1); }
.vp-vis .etq p { margin: 0 0 calc(14 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.625; color: rgba(255,255,255,.58); }
.vp-vis .etq .sai { display: flex; gap: calc(8 * var(--u)); }
.vp-champ { flex: 1; padding: calc(11 * var(--u)) calc(16 * var(--u)); border: calc(1 * var(--u)) solid rgba(255,255,255,.14); border-radius: calc(10 * var(--u)); background: #131313; font-size: calc(14 * var(--u)); line-height: calc(21 * var(--u)); color: rgba(255,255,255,.4); }

/* ───────── EPK : le lien privé et les médias ───────── */
.vp-corps.g32 { gap: calc(32 * var(--u)); }
.vp-epk1 { display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--u)); padding: calc(22 * var(--u)) calc(28 * var(--u)) calc(26 * var(--u)); border-radius: calc(18 * var(--u)); background: #0df8c0; color: #131313; }
.vp-epk1 .lb { font-size: calc(11.5 * var(--u)); line-height: calc(17 * var(--u)); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: #011913; }
.vp-epk1 .ad { margin-top: calc(8 * var(--u)); font-size: calc(19 * var(--u)); line-height: calc(26 * var(--u)); font-weight: 700; }
.vp-epk1 .bt { display: flex; gap: calc(12 * var(--u)); flex: none; }
.vp-avis { padding: calc(16 * var(--u)) calc(20 * var(--u)); border: calc(1 * var(--u)) solid rgba(13,248,192,.3); border-radius: calc(14 * var(--u)); background: rgba(13,248,192,.06); font-size: calc(14 * var(--u)); line-height: calc(21 * var(--u)); font-weight: 600; }
.vp-med { padding: calc(26 * var(--u)) calc(28 * var(--u)) calc(28 * var(--u)); }
.vp-med .ht { display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--u)); }
.vp-med > p { margin: calc(5 * var(--u)) 0 0; font-size: calc(13 * var(--u)); line-height: 1.625; color: rgba(255,255,255,.58); }
.vp-med .ch { display: flex; gap: calc(40 * var(--u)); margin-top: calc(18 * var(--u)); }
.vp-med > p.nt { margin-top: calc(18 * var(--u)); }
.vp-med .ch b { display: block; margin-top: calc(10 * var(--u)); font: 800 calc(34 * var(--u))/1 Poppins, Nunito, sans-serif; }
.vp-med .cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 calc(24 * var(--u)); margin-top: calc(13 * var(--u)); }
.vp-med .cats span { display: flex; align-items: baseline; justify-content: space-between; padding: calc(12 * var(--u)) 0; border-bottom: calc(1 * var(--u)) solid rgba(255,255,255,.14); font-size: calc(14 * var(--u)); line-height: calc(19 * var(--u)); color: rgba(255,255,255,.58); }
.vp-med .cats b { font-size: calc(15 * var(--u)); font-weight: 700; color: #fff; }
.vp-med .ann { margin-top: calc(20 * var(--u)); padding-top: calc(23 * var(--u)); border-top: calc(1 * var(--u)) solid rgba(255,255,255,.14); }
.vp-med .ann p { margin: calc(12 * var(--u)) 0 0; font-size: calc(15 * var(--u)); line-height: calc(22 * var(--u)); color: rgba(255,255,255,.88); }

/* ───────── La fiche d'un vidéoclip ───────── */
.vp-retour { flex: none; padding: calc(14 * var(--u)) calc(40 * var(--u)); border-bottom: calc(1 * var(--u)) solid rgba(255,255,255,.14); font-size: calc(14 * var(--u)); line-height: calc(23 * var(--u)); font-weight: 600; color: #0df8c0; }
.vp-heros { display: flex; align-items: center; gap: calc(28 * var(--u)); flex: none; padding: calc(37 * var(--u)) calc(40 * var(--u)) calc(33 * var(--u)); background: #021a14; }
.vp-heros .vg { position: relative; width: calc(420 * var(--u)); height: calc(236 * var(--u)); flex: none; overflow: hidden; border-radius: calc(18 * var(--u)); background: #000; }
.vp-heros .vg > img, .vp-heros .vg > span.vp-vide { width: 100%; height: 100%; object-fit: cover; }
.vp-heros .jouer { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: calc(64 * var(--u)); height: calc(64 * var(--u)); margin: calc(-32 * var(--u)) 0 0 calc(-32 * var(--u)); border-radius: 50%; background: #0df8c0; color: #131313; }
.vp-heros .jouer svg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); margin-left: calc(3 * var(--u)); }
.vp-heros .mt { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(21 * var(--u)); color: rgba(255,255,255,.58); }
.vp-heros .tx { align-self: flex-end; padding-bottom: calc(6 * var(--u)); }
.vp-heros .ti { margin-top: calc(14 * var(--u)); font: 800 calc(56 * var(--u))/1.05 Poppins, Nunito, sans-serif; letter-spacing: -.01em; }
.vp-heros .ar { margin-top: calc(12 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(28 * var(--u)); color: rgba(255,255,255,.58); }
.vp-fiche { display: grid; grid-template-columns: 1.3fr 1fr; gap: calc(20 * var(--u)); align-items: start; padding: calc(27 * var(--u)) calc(40 * var(--u)) calc(40 * var(--u)); }
.vp-fiche .cl { display: grid; gap: calc(20 * var(--u)); }
.vp-fc { padding: calc(26 * var(--u)) calc(28 * var(--u)) calc(28 * var(--u)); }
.vp-fc .champs { display: grid; grid-template-columns: 1fr 1fr; gap: calc(20 * var(--u)) calc(20 * var(--u)); margin-top: calc(21 * var(--u)); }
.vp-fc .champs.un { grid-template-columns: 1fr; }
.vp-fc .pf { margin-top: calc(22 * var(--u)); padding-top: calc(20 * var(--u)); border-top: calc(1 * var(--u)) solid rgba(255,255,255,.14); }
.vp-puces { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); margin-top: calc(10 * var(--u)); }
.vp-puces span { padding: calc(3 * var(--u)) calc(13 * var(--u)); border: calc(1 * var(--u)) solid rgba(255,255,255,.2); border-radius: calc(999 * var(--u)); font-size: calc(13 * var(--u)); line-height: calc(19.5 * var(--u)); color: rgba(255,255,255,.85); }
.vp-ext { display: flex; align-items: center; justify-content: space-between; margin-top: calc(20 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)); border: calc(1 * var(--u)) solid rgba(255,255,255,.14); border-radius: calc(10 * var(--u)); background: #131313; font-size: calc(15 * var(--u)); line-height: calc(21 * var(--u)); font-weight: 600; }
.vp-ext svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); stroke-width: 2; color: #0df8c0; }

/* ───────── Fenêtres par-dessus la page (visuels, transfert de catalogue) ───────── */
.vp-voile { position: absolute; inset: 0; z-index: 7; background: rgba(0,0,0,.72); -webkit-backdrop-filter: blur(calc(6 * var(--u))); backdrop-filter: blur(calc(6 * var(--u))); }
.vp-modale { position: absolute; z-index: 8; left: 50%; top: calc(40 * var(--u)); bottom: calc(40 * var(--u)); display: flex; flex-direction: column; width: calc(672 * var(--u)); margin-left: calc(-336 * var(--u)); overflow: hidden; border: calc(1 * var(--u)) solid rgba(255,255,255,.14); border-radius: calc(18 * var(--u)); background: #1a1a1a; box-shadow: 0 calc(25 * var(--u)) calc(50 * var(--u)) rgba(0,0,0,.5); }
.vp-modale .mt { position: relative; flex: none; padding: calc(26 * var(--u)) calc(28 * var(--u)) calc(19 * var(--u)); border-bottom: calc(1 * var(--u)) solid rgba(255,255,255,.14); }
.vp-modale .mt b { display: block; font-size: calc(20 * var(--u)); line-height: calc(25 * var(--u)); font-weight: 700; }
.vp-modale .mt p { margin: calc(6 * var(--u)) 0 0; font-size: calc(13 * var(--u)); line-height: calc(19.5 * var(--u)); color: rgba(255,255,255,.58); }
.vp-modale .mt > svg { position: absolute; right: calc(26 * var(--u)); top: calc(26 * var(--u)); width: calc(24 * var(--u)); height: calc(24 * var(--u)); stroke-width: 2; color: rgba(255,255,255,.58); }
.vp-modale .mc { flex: 1; min-height: 0; overflow: hidden; padding: calc(24 * var(--u)) calc(28 * var(--u)) 0; }
.vp-seg { display: flex; gap: calc(10 * var(--u)); }
.vp-seg span { padding: calc(6 * var(--u)) calc(16 * var(--u)); border: calc(1 * var(--u)) solid rgba(255,255,255,.2); border-radius: calc(999 * var(--u)); font-size: calc(13 * var(--u)); line-height: calc(19.5 * var(--u)); font-weight: 600; color: rgba(255,255,255,.8); }
.vp-seg span.on { border-color: #0df8c0; background: #0df8c0; color: #131313; }
.vp-formats { display: grid; grid-template-columns: 1fr 1fr; gap: calc(20 * var(--u)); margin-top: calc(20 * var(--u)); }
.vp-format { padding: calc(16 * var(--u)); border: calc(1 * var(--u)) solid rgba(255,255,255,.14); border-radius: calc(14 * var(--u)); background: rgba(255,255,255,.02); }
.vp-format .ft { display: flex; align-items: baseline; justify-content: space-between; }
.vp-format .ft b { font-size: calc(15 * var(--u)); line-height: calc(22 * var(--u)); font-weight: 700; }
.vp-format .ft small { font-size: calc(12 * var(--u)); color: rgba(255,255,255,.58); }
.vp-format > p { margin: calc(1 * var(--u)) 0 calc(14 * var(--u)); font-size: calc(13 * var(--u)); line-height: calc(19.5 * var(--u)); color: rgba(255,255,255,.58); }
.vp-format .vp-b { margin-top: calc(14 * var(--u)); }

/* Le visuel « Nouvelle sortie » que le portail fabrique. Il est son propre conteneur : à l'intérieur, les mesures
   sont en cqw (centièmes de SA largeur), jamais en px. */
.vp-visuel { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; overflow: hidden; container-type: inline-size; border-radius: 4%/4%; background: #0e0b12; color: #fff; text-align: center; }
.vp-visuel.story { aspect-ratio: 9 / 16; border-radius: 4%/2.25%; }
.vp-visuel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(95% 70% at 30% 18%, var(--c, #0df8c0), transparent 72%); opacity: .42; }
.vp-visuel .gt { position: absolute; top: 0; right: 4cqw; display: flex; align-items: flex-start; gap: 2.6cqw; opacity: .5; }
.vp-visuel .gt i { display: block; width: 3.4cqw; border-radius: 0 0 3cqw 3cqw; background: rgba(0,0,0,.55); }
.vp-visuel > * { position: relative; }
/* Les cqw se mesurent sur le visuel pour ses ENFANTS seulement : posés sur le visuel lui-même, ils suivraient le cadre. */
.vp-visuel .ns { display: flex; align-items: center; gap: 1.4cqw; margin-top: 6cqw; font: 800 3cqw/1 Poppins, Nunito, sans-serif; letter-spacing: .24em; text-transform: uppercase; }
.vp-visuel .ns svg { width: 4.2cqw; height: 4.2cqw; stroke-width: 2; }
.vp-visuel .pc { width: 46cqw; height: 46cqw; margin-top: 1.6cqw; border: 1.3cqw solid #fff; object-fit: cover; }
.vp-visuel.story .pc { width: 66cqw; height: 66cqw; margin-top: 4.5cqw; }
.vp-visuel .tt { margin-top: 2.2cqw; font: 800 5.2cqw/1.1 Poppins, Nunito, sans-serif; }
.vp-visuel.story .tt { margin-top: 4.5cqw; font-size: 6.6cqw; }
.vp-visuel .ar { margin-top: 1.2cqw; font-size: 2.7cqw; line-height: 1.2; color: var(--c, #0df8c0); filter: brightness(1.5) saturate(.9); }
.vp-visuel.story .ar { font-size: 3.6cqw; }
.vp-visuel .md { margin-top: 1.7cqw; font-size: 2cqw; line-height: 1; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.vp-visuel.story .md { margin-top: 4cqw; font-size: 2.5cqw; }
.vp-visuel .pl { display: flex; align-items: center; gap: 3.4cqw; margin-top: 1.9cqw; padding: 1.8cqw 4cqw; border-radius: 99cqw; background: var(--c, #0df8c0); box-shadow: inset 0 0 0 99cqw rgba(0,0,0,.45); }
.vp-visuel .pl svg { width: 4.4cqw; height: 4.4cqw; fill: #fff; }
.vp-visuel.story .pl svg { width: 5.4cqw; height: 5.4cqw; }
.vp-visuel .dp { margin-top: 3.2cqw; font-size: 1.6cqw; line-height: 1; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.vp-visuel.story .dp { margin-top: 8cqw; font-size: 2cqw; }
.vp-visuel .lg { width: 4.4cqw; height: auto; margin-top: 1.2cqw; opacity: .75; }
.vp-visuel.story .lg { width: 5.4cqw; }
.vp-visuel .ur { margin-top: 1cqw; font-size: 1.6cqw; line-height: 1; letter-spacing: .08em; color: rgba(255,255,255,.6); }
.vp-visuel.story .ur { font-size: 2cqw; }

/* Le transfert de catalogue */
.vp-info { display: flex; gap: calc(14 * var(--u)); padding: calc(16 * var(--u)) calc(20 * var(--u)); border: calc(1 * var(--u)) solid rgba(13,248,192,.2); border-radius: calc(12 * var(--u)); background: rgba(13,248,192,.06); }
.vp-info > svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); margin-top: calc(2 * var(--u)); color: #0df8c0; }
.vp-info b { display: block; font-size: calc(14 * var(--u)); line-height: calc(21 * var(--u)); font-weight: 600; }
.vp-info p { margin: calc(6 * var(--u)) 0 0; font-size: calc(12.5 * var(--u)); line-height: calc(16.5 * var(--u)); color: rgba(255,255,255,.58); }
.vp-info p + p { margin-top: calc(9 * var(--u)); color: #eab308; }
.vp-qui { display: flex; align-items: center; gap: calc(16 * var(--u)); margin-top: calc(24 * var(--u)); padding: calc(16 * var(--u)); border: calc(1 * var(--u)) solid rgba(255,255,255,.14); border-radius: calc(18 * var(--u)); background: #131313; }
.vp-qui .av { width: calc(56 * var(--u)); height: calc(56 * var(--u)); flex: none; border: calc(2 * var(--u)) solid #1d7963; border-radius: 50%; object-fit: cover; }
.vp-qui span.av { display: flex; align-items: center; justify-content: center; background: #033e30; font: 800 calc(20 * var(--u))/1 Poppins, Nunito, sans-serif; }
.vp-qui b { flex: 1; font-size: calc(15 * var(--u)); font-weight: 700; }
.vp-qui small { font-size: calc(13 * var(--u)); text-decoration: underline; color: rgba(255,255,255,.58); }
.vp-trouve { display: flex; justify-content: space-between; margin: calc(20 * var(--u)) 0 calc(16 * var(--u)); font-size: calc(13 * var(--u)); line-height: calc(19.5 * var(--u)); color: rgba(255,255,255,.58); }
.vp-trouve b { font-weight: 600; color: #0df8c0; }
.vp-tr { display: flex; align-items: center; gap: calc(12 * var(--u)); margin-top: calc(9 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border: calc(1 * var(--u)) solid rgba(255,255,255,.14); border-radius: calc(14 * var(--u)); background: #131313; }
.vp-tr.on { border-color: rgba(13,248,192,.4); background: rgba(13,248,192,.06); }
.vp-tr .cs { display: flex; align-items: center; justify-content: center; width: calc(20 * var(--u)); height: calc(20 * var(--u)); flex: none; border: calc(1.5 * var(--u)) solid rgba(255,255,255,.3); border-radius: calc(5 * var(--u)); }
.vp-tr.on .cs { border-color: #0df8c0; background: #0df8c0; color: #131313; }
.vp-tr .cs svg { display: none; width: calc(14 * var(--u)); height: calc(14 * var(--u)); stroke-width: 3; }
.vp-tr.on .cs svg { display: block; }
.vp-tr .po { width: calc(40 * var(--u)); height: calc(40 * var(--u)); flex: none; border-radius: calc(6 * var(--u)); object-fit: cover; }
.vp-tr b { display: block; font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u)); font-weight: 500; }
.vp-tr small { display: block; margin-top: calc(2 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); color: rgba(255,255,255,.58); }

/* Une page en gris sous une fenêtre : seulement des blocs, elle est floue. */
.vp-gris { height: calc(110 * var(--u)); border-radius: calc(18 * var(--u)); background: #1a1a1a; }

/* ───────── Le panneau du support, ouvert sur le tableau de bord ───────── */
.vp-chat { position: absolute; right: calc(24 * var(--u)); bottom: calc(96 * var(--u)); z-index: 6; display: flex; flex-direction: column; width: calc(384 * var(--u)); height: calc(448 * var(--u)); overflow: hidden; border: calc(1 * var(--u)) solid rgba(255,255,255,.14); border-radius: calc(18 * var(--u)); background: #1a1a1a; box-shadow: 0 calc(25 * var(--u)) calc(50 * var(--u)) rgba(0,0,0,.5); }
.vp-chat .ct { flex: none; padding: calc(13 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u)); border-bottom: calc(1 * var(--u)) solid rgba(255,255,255,.14); }
.vp-chat .ct b { display: block; font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); font-weight: 700; }
.vp-chat .ct small { display: block; font-size: calc(12 * var(--u)); line-height: calc(17 * var(--u)); color: rgba(255,255,255,.58); }
.vp-chat .cm { display: flex; flex: 1; min-height: 0; flex-direction: column; gap: calc(12 * var(--u)); overflow: hidden; padding: calc(16 * var(--u)); }
.vp-msg { max-width: calc(280 * var(--u)); padding: calc(9 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)); border-radius: calc(18 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
.vp-msg small { display: block; margin-top: calc(5 * var(--u)); font-size: calc(11.5 * var(--u)); line-height: calc(15 * var(--u)); }
.vp-msg.moi { align-self: flex-end; border-bottom-right-radius: calc(6 * var(--u)); background: #0df8c0; color: #131313; }
.vp-msg.moi small { color: rgba(19,19,19,.55); }
.vp-msg.eux { align-self: flex-start; border: calc(1 * var(--u)) solid rgba(255,255,255,.14); border-bottom-left-radius: calc(6 * var(--u)); background: rgba(255,255,255,.04); }
.vp-msg.eux em { display: block; margin-bottom: calc(2 * var(--u)); font-style: normal; font-size: calc(12 * var(--u)); line-height: calc(17 * var(--u)); font-weight: 600; color: #0df8c0; }
.vp-msg.eux small { color: rgba(255,255,255,.5); }
.vp-chat .cp { flex: none; padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u)); border-top: calc(1 * var(--u)) solid rgba(255,255,255,.14); }
.vp-chat .sg { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(13 * var(--u)); line-height: calc(19.5 * var(--u)); color: rgba(255,255,255,.58); }
.vp-chat .sg svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); stroke-width: 2; }
.vp-chat .es { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(12 * var(--u)); }
.vp-chat .es > svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); stroke-width: 2; color: rgba(255,255,255,.5); }
.vp-chat .es .ch { flex: 1; padding: calc(9 * var(--u)) calc(14 * var(--u)); border: calc(2 * var(--u)) solid #0df8c0; border-radius: calc(10 * var(--u)); background: #131313; font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); color: rgba(255,255,255,.4); }
.vp-chat .es .ev { display: flex; align-items: center; justify-content: center; width: calc(46 * var(--u)); height: calc(46 * var(--u)); flex: none; border-radius: 50%; background: #0a6b55; color: #0b2a22; }
.vp-chat .es .ev svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); stroke-width: 2; }

.vp .vt-ico { fill: currentColor; }
.vp-info strong { font-weight: 700; }

/* ═════════ LES ÉCRANS DE TÉLÉPHONE (390 × 844, en pixels du vrai portail) ═════════
 *
 * Même règle que les écrans d'ordinateur : tout en px, converti par src/construire-vitrine.cjs. Un écran de
 * téléphone est un « .vp.vm » : il hérite des cartes, boutons et pastilles, et ne redit ici que ce qui change sous
 * 768 px dans le portail (EnTetePage, CorpsPage, BarreOnglets, ChatBubble, Modal).
 */

/* ───────── Le portail sur téléphone : en-tête, corps, menu de verre, bulle ───────── */
.vp.vm { display: block; }
.vm-page { position: absolute; inset: 0; overflow: hidden; }
.vm .vp-tete { display: flow-root; padding: calc(20 * var(--u)) calc(16 * var(--u)); }
.vm .vp-tete .act { float: right; max-width: 55%; margin: calc(16 * var(--u)) 0 0 calc(12 * var(--u)); }
.vm .vp-tete .h { font-size: calc(26 * var(--u)); white-space: normal; overflow-wrap: anywhere; }
.vm .vp-corps { padding: calc(24 * var(--u)) calc(16 * var(--u)) calc(48 * var(--u)); }
/* La capture des sorties est prise un peu plus bas dans la page : la carte suit l'en-tête de près. */
.vm .vp-corps.ht { padding-top: calc(6 * var(--u)); }
.vm .vp-bulle { right: calc(16 * var(--u)); bottom: calc(86 * var(--u)); box-shadow: 0 0 0 calc(3 * var(--u)) #131313, 0 calc(10 * var(--u)) calc(15 * var(--u)) rgba(0,0,0,.3); }
.vm .vp-bulle svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }

/* Le menu de verre (BarreOnglets, « .verre » de globals.css) */
.vm-barre { position: absolute; left: calc(12 * var(--u)); right: calc(12 * var(--u)); bottom: calc(10 * var(--u)); z-index: 5; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: calc(64 * var(--u)); padding: calc(5 * var(--u)); border-radius: calc(999 * var(--u)); background: linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.03) 38%, rgba(255,255,255,0) 62%, rgba(255,255,255,.05) 100%), rgba(1,25,19,.72); -webkit-backdrop-filter: blur(calc(22 * var(--u))) saturate(1.7); backdrop-filter: blur(calc(22 * var(--u))) saturate(1.7); box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,.42), 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,.3); }
.vm-barre::before { content: ""; position: absolute; inset: 0; padding: calc(1 * var(--u)); border-radius: inherit; background: linear-gradient(140deg, rgba(255,255,255,.5), rgba(255,255,255,.1) 28%, rgba(255,255,255,.05) 62%, rgba(13,248,192,.32)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; }
.vm-barre > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(3 * var(--u)); border-radius: calc(999 * var(--u)); font-size: calc(10.5 * var(--u)); line-height: 1; font-weight: 700; color: rgba(255,255,255,.8); }
.vm-barre > span.on { background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03)), rgba(13,248,192,.06); box-shadow: inset 0 calc(1 * var(--u)) 0 rgba(255,255,255,.32), inset 0 calc(-1 * var(--u)) 0 rgba(0,0,0,.3), inset 0 0 0 calc(1 * var(--u)) rgba(255,255,255,.07); color: #0df8c0; }
.vm-barre svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.vm-barre .on svg.tr { stroke-width: 1.9; }

/* Le voile sous le panneau du support : il couvre la page ET le menu */
.vm-voile { position: absolute; inset: 0; z-index: 5; background: rgba(19,19,19,.8); -webkit-backdrop-filter: blur(calc(4 * var(--u))); backdrop-filter: blur(calc(4 * var(--u))); }

/* ───────── Tableau de bord, statistiques, relevés ───────── */
.vm .vp-kpis { grid-template-columns: minmax(0, 1fr); }
.vm .vp-k.acc { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: calc(12 * var(--u)) calc(16 * var(--u)); }
.vm .vp-k.acc .tx { min-width: 0; flex: 1 1 calc(144 * var(--u)); }
.vm .vp-k.acc .vp-b { align-self: center; margin-top: 0; }
.vm .vp-k.s { padding-bottom: calc(22 * var(--u)); }
.vm .vp-k.s .vp-ch { margin: calc(14 * var(--u)) 0 calc(2 * var(--u)); font-size: calc(30 * var(--u)); }
.vm .vp-k.r .vp-ch { margin-bottom: 0; }
.vm .vp-k .vp-ch.vp-t { color: #0df8c0; }
.vm .vp-2 { grid-template-columns: minmax(0, 1fr); }
.vm .vp-bloc { padding: calc(26 * var(--u)) calc(20 * var(--u)) calc(28 * var(--u)); }
.vm-filtres { display: flex; align-items: baseline; justify-content: space-between; padding: calc(26 * var(--u)) calc(20 * var(--u)) calc(28 * var(--u)); }
.vm-filtres span { font-size: calc(13 * var(--u)); line-height: calc(21 * var(--u)); font-weight: 600; color: #0df8c0; }
.vm-vues { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); padding: calc(24 * var(--u)) calc(28 * var(--u)) calc(28 * var(--u)); }
.vm-vues span { padding: calc(8 * var(--u)) calc(18 * var(--u)); border: calc(1 * var(--u)) solid rgba(255,255,255,.2); border-radius: calc(999 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); font-weight: 600; color: rgba(255,255,255,.8); }
.vm-vues span.on { border-color: #0df8c0; background: #0df8c0; color: #131313; }
.vm-versement { margin-top: calc(17 * var(--u)); padding: calc(20 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u)); }
.vm-versement ul { display: grid; gap: calc(7 * var(--u)); margin: calc(10 * var(--u)) 0 0; padding: 0; list-style: none; }
.vm-versement li { position: relative; padding-left: calc(17 * var(--u)); font-size: calc(13 * var(--u)); line-height: calc(21 * var(--u)); color: rgba(255,255,255,.8); }
.vm-versement li::before { content: ""; position: absolute; left: 0; top: calc(8 * var(--u)); width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: rgba(255,255,255,.4); }
.vm-versement li.j::before { background: #facc15; }
.vm-versement .ou { display: block; margin-top: calc(14 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(21 * var(--u)); font-weight: 600; color: #0df8c0; }

/* La carte « Installer La Maison Libre » (components/pwa/CarteInstallation) */
.vm-inst { padding: calc(22 * var(--u)) calc(20 * var(--u)) calc(24 * var(--u)); }
.vm-inst .ht { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(16 * var(--u)); }
.vm-inst .ht > div { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.vm-inst .app { display: flex; align-items: center; justify-content: center; width: calc(40 * var(--u)); height: calc(40 * var(--u)); flex: none; border-radius: calc(10 * var(--u)); background: #0df8c0; }
.vm-inst .app img { width: calc(26 * var(--u)); height: auto; }
.vm-inst .ht > svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); margin: calc(4 * var(--u)) 0 0; stroke-width: 2; color: rgba(255,255,255,.5); }
.vm-inst > p { margin: calc(8 * var(--u)) 0 0; font-size: calc(14 * var(--u)); line-height: 1.625; color: rgba(255,255,255,.7); }
.vm-inst .et { display: grid; gap: calc(12 * var(--u)); margin-top: calc(16 * var(--u)); }
.vm-inst .et > div { display: flex; align-items: center; gap: calc(12 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1.375; }
.vm-inst .et span { display: flex; align-items: center; justify-content: center; width: calc(36 * var(--u)); height: calc(36 * var(--u)); flex: none; border-radius: calc(10 * var(--u)); background: rgba(255,255,255,.08); color: #0df8c0; }
.vm-inst .et svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); stroke-width: 1.8; }

/* ───────── Sorties ───────── */
.vm .vp-filtres { flex-wrap: wrap; gap: calc(10 * var(--u)); }
.vm .vp-ligne { align-items: flex-start; padding: calc(16 * var(--u)); }
.vm .vp-ligne .vp-p { margin-top: calc(8 * var(--u)); }
.vm .vp-ligne .mi { width: calc(92 * var(--u)); height: calc(52 * var(--u)); }

/* ───────── La fiche d'un vidéoclip ───────── */
.vm .vp-retour { padding: calc(14 * var(--u)) calc(16 * var(--u)); }
.vm .vp-heros { flex-direction: column; align-items: stretch; gap: calc(28 * var(--u)); padding: calc(37 * var(--u)) calc(16 * var(--u)) calc(36 * var(--u)); }
.vm .vp-heros .vg { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.vm .vp-heros .tx { align-self: auto; padding-bottom: 0; }
.vm .vp-heros .mt { flex-wrap: wrap; }
.vm .vp-heros .ti { font-size: calc(38 * var(--u)); }
.vm .vp-heros .ar { margin-top: calc(8 * var(--u)); }
.vm .vp-fiche { grid-template-columns: minmax(0, 1fr); padding: calc(27 * var(--u)) calc(16 * var(--u)) calc(40 * var(--u)); }
.vm .vp-fc { padding: calc(26 * var(--u)) calc(20 * var(--u)) calc(28 * var(--u)); }
.vm .vp-fc .champs { grid-template-columns: minmax(0, 1fr); }

/* ───────── Fenêtres (Modal) : presque tout l'écran ───────── */
.vm .vp-modale { left: calc(16 * var(--u)); right: calc(16 * var(--u)); top: calc(42 * var(--u)); bottom: calc(42 * var(--u)); width: auto; margin-left: 0; }
.vm .vp-modale.ct { bottom: auto; }
.vm .vp-modale.ct .mt { padding-bottom: calc(22 * var(--u)); }
.vm .vp-modale.ct .mc { padding-top: calc(25 * var(--u)); padding-bottom: calc(28 * var(--u)); }
.vm .vp-modale .mt p { padding-right: calc(60 * var(--u)); line-height: calc(21 * var(--u)); }
.vm .vp-formats { grid-template-columns: minmax(0, 1fr); }
.vm .vp-info { padding: calc(16 * var(--u)); }
.vm .vp-trouve { margin: calc(24 * var(--u)) 0 calc(12 * var(--u)); }
.vm .vp-trouve b { font-weight: 400; color: rgba(255,255,255,.58); }
.vm-artiste { display: flex; align-items: center; gap: calc(16 * var(--u)); padding: calc(12 * var(--u)); border: calc(1 * var(--u)) solid rgba(255,255,255,.14); border-radius: calc(18 * var(--u)); background: #131313; }
.vm-artiste .av { width: calc(48 * var(--u)); height: calc(48 * var(--u)); flex: none; border: calc(2 * var(--u)) solid rgba(255,255,255,.14); border-radius: 50%; object-fit: cover; }
.vm-artiste span.av { display: flex; align-items: center; justify-content: center; background: #033e30; font: 800 calc(18 * var(--u))/1 Poppins, Nunito, sans-serif; }
.vm-artiste b { min-width: 0; flex: 1; overflow: hidden; font-size: calc(15 * var(--u)); line-height: calc(22 * var(--u)); font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.vm-artiste svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); margin-right: calc(4 * var(--u)); stroke-width: 2; color: rgba(255,255,255,.58); }

/* ───────── Le panneau du support ───────── */
.vm .vp-chat { left: calc(16 * var(--u)); right: calc(16 * var(--u)); bottom: calc(158 * var(--u)); width: auto; }
.vm .vp-chat .ct { padding: calc(12 * var(--u)) calc(16 * var(--u)); }
.vm .vp-chat .cp { padding-bottom: calc(11 * var(--u)); }
.vm .vp-chat .es .ev { width: calc(47 * var(--u)); height: calc(38 * var(--u)); border-radius: calc(999 * var(--u)); }
.vm .vp-msg { max-width: 80%; }

/* ───────── La page publique d'un lien intelligent (app/l/[slug]) ───────── */
.vl-fond { position: absolute; inset: 0; overflow: hidden; }
.vl-fond > * { width: 100%; height: 100%; object-fit: cover; opacity: .7; filter: blur(calc(80 * var(--u))) saturate(1.5); transform: scale(1.25); }
.vl-fond > span { display: block; background: var(--c, #0df8c0); }
.vl-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,19,19,.55), rgba(19,19,19,.8) 50%, #131313); }
.vl-in { position: relative; padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(40 * var(--u)); }
.vl-haut { display: flex; justify-content: flex-end; margin-bottom: calc(12 * var(--u)); }
.vl-abo { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(7 * var(--u)) calc(12 * var(--u)); border: calc(1 * var(--u)) solid rgba(255,255,255,.18); border-radius: calc(999 * var(--u)); background: rgba(255,255,255,.12); font-size: calc(12.5 * var(--u)); line-height: calc(18.75 * var(--u)); font-weight: 700; }
.vl-abo svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); stroke-width: 2.2; }
.vl-po { display: block; width: 100%; max-width: calc(338 * var(--u)); aspect-ratio: 1; margin: 0 auto; border-radius: calc(16 * var(--u)); object-fit: cover; box-shadow: 0 calc(25 * var(--u)) calc(50 * var(--u)) rgba(0,0,0,.6); }
.vl-id { margin-top: calc(16 * var(--u)); text-align: center; }
.vl-bientot { display: inline-block; margin-bottom: calc(8 * var(--u)); padding: calc(4 * var(--u)) calc(12 * var(--u)); border: calc(1 * var(--u)) solid rgba(13,248,192,.4); border-radius: calc(999 * var(--u)); background: rgba(13,248,192,.1); font-size: calc(11.5 * var(--u)); line-height: calc(17.25 * var(--u)); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #0df8c0; }
.vl-id .ti { font: 800 calc(26.4 * var(--u))/1.25 Poppins, Nunito, sans-serif; }
.vl-id .ar { margin-top: calc(4 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(22.5 * var(--u)); color: rgba(255,255,255,.65); }
.vl-id .cr { margin-top: calc(12 * var(--u)); font-size: calc(13 * var(--u)); line-height: calc(19.5 * var(--u)); font-weight: 600; color: rgba(255,255,255,.55); }
.vl-avertir { display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); margin-top: calc(24 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); border-radius: calc(12 * var(--u)); background: #0df8c0; font-size: calc(15 * var(--u)); line-height: calc(22.5 * var(--u)); font-weight: 700; text-align: center; color: #131313; }
.vl-avertir svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); stroke-width: 2.2; }
.vl-pl { display: grid; gap: calc(10 * var(--u)); margin-top: calc(20 * var(--u)); }
.vl-pl > div { display: flex; align-items: center; gap: calc(14 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); border: calc(1 * var(--u)) solid rgba(255,255,255,.12); border-radius: calc(12 * var(--u)); background: rgba(255,255,255,.06); }
.vl-pl svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); color: rgba(255,255,255,.85); }
.vl-pl b { flex: 1; font-size: calc(15 * var(--u)); line-height: calc(22.5 * var(--u)); font-weight: 600; }
.vl-pl span { padding: calc(6 * var(--u)) calc(14 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--c, #0df8c0); font-size: calc(12.5 * var(--u)); line-height: calc(18.75 * var(--u)); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ct, #131313); }

/* La feuille d'abonnement (components/liens/BoutonAbonnement) */
.vl-voile { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.vl-feuille { position: absolute; left: 0; right: 0; bottom: 0; padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(24 * var(--u)); border-top: calc(1 * var(--u)) solid rgba(255,255,255,.1); border-radius: calc(20 * var(--u)) calc(20 * var(--u)) 0 0; background: #1c1c1c; }
.vl-feuille > svg { position: absolute; right: calc(20 * var(--u)); top: calc(20 * var(--u)); width: calc(18 * var(--u)); height: calc(18 * var(--u)); stroke-width: 2; color: rgba(255,255,255,.5); }
.vl-feuille b { display: block; padding-right: calc(32 * var(--u)); font: 800 calc(19 * var(--u))/1.375 Poppins, Nunito, sans-serif; }
.vl-feuille p { margin: calc(6 * var(--u)) 0 0; font-size: calc(13 * var(--u)); line-height: 1.625; color: rgba(255,255,255,.65); }
.vl-feuille .sai { display: flex; gap: calc(8 * var(--u)); margin-top: calc(16 * var(--u)); }
.vl-feuille .sai span { min-width: 0; flex: 1; padding: calc(12 * var(--u)) calc(14 * var(--u)); border: calc(1 * var(--u)) solid rgba(255,255,255,.14); border-radius: calc(12 * var(--u)); background: rgba(255,255,255,.06); box-shadow: 0 0 0 calc(2 * var(--u)) #0df8c0; font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); color: rgba(255,255,255,.45); }
.vl-feuille .sai em { display: flex; align-items: center; padding: calc(12 * var(--u)) calc(16 * var(--u)); border-radius: calc(12 * var(--u)); background: #0df8c0; font-style: normal; font-size: calc(13 * var(--u)); line-height: calc(19.5 * var(--u)); font-weight: 700; color: #131313; }
.vl-feuille small { display: block; margin-top: calc(12 * var(--u)); font-size: calc(11.5 * var(--u)); line-height: 1.625; color: rgba(255,255,255,.58); }
.vl-feuille small u { text-underline-offset: calc(2 * var(--u)); }

/* ───────── Le courriel du matin (gabarit de l'infolettre des fans) ───────── */
.vc { position: relative; width: 100%; height: 100%; overflow: hidden; padding: calc(24 * var(--u)) calc(12 * var(--u)) 0; background: #111112; color: #fff; font: 400 calc(14 * var(--u))/1.5 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; text-align: center; }
.vc *, .vc *::before { box-sizing: border-box; }
.vc-carte { overflow: hidden; padding: calc(26 * var(--u)) calc(24 * var(--u)) calc(30 * var(--u)); border: calc(1 * var(--u)) solid rgba(255,255,255,.1); border-top: calc(4 * var(--u)) solid var(--c, #0df8c0); border-radius: calc(18 * var(--u)); background: #1a1a1a; }
.vc-sur { font-size: calc(11 * var(--u)); line-height: calc(16 * var(--u)); font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--c, #0df8c0); filter: brightness(1.6) saturate(.7); }
.vc-po { display: block; width: 100%; aspect-ratio: 1; margin-top: calc(14 * var(--u)); border-radius: calc(12 * var(--u)); object-fit: cover; }
.vc-ti { margin-top: calc(20 * var(--u)); font-size: calc(26 * var(--u)); line-height: calc(30 * var(--u)); font-weight: 800; }
.vc-ar { margin-top: calc(6 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u)); color: rgba(255,255,255,.75); }
.vc-carte > p { margin: calc(4 * var(--u)) 0 0; font-size: calc(13.5 * var(--u)); line-height: calc(16 * var(--u)); color: rgba(255,255,255,.55); }
.vc-btn { display: inline-block; margin-top: calc(23 * var(--u)); padding: calc(13 * var(--u)) calc(34 * var(--u)); border-radius: calc(999 * var(--u)); background: var(--c, #0df8c0); font-size: calc(14.5 * var(--u)); line-height: calc(19 * var(--u)); font-weight: 700; color: var(--ct, #131313); }
.vc-pied { margin-top: calc(28 * var(--u)); padding-top: calc(18 * var(--u)); border-top: calc(1 * var(--u)) solid rgba(255,255,255,.1); font-size: calc(11.5 * var(--u)); line-height: calc(17.5 * var(--u)); color: rgba(255,255,255,.55); }
.vc-logo { display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); margin-bottom: calc(14 * var(--u)); font-size: calc(6.5 * var(--u)); line-height: 1; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.vc-logo img { width: calc(22 * var(--u)); height: auto; opacity: .5; }
.vc-pied u { text-underline-offset: calc(2 * var(--u)); }

/* ───────── La page EPK, vue par un média (app/epk/[slug]) ───────── */
.ve-haut { height: calc(192 * var(--u)); background: linear-gradient(180deg, rgba(13,248,192,.1), rgba(13,248,192,0)); }
.ve-id { display: flex; align-items: flex-end; gap: calc(24 * var(--u)); margin-top: calc(-96 * var(--u)); padding: 0 calc(24 * var(--u)); }
.ve-id .av { width: calc(80 * var(--u)); height: calc(80 * var(--u)); flex: none; border: calc(2 * var(--u)) solid rgba(13,248,192,.3); border-radius: 50%; object-fit: cover; }
.ve-id span.av { display: flex; align-items: center; justify-content: center; border: 0; background: #0df8c0; font-size: calc(24 * var(--u)); font-weight: 900; color: #131313; }
.ve-id .tx { min-width: 0; padding-bottom: calc(4 * var(--u)); }
.ve-id .nm { font-size: calc(30 * var(--u)); line-height: calc(36 * var(--u)); font-weight: 900; overflow-wrap: anywhere; }
.ve-corps { padding: calc(48 * var(--u)) calc(24 * var(--u)); }
.ve-corps .ts { margin-bottom: calc(16 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: #0df8c0; }
.ve-liens { display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)); margin-bottom: calc(48 * var(--u)); }
.ve-liens span { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(8 * var(--u)) calc(16 * var(--u)); border: calc(1 * var(--u)) solid rgba(255,255,255,.1); border-radius: calc(999 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
.ve-liens svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); fill: currentColor; }
.ve-bio { display: grid; gap: calc(15 * var(--u)); }
.ve-bio i { display: block; height: calc(11 * var(--u)); border-radius: calc(6 * var(--u)); background: rgba(255,255,255,.14); }