/* Héros en direct de la une (079, site vitrine) : cartes vivantes, bandeau de filature, carte postale du
   plan de Paris quand le héros est loin, et volet de sa fiche qui sort de la gauche de l'image. Reprend les
   variables et polices de la page (papier, marine, rose, trame, Anton, Rubik Mono One, Special Elite).
   Aucun défilement : le volet se règle sur sa propre hauteur (unités cqh) et cache le moins utile en bas. */

/* ---------- cartes : un bouton pour suivre, une pastille pour la fiche ---------- */
.une .eventail .heros.vh-carte{padding:0;cursor:default}
.vh-carte .vh-suivre{all:unset;display:block;box-sizing:border-box;width:100%;padding:calc(var(--w)*.04);border-radius:inherit;cursor:pointer}
.vh-carte .vh-suivre:focus-visible{outline:4px solid var(--rose);outline-offset:3px}
.vh-carte[data-suivi="1"]{box-shadow:0 0 0 4px var(--rose),6px 8px 0 rgba(29,43,122,.9)}
.vh-carte[data-suivi="1"] b::after{content:" \25C9";color:var(--rose);font-size:.55em;vertical-align:.35em}
.vh-carte .vh-fiche{all:unset;position:absolute;right:calc(var(--w)*-.07);top:calc(var(--w)*-.07);width:calc(var(--w)*.3);height:calc(var(--w)*.3);min-width:26px;min-height:26px;
  border-radius:50%;background:var(--jaune);border:3px solid var(--marine);box-shadow:2px 3px 0 var(--marine);display:grid;place-items:center;cursor:pointer;z-index:2;
  transform:rotate(-8deg);transition:transform .15s}
.vh-carte .vh-fiche:hover,.vh-carte .vh-fiche[aria-expanded="true"]{transform:rotate(0) scale(1.12);background:var(--rose)}
.vh-carte .vh-fiche:focus-visible{outline:4px solid var(--rose);outline-offset:3px}
.vh-carte .vh-fiche svg{width:58%;height:58%;fill:none;stroke:var(--marine);stroke-width:2.4;stroke-linecap:round}

/* ---------- étiquette du héros suivi : juste au-dessus des cartes, à droite, bien lisible ---------- */
.une .vh-filature{position:absolute;z-index:12;right:.5cqw;bottom:calc(100% + var(--w)*.5);max-width:min(46cqw,640px);display:flex;align-items:center;gap:.6em;overflow:hidden;white-space:nowrap;
  background:var(--creme);border:4px solid var(--marine);padding:.35em .9em .35em .45em;transform:rotate(-1.4deg);box-shadow:6px 6px 0 var(--rose);
  font-family:var(--rond);font-size:clamp(16px,2.9cqh,26px);line-height:1.15}
.vh-filature > span:last-child{overflow:hidden;text-overflow:ellipsis}
.une .vh-filature[hidden]{display:none}
.vh-filature .vh-etat{font-family:var(--tampon);font-size:.55em;letter-spacing:.06em;text-transform:uppercase;color:var(--creme);background:var(--rose);padding:.35em .5em .3em;white-space:nowrap}
.vh-filature[data-ou="loin"] .vh-etat,.vh-filature[data-ou="absent"] .vh-etat{background:var(--violet)}
.vh-filature[data-ou="dedans"] .vh-etat{background:var(--vermillon)}
.vh-filature[data-attente="1"] .vh-etat{background:var(--marine);animation:vd-pouls 1.2s ease-in-out infinite}
.vh-filature b{font-family:var(--titre);font-weight:400;font-size:1.25em;text-transform:uppercase;letter-spacing:.01em;margin-right:.3em}

/* ---------- carte postale du plan de Paris (héros hors du quartier 3D) ---------- */
.une .vh-loin{position:absolute;z-index:8;right:calc(-1 * min(5cqw,max(0px,calc((100vw - 100cqw)/2 - 24px))));top:1cqh;width:min(31cqw,46cqh);background:var(--blanc);padding:min(12px,1.4cqh);
  transform:rotate(1.6deg);box-shadow:8px 9px 0 rgba(29,43,122,.85);clip-path:polygon(0 1%,30% 0,62% 1%,100% 0,99.3% 50%,100% 100%,55% 99%,0 100%,.8% 48%)}
.une .vh-loin[hidden]{display:none}
/* La carte postale prend la place de l'encadré « cette saison » tant qu'elle est montrée. */
.une[data-vh-loin="1"] .bouleversement{visibility:hidden}
.vh-loin .vh-plan{position:relative;height:min(24cqh,18cqw);background-color:var(--papier2);background-repeat:no-repeat;overflow:hidden;filter:saturate(1.3) contrast(1.05)}
.vh-loin .vh-plan::after{content:"";position:absolute;inset:0;background:var(--trame);mix-blend-mode:multiply;pointer-events:none}
.vh-plan .vh-epingle{position:absolute;width:0;height:0}
.vh-plan .vh-epingle i{position:absolute;left:-17px;top:-44px;width:34px;height:34px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--rose);border:3px solid var(--marine);box-shadow:2px 3px 0 var(--marine)}
.vh-plan .vh-epingle.q i{background:var(--jaune);width:18px;height:18px;left:-9px;top:-24px}
.vh-plan .vh-epingle span{position:absolute;left:14px;top:-40px;white-space:nowrap;font-family:var(--tampon);font-size:11px;letter-spacing:.04em;text-transform:uppercase;background:var(--marine);color:var(--creme);padding:3px 6px 2px}
.vh-plan .vh-epingle.q span{top:-22px;background:var(--jaune);color:var(--marine)}
.vh-loin .vh-texte{padding:min(10px,1.2cqh) 4px 2px}
.vh-loin h3{margin:0;font-family:var(--titre);font-weight:400;text-transform:uppercase;font-size:min(3.4cqh,2.2cqw);line-height:.95}
.vh-loin p{margin:.3em 0 0;font-family:var(--machine);font-size:clamp(12px,1.8cqh,16px);line-height:1.25}
.vh-loin small{display:block;font-size:10px;opacity:.7;margin-top:.3em}

/* ---------- volet de la fiche : sort de la gauche de l'image du héros ---------- */
/* Lisible sur un écran portable : jusqu'à 40 % de la largeur de l'image, texte courant de 15 à 19 px (unités
   em, réglées sur la hauteur du volet), et ce qui ne tient pas est retiré plutôt que rapetissé. */
.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}}
/* Volet ouvert : le texte d'accès, dessous, ne dépasse plus en bas. */
.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:.62em;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;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.vh-maintenant{background:var(--creme);border:3px solid var(--marine);padding:.5em .65em;transform:rotate(.5deg);box-shadow:4px 4px 0 var(--turquoise)}
.vh-maintenant .vh-quand{font-family:var(--tampon);font-size:.72em;letter-spacing:.06em;text-transform:uppercase;color:var(--rose)}
.vh-maintenant strong{display:block;font-family:var(--rond);font-weight:400;font-size:1.3em;line-height:1.05;margin:.15em 0}
.vh-maintenant q,.vh-maintenant .vh-souvenir{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-family:var(--main);font-size:1em;line-height:1.15;margin-top:.3em;quotes:"« " " »"}
.vh-maintenant .vh-souvenir{font-family:var(--machine);font-size:.9em;opacity:.85}
.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-humeur{display:flex;align-items:center;gap:.6em}
.vh-humeur .vh-titre{margin:0}
.vh-humeur .vh-emotion{font-family:var(--tampon);font-size:.78em;letter-spacing:.04em;text-transform:uppercase;color:var(--vermillon);border:3px solid currentColor;padding:.3em .45em .25em;transform:rotate(-4deg);white-space:nowrap}
.vh-jauge{position:relative;height:.95em;min-width:0}
.vh-jauge svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.vh-jauge .fond{fill:var(--blanc);stroke:var(--marine);stroke-width:2}
.vh-jauge .plein{fill:var(--turquoise)}
.vh-jauge[data-manque="1"] .plein{fill:var(--vermillon)}
.vh-jauge .seuil{stroke:var(--marine);stroke-width:2;stroke-dasharray:3 2}
/* Besoins sur trois colonnes quand la largeur le permet (deux rangées au lieu de trois). */
.vh-besoins{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.4em,1fr));gap:.4em 1em}
.vh-besoins .vh-b{display:grid;grid-template-columns:1fr;gap:.12em}
.vh-besoins .vh-b span{font-size:1em;font-weight:700;font-stretch:85%;display:flex;justify-content:space-between;align-items:baseline;gap:.4em;white-space:nowrap}
.vh-besoins .vh-b em{font-style:normal;font-family:var(--tampon);font-size:.68em;color:var(--vermillon);letter-spacing:.03em}
.vh-envie{margin:0;font-family:var(--main);font-size:1.05em;line-height:1.1;color:var(--violet)}
.vh-envie b{font-family:var(--tampon);font-weight:400;font-size:.66em;letter-spacing:.06em;text-transform:uppercase;color:var(--marine);margin-right:.4em}
.vh-effets{display:flex;flex-wrap:wrap;gap:.4em}
.vh-effets span{font-size:.9em;font-weight:700;padding:.15em .5em;border:2px solid var(--marine);background:var(--citron)}
.vh-effets span[data-signe="-"]{background:var(--rose);color:var(--creme)}
.vh-relations{display:grid;grid-template-columns:auto auto 1fr;gap:.3em .7em;align-items:center;font-size:1em}
.vh-relations b{font-family:var(--rond);font-weight:400;font-size:1.05em}
.vh-relations small{font-family:var(--machine);font-size:.85em}
.vh-relations .vh-jauge .plein{fill:var(--rose)}
.vh-relations .vh-jauge[data-negatif="1"] .plein{fill:var(--violet)}
.vh-pied{margin:auto 0 0;font-family:var(--machine);font-size:.72em;opacity:.75}
/* Hauteurs moyennes et petites : on retire le pied et le souvenir, puis les effets, la troisième relation,
   l'envie, et enfin les relations ; jamais de défilement ni de texte plus petit. */
@container (max-height:640px){.vh-volet .vh-pied,.vh-volet .vh-souvenir{display:none}}
@container (max-height:540px){.vh-volet .vh-effets{display:none}}
@container (max-height:520px){.vh-relations > :nth-child(n+7){display:none}}
@container (max-height:450px){.vh-volet .vh-envie{display:none}.vh-tete .vh-portrait{width:3.4em;height:3.9em}}
@container (max-height:400px){.vh-volet .vh-relations-bloc{display:none}}
/* Portrait (téléphone) : le volet couvre toute l'image. */
@container (orientation:portrait){.une .vh-volet{width:auto;right:0;min-width:0}.une .vh-filature{right:2cqw;bottom:calc(100% + var(--w)*.3);max-width:92cqw}.une .vh-loin{width:51cqw;left:auto;right:0;top:28cqh}.vh-loin .vh-plan{height:14cqh}.vh-loin h3{font-size:3.1cqw}.vh-loin p{font-size:11px}.vh-loin small{font-size:8px}}