/* Vitrine cartae.app (sans monde) : les huit cartes de héros figées au jour de la publication et le
   volet de leur fiche fixe. Reprend l'allure du volet en direct (monde/web/site/volet-heros.css) :
   mêmes variables et polices de la page (papier, marine, rose, Anton, Rubik Mono One) ; il n'y a plus
   ni filature, ni carte postale, ni jauges, juste une fiche courte. Le tampon « Bientôt en direct »
   garde le style du tampon du direct (défini dans la page) et s'affiche d'emblée. */

/* ---------- tampon « Bientôt en direct » : posé sur la bande QUARTIER, visible dès le chargement ---------- */
.une .vd-tampon{display:inline-flex}

/* ---------- cartes figées : la carte entière ouvre la fiche ---------- */
.une .eventail .heros.vh-carte{padding:0}
.vh-carte > button{all:unset;display:block;box-sizing:border-box;width:100%;height:100%;padding:calc(var(--w)*.04);border-radius:inherit;cursor:pointer}
.vh-carte > button:focus-visible{outline:4px solid var(--rose);outline-offset:3px}
.vh-carte > button:hover{transform:rotate(0) translateY(calc(var(--w)*-.04))}

/* ---------- volet de la fiche fixe : même sortie de gauche que le volet en direct ---------- */
.une .vh-volet{position:absolute;z-index:14;left:-8px;top:11cqh;bottom:4cqh;width:clamp(340px,40cqw,620px);container-type:size;
  background:var(--papier);color:var(--marine);border:4px solid var(--marine);border-left-width:0;box-shadow:10px 10px 0 rgba(29,43,122,.88);
  transform:rotate(-.6deg);transform-origin:0 50%;clip-path:inset(0 100% 0 0);transition:clip-path .45s cubic-bezier(.2,.8,.2,1),visibility 0s .45s;visibility:hidden}
.une .vh-volet[data-ouvert="1"]{clip-path:inset(-20px -30px -30px 0);visibility:visible;transition:clip-path .45s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){.une .vh-volet{transition:none}}
.une:has(.vh-volet[data-ouvert="1"]) .acces p{visibility:hidden}
.vh-volet::before{content:"";position:absolute;inset:0;background:var(--trame);opacity:.35;mix-blend-mode:multiply;pointer-events:none}
.vh-volet .vh-dedans{position:relative;height:100%;display:flex;flex-direction:column;gap:.7em;padding:.9em .95em .7em 1.15em;overflow:hidden;
  font-size:clamp(15px,2.9cqh,19px);line-height:1.2}
.vh-volet .vh-fermer{all:unset;position:absolute;right:.7em;top:.7em;z-index:2;width:2em;height:2em;border-radius:50%;display:grid;place-items:center;
  background:var(--creme);border:3px solid var(--marine);box-shadow:3px 3px 0 var(--rose);cursor:pointer;font-family:var(--texte);font-weight:900;font-size:1.3em;line-height:1}
.vh-volet .vh-fermer:focus-visible{outline:4px solid var(--rose);outline-offset:3px}
.vh-tete{display:flex;gap:.7em;align-items:flex-end;padding-right:2.8em}
.vh-tete .vh-portrait{flex:none;width:4.2em;height:4.8em;border:3px solid var(--marine);background:var(--c,var(--rose));position:relative;overflow:hidden;transform:rotate(-3deg)}
.vh-tete .vh-portrait img{position:absolute;left:50%;top:6%;height:180%;max-width:none;transform:translateX(-50%);filter:grayscale(1) contrast(1.35) brightness(1.1);mix-blend-mode:multiply}
.vh-tete h2{margin:0;font-family:var(--titre);font-weight:400;text-transform:uppercase;font-size:2.6em;line-height:.86;letter-spacing:-.005em}
.vh-tete h2 span{background:var(--rose);color:var(--creme);padding:.02em .16em 0;box-shadow:.12em .12em 0 var(--marine);display:inline-block;transform:rotate(-2deg)}
.vh-tete p{margin:.35em 0 0;font-family:var(--machine);font-size:.9em;line-height:1.2}
.vh-caractere{background:var(--creme);border:3px solid var(--marine);padding:.5em .65em;transform:rotate(.5deg);box-shadow:4px 4px 0 var(--turquoise)}
.vh-caractere .vh-etiq{font-family:var(--tampon);font-size:.72em;letter-spacing:.06em;text-transform:uppercase;color:var(--rose)}
.vh-caractere p{margin:.2em 0 0;font-family:var(--rond);font-weight:400;font-size:1.1em;line-height:1.12}
.vh-titre{font-family:var(--tampon);font-size:.7em;letter-spacing:.08em;text-transform:uppercase;background:var(--marine);color:var(--creme);padding:.35em .55em .3em;justify-self:start;margin-bottom:.35em;display:inline-block}
.vh-passions{display:flex;flex-wrap:wrap;gap:.4em}
.vh-passions span{font-family:var(--rond);font-weight:600;font-size:1.05em;padding:.12em .5em;border:3px solid var(--marine);background:var(--jaune);transform:rotate(-1deg)}
.vh-passions span::after{content:attr(data-degre);font-family:var(--tampon);font-size:.62em;letter-spacing:.04em;text-transform:uppercase;margin-left:.45em;color:var(--marine);opacity:.75}
.vh-passions span[data-degre="mineure"]{background:var(--ciel)}
.vh-pied{margin:auto 0 0;font-family:var(--machine);font-size:.72em;opacity:.75}
@container (max-height:640px){.vh-volet .vh-pied{display:none}}
@container (max-height:450px){.vh-tete .vh-portrait{width:3.4em;height:3.9em}}
@container (orientation:portrait){.une .vh-volet{width:auto;right:0;min-width:0}}