/* ==========================================================================
   /enjeux/ — « Vos enjeux »
   Feuille DÉDIÉE : aucune règle ne doit fuir sur les 34 autres pages.
   Tout est préfixé .ve- (vérifié libre dans les 9 feuilles et les 9 scripts
   avant écriture — seules occurrences de « ve- » : preserve-3d).

   LE PROPOS DU CONTENU décide de la composition. Les huit énoncés ont tous la
   même forme : UNE ACTION, puis UNE CONTRAINTE qui doit tenir en même temps.
   « Accélérer les signatures » / « sans accroître le risque juridique ».
   Six sur huit articulent sur « sans », un sur « à », un sur « avec » — mais
   la charnière est toujours là. La page ne raconte donc pas huit sujets, elle
   raconte HUIT FOIS LA MÊME TENSION.
   → Chaque titre est cassé sur sa charnière : l'action en Montserrat, la
     contrainte en Spectral italique en dessous. La tension devient
     typographique, et elle le reste dans chaque tuile du damier.

   Rétention : 0. Rien ne joue de scène épinglée. La barre de filtre est
   `sticky` — c'est un ORGANE DE COMMANDE, pas un moment : elle n'allonge
   aucune section et ne retient aucun cran de molette.
   ========================================================================== */

.ve-page{ --ve-pad: clamp(72px, 9vw, 150px); --ve-accent:#A03608; }

/* ==========================================================================
   HERO — typographique, sans bandeau photo : la photo est la signature des
   pages d'expertise, cette page n'en est pas une.
   ========================================================================== */
/* ⚠️ overflow VISIBLE : le bandeau des profils descend hors du hero pour se
   poser à cheval sur le panneau clair. Un `overflow:hidden` le couperait net.
   (Le filigrane qui la justifiait aussi a été retiré le 2026-09-10.) */
.ve-hero{
  position:relative; overflow:visible;
  background:var(--f-navy-3);
  border-bottom-left-radius:0; border-bottom-right-radius:0;
  padding:calc(var(--ve-pad) + 46px) 0 calc(var(--ve-pad) * .62);
}
.ve-hero .fwrap{ position:relative; z-index:1 }
/* TITRE DOMINANT — demandé le 2026-09-10. Il ne partage plus l'échelle avec le
   statement : il monte à 8,6 rem et le statement redescend d'un cran, pour que
   la hiérarchie soit tranchée au lieu d'être disputée. */
.ve-hero h1{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(3rem, 9.4vw, 8.6rem); line-height:.9; letter-spacing:-.05em;
  color:var(--f-white); max-width:none; margin:0 0 .26em;
}
/* statement en deux registres — le serif italique porte la charnière (V6 P5) */
.ve-state{
  font-family:var(--sans); font-weight:600;
  font-size:clamp(1.34rem, 2.9vw, 2.35rem); line-height:1.14; letter-spacing:-.025em;
  color:#E7EDF4; max-width:21ch; margin:0;
}
.ve-state em{
  font-family:var(--serif); font-style:italic; font-weight:400;
  color:var(--f-orange);            /* 8,34:1 sur navy — profil du skill */
}

/* Le filigrane « SANS » a été RETIRÉ le 2026-09-10, sur demande du user, avec
   son conteneur clippé et la dérive `--h` qui le pilotait. */

/* ==========================================================================
   LA SECTION DES ENJEUX
   ⚠️ overflow VISIBLE : la barre de filtre est sticky, et un ancêtre en
   overflow:hidden la tuerait sans que getComputedStyle le dise (pitfalls).
   Rien n'y déborde.
   ========================================================================== */
.ve-enj{
  position:relative; overflow:visible;
  background:var(--f-lav); color:var(--f-ink-soft);
  border-top-left-radius:var(--f-panel-r); border-top-right-radius:var(--f-panel-r);
  margin-top:calc(-1 * var(--f-panel-r));
  padding:calc(var(--ve-barh, 96px) / 2 + clamp(26px, 2.8vw, 44px)) 0 var(--ve-pad);
}

/* ==========================================================================
   LE BANDEAU DES PROFILS — flottant, à cheval sur la frontière
   Il ne vit plus DANS la section : il est posé à la fin du hero et descend
   d'une demi-hauteur sur le panneau clair qui monte. C'est la frontière
   traitée comme un objet — la signature du site — appliquée à une commande.
   Il n'est plus `sticky` : le mur tient dans un écran, la barre reste sous
   les yeux, et la page n'a plus AUCUN élément épinglé.
   ========================================================================== */
/* Sans JS il n'a aucun effet : on le retire plutôt que de laisser une commande
   morte (règle 8 — les huit tuiles restent lisibles, toutes allumées). */
html:not(.js) .ve-fil{ display:none }

.ve-fil{
  position:relative; z-index:6;
  margin-top:clamp(38px, 5vw, 74px);
  margin-bottom:calc(-1 * (var(--ve-barh, 96px) / 2 + var(--f-panel-r)));
  padding:clamp(8px, .9vw, 11px);
  border-radius:100px;
  /* ⚠️ « Moins fade » (user, 2026-09-10) : le verre passe de .055 à .10, le
     filet de .22 à .38, et un liseré intérieur clair dessine l'arête haute —
     c'est lui qui donne l'objet ; une pilule de verre sans arête se lit comme
     une zone morte. Le halo porté est resserré pour que la pilule se DÉTACHE
     du navy au lieu d'y fondre. */
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(205,216,228,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 26px 54px -26px rgba(0,0,0,.9);
  display:inline-flex; align-items:center; gap:6px;
}
.ve-fil-r{ display:flex; flex-wrap:nowrap; gap:4px }
.ve-b{
  font-family:var(--sans); font-weight:600; font-size:.86rem; letter-spacing:.005em;
  line-height:1.2; color:#EDF2F8; white-space:nowrap;
  background:transparent; border:0; border-radius:100px;
  padding:clamp(.72em,.9vw,.95em) clamp(1em,1.3vw,1.5em); cursor:pointer;
  transition:background .2s, color .2s;
}
.ve-b:hover{ background:rgba(255,255,255,.14) }
/* l'anneau du socle est orange : il tient sur ce fond sombre (8,34:1), on le
   garde tel quel, mais en offset NÉGATIF — le bandeau est un conteneur arrondi
   et un anneau posé dehors se lit mal sur son bord. */
.ve-page .ve-fil-r .ve-b:focus-visible{ outline-offset:-3px }
.ve-b[aria-pressed="true"]{ background:var(--f-white); color:var(--f-navy); box-shadow:0 2px 10px -4px rgba(0,0,0,.5) }
/* ⚠️ Le compte-rendu ne vit PAS dans le bandeau. Posé sous lui en absolu, il
   tombait sur la couture arrondie de la section — moitié sur navy, moitié sur
   lavande, illisible dans les deux cas. Il est dans le FLUX, en tête de la
   colonne des tensions, là où il informe. */
.ve-fil-s{
  font-family:var(--sans); font-weight:600; font-size:.74rem; letter-spacing:.13em;
  text-transform:uppercase; color:#526270; margin:0 0 clamp(14px, 1.6vw, 22px);
}
.ve-fil-s:empty{ display:none }

/* ==========================================================================
   LA LISTE PILOTE LE PANNEAU
   Source : Fragment v1, « la liste qui recolore la section au survol », dans le
   corpus depuis le 2026-09-05 et jamais employée sur CTV.

   Deux blocs asymétriques 45/55. À GAUCHE, les huit tensions empilées en
   compact — toutes visibles d'un seul regard, la charnière toujours en Spectral
   italique. À DROITE, un panneau qui ne bouge pas : la photo de la tension
   désignée, sa phrase EN GRAND, ses profils, son rendez-vous.

   ⚠️ LE TEXTE N'EST PLUS SUR L'IMAGE. Le voile des trois tours précédents
   n'existait que pour rendre lisible un titre posé sur une photo pleine de
   fenêtres et de tableaux blancs. Ici la photo est dans le panneau et le texte
   à côté : il n'y a plus rien à couvrir. On ne réduit pas l'overlay, on le rend
   INUTILE — c'est la réponse à la question du user.
   ========================================================================== */

.ve-split{
  display:grid; gap:clamp(26px, 3.6vw, 64px);
  grid-template-columns:minmax(0,.45fr) minmax(0,.55fr);
  /* ⚠️ `center`, et SURTOUT PAS l'étirement des rangées à `1fr` qu'on avait
     posé pour équilibrer les deux colonnes. Cet étirement supposait un nombre
     de rangées FIXE ; depuis que le filtre MASQUE, il varie de 2 à 7 — et deux
     tensions restantes se partageaient toute la hauteur du panneau, soit
     322 px de rangée pour une ligne de texte. Mesuré. Les rangées gardent leur
     hauteur naturelle et c'est la COLONNE ENTIÈRE qui se centre en face du
     panneau : l'équilibre tient quel que soit le nombre de tensions retenues. */
  align-items:center;
}

/* ---------- la colonne de gauche ---------- */
.ve-list{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(16,27,43,.16) }
.ve-e{ border-bottom:1px solid rgba(16,27,43,.16) }

.ve-item{
  display:block; width:100%; text-align:left; cursor:pointer;
  background:transparent; border:0; font:inherit; color:inherit;
  padding:clamp(11px, 1.3vw, 17px) clamp(10px, 1.1vw, 16px);
  transition:background .2s var(--f-ease), padding-left .24s var(--f-ease);
}
.ve-item .a{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(1.02rem, 1.24vw, 1.18rem); line-height:1.3; letter-spacing:-.02em;
  color:var(--f-ink);
}
/* ⚠️ PLUS D'ITALIQUE dans la rédaction des enjeux (user, 2026-09-10). Le
   contraste de registres survit sans elle : Montserrat gras pour l'action,
   Spectral ROMAIN pour la contrainte, plus l'accent. C'est la famille et la
   graisse qui portent la charnière, non plus l'inclinaison. */
.ve-item .b{
  font-family:var(--serif); font-style:normal; font-weight:400;
  font-size:clamp(.98rem, 1.16vw, 1.1rem); line-height:1.3; letter-spacing:-.006em;
  color:var(--ve-accent);            /* #A03608 = 6,03:1 sur #EDEFF4 */
}
.ve-item:hover{ background:rgba(16,27,43,.045) }
/* la tension désignée : un filet d'accent la tient, et elle avance d'un cran */
.ve-e.is-on .ve-item{
  background:rgba(16,27,43,.06);
  box-shadow:inset 3px 0 0 var(--ve-accent);
  padding-left:clamp(18px, 1.9vw, 26px);
}
.ve-page .ve-list .ve-item:focus-visible{ outline-color:var(--ve-accent); outline-offset:-3px }

/* la source : c'est elle qui s'affiche SANS JavaScript, sous chaque tension.
   Avec JS, le panneau la reprend et elle s'efface d'ici. */
html.js .ve-src{ display:none }
.ve-src{ padding:0 clamp(10px,1.1vw,16px) clamp(16px,1.8vw,22px) }

/* ---------- le filtre MASQUE ----------
   ⚠️ `[hidden]` vaut (0,1,0) et ne bat PAS le `.ve-e{display:flex}` que pose
   l'équilibrage des colonnes au-dessus de 900 px — l'élément resterait affiché
   sans qu'aucune erreur ne le dise. C'est le piège `[hidden]` du projet, déjà
   payé le 2026-09-05. La règle est donc explicite et page-scopée. */
.ve-page .ve-e[hidden]{ display:none }

/* ==========================================================================
   LE PANNEAU
   ========================================================================== */
html:not(.js) .ve-panel{ display:none }

/* ==========================================================================
   LA TEINTE DU PROFIL — demandée par le user le 2026-09-10
   ⚠️ ÉCART AU VERROU N°5, nommé : « pas de chantier couleur au-delà des trois
   registres ». Je n'ajoute AUCUNE couleur — les quatre teintes sont les trois
   registres de la charte (orange = ce qui agit · bronze = ce qui qualifie ·
   nacre = ce qui nomme) plus une éclaircie du navy de marque. Ce que je
   franchis, c'est leur SENS : ici elles désignent un profil, pas une fonction.
   C'est l'écart réel, et il est arbitrable d'un mot.
   Deux porteurs, jamais le fond entier : un liseré franc à la jonction
   photo / texte, et un bloom radial faible sous le texte — le vocabulaire du
   `.fcta` du socle. Le fond navy ne bouge pas, donc la lisibilité non plus. */
.ve-panel{
  position:relative; overflow:hidden;
  background:var(--f-navy-3); color:var(--f-silver);
  border-radius:clamp(14px, 1.6vw, 22px);
  box-shadow:0 40px 90px -46px rgba(6,12,22,.7);
}
.ve-panel:focus-visible{ outline:2px solid var(--ve-accent); outline-offset:3px }

/* la photo : elle vit en haut du panneau, SANS texte dessus. Les huit sont
   posées l'une sur l'autre et seule celle de la tension désignée est opaque —
   aucun échange de `src`, donc aucun clignotement au changement. */
.ve-shots{ position:relative; aspect-ratio:16/8; overflow:hidden; background:var(--f-navy-2) }
.ve-shot{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .42s var(--f-ease);
  transform:scale(1.06);
  animation:ve-drift 26s var(--d, 0s) ease-in-out infinite alternate;
}
.ve-shot.is-on{ opacity:1 }
@keyframes ve-drift{
  from{ transform:scale(1.06) translate3d(-1%, -.8%, 0) }
  to  { transform:scale(1.13) translate3d( 1%,  .8%, 0) }
}
@media (prefers-reduced-motion:reduce){
  .ve-shot{ animation:none; transition:none }
}

.ve-panel-in{
  position:relative; padding:clamp(22px, 2.6vw, 40px);
  border-top:3px solid var(--ve-bord, transparent);
  transition:border-color .42s var(--f-ease);
}
.ve-panel-in::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  /* deux blooms plutôt qu'un : à .26 sur un navy aussi profond, une seule
     nappe ne se voyait pas — « mettre le panneau à la teinte » n'était pas
     tenu. Le second, en bas à droite, fait traverser la teinte au panneau. */
  background:
    radial-gradient(122% 88% at 12% 0%, var(--ve-teinte, transparent), transparent 66%),
    radial-gradient(90% 78% at 96% 104%, var(--ve-teinte2, transparent), transparent 62%);
  transition:background .42s var(--f-ease);
}
.ve-panel-in > *{ position:relative; z-index:1 }

/* orange = ce qui agit · bronze = ce qui qualifie · nacre = ce qui nomme ·
   bleu = une éclaircie du navy de marque. Aucune couleur neuve. */
.ve-panel[data-profil="juridique"]  { --ve-teinte:rgba( 88,142,198,.40); --ve-teinte2:rgba( 88,142,198,.22); --ve-bord:rgba( 88,142,198,.92) }
.ve-panel[data-profil="direction"]  { --ve-teinte:rgba(255,158, 27,.26); --ve-teinte2:rgba(255,158, 27,.14); --ve-bord:rgba(255,158, 27,.95) }
.ve-panel[data-profil="projet"]     { --ve-teinte:rgba(201,160, 92,.34); --ve-teinte2:rgba(201,160, 92,.18); --ve-bord:rgba(201,160, 92,.95) }
.ve-panel[data-profil="prestataire"]{ --ve-teinte:rgba(205,216,228,.24); --ve-teinte2:rgba(205,216,228,.12); --ve-bord:rgba(205,216,228,.92) }

@media (prefers-reduced-motion:reduce){
  .ve-panel-in, .ve-panel-in::before{ transition:none }
}
/* LA PHRASE EN GRAND — c'est le gain de cette composition : elle passe d'un
   paragraphe de 1,1 rem à un énoncé de 1,9 rem. */
.ve-panel .ve-d{
  margin:0 0 clamp(18px, 2vw, 28px);
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.18rem, 2.45vw, 1.95rem); line-height:1.38; letter-spacing:-.012em;
  /* ⚠️ le `vw` se calcule sur la FENÊTRE, pas sur le panneau : à 1,62vw la
     phrase plafonnait à 1,22 rem sur un écran de 1200 px, très loin des 1,9 rem
     visés. Coefficient relevé, mesuré à l'écran et non déduit du clamp. */
  color:#E7EDF4; max-width:34ch;
}
.ve-panel .ve-icp{
  margin:0 0 clamp(18px, 2vw, 26px); display:flex; flex-wrap:wrap; gap:.34em 1.1em;
  font-family:var(--sans); font-weight:600; font-size:.74rem; letter-spacing:.13em;
  text-transform:uppercase; line-height:1.5; color:#9FB0C4;
}
.ve-panel .ve-icp .on{ color:var(--f-orange) }

/* le rendez-vous : contour plutôt qu'aplat — le verrou n°5 réserve l'orange à
   CE QUI AGIT, et ici c'est le libellé et la flèche qui agissent. */
.ve-cta{
  display:inline-flex; align-items:center; gap:.7em; text-decoration:none;
  font-family:var(--sans); font-weight:600; font-size:clamp(.88rem,1vw,.98rem);
  color:var(--f-white); background:rgba(255,158,27,.12);
  border:1px solid var(--f-orange); border-radius:6px; padding:.72em 1.15em;
  transition:background .2s, color .2s;
}
.ve-cta:hover{ background:var(--f-orange); color:var(--f-navy) }
.ve-cta-c{ width:22px; height:22px; border-radius:50%; flex:none; background:rgba(255,158,27,.22); display:grid; place-items:center }
.ve-cta:hover .ve-cta-c{ background:rgba(16,27,43,.18) }
.ve-cta-c::after{ content:""; width:0; height:0; border-left:5px solid currentColor;
  border-top:3.5px solid transparent; border-bottom:3.5px solid transparent; transition:transform .2s }
.ve-cta:hover .ve-cta-c::after{ transform:translateX(2px) }
/* sans JS le CTA vit dans la colonne claire : l'encre blanche y serait illisible */
.ve-src .ve-cta{ color:var(--f-ink); background:rgba(255,158,27,.14) }
.ve-src .ve-d{ font-family:var(--serif); font-size:1.02rem; line-height:1.6; color:#2B3A4C; margin:0 0 .9em }
.ve-src .ve-icp{ display:flex; flex-wrap:wrap; gap:.3em 1em; margin:0 0 1em;
  font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:#526270 }
.ve-src .ve-icp .on{ color:var(--ve-accent) }

/* ==========================================================================
   LES LEVIERS — panneau sombre qui MONTE sur la section claire.
   Contraste d'échelle violent : six mots monumentaux contre une phrase
   minuscule. Les six forment UN SEUL jeu : ils arrivent EN BLOC, jamais en
   cascade — une cascade dirait « six offres séparées », l'inverse du propos.
   ========================================================================== */
.ve-lev{
  position:relative; overflow:hidden;
  background:var(--f-navy-3);
  border-top-left-radius:var(--f-panel-r); border-top-right-radius:var(--f-panel-r);
  margin-top:calc(-1 * var(--f-panel-r));
  border-top:1px solid rgba(205,216,228,.16);
  padding:var(--ve-pad) 0;
}
.ve-lev h2{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(1.7rem, 3.6vw, 3.05rem); line-height:1.04; letter-spacing:-.035em;
  color:var(--f-white); max-width:22ch; margin:0 0 .8em;
}
.ve-lev-p{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.02rem, 1.28vw, 1.19rem); line-height:1.62;
  color:var(--f-silver); max-width:46ch; margin:0 0 clamp(28px, 3.6vw, 52px);
}
.ve-lev-l{
  list-style:none; margin:0 0 clamp(34px, 4.4vw, 62px); padding:0;
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:.12em clamp(22px, 3.4vw, 62px);
}
.ve-lev-l li{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(1.7rem, 5vw, 4rem); line-height:1.06; letter-spacing:-.045em;
  color:var(--f-silver);
}
.ve-lev-l li:last-child{ color:var(--f-orange) }   /* l'IA : le seul levier neuf */

/* ==========================================================================
   CTA — titre en nacre relevé, comme sur /nos-interventions/ et les V2.
   Portée par .ve-page : `.fcta` sert 17 pages, une règle nue fuirait partout.
   Spécificité égale à `.bold .fcta h2` → c'est l'ORDRE qui tranche, et cette
   feuille est chargée après cortex-bold.css.
   ========================================================================== */
.ve-page .fcta h2{ color:#DFE7F0 }

/* ==========================================================================
   ⚠️ SOUS 900 px : LE PANNEAU DISPARAÎT, LA SOURCE REPREND SA PLACE
   Deux colonnes de 130 px à 320 px, c'est ce que la mesure a montré tant qu'il
   manquait ce palier — le bloc grimpait à 1376 px de haut. Le panneau latéral
   n'a de sens qu'à côté de la liste : en une colonne, il serait un pied de page
   loin du doigt. La phrase revient donc SOUS sa tension, en accordéon — même
   contenu, même source, aucun doublon dans le HTML.
   Et c'est exactement ce qui avait été annoncé au user quand il a choisi cette
   piste : « sur téléphone il n'y a pas deux colonnes, la liste redevient un
   empilement et le panneau passe sous chaque ligne au tap ».
   ========================================================================== */
@media (max-width:899px){
  .ve-split{ grid-template-columns:minmax(0,1fr) }
  .ve-panel{ display:none }
  html.js .ve-e.is-on .ve-src{ display:block }
  .ve-e.is-on .ve-item{ padding-bottom:clamp(6px,1.4vw,10px) }
}

/* ==========================================================================
   PALIERS
   ========================================================================== */
/* ⚠️ Les deux paliers du damier (12 colonnes → 4 colonnes → empilement) ont été
   RETIRÉS avec lui : ils ne pilotaient plus que des classes mortes
   (`.ve-wall`, `.ve-tile`, `.ve-rev`, `.ve-t`, `.ve-e[data-w]`). Le projet
   traîne déjà un chantier « composants morts » — inutile de l'alimenter.
   Il ne reste qu'un seul palier de mise en page, celui du bandeau. */

/* ---------- le bandeau, en dessous de 1180 px ---------- */
/* ⚠️ Mesuré : les cinq intitulés du user font ~1040 px de large. Ils tiennent
   sur une ligne au-delà de 1180 px, plus en dessous. Le bandeau passe alors sur
   une ligne qui défile latéralement, dans son propre conteneur clippé — la
   page, elle, ne déborde toujours pas. Le voile de droite est l'affordance : la
   barre native est retirée parce qu'un ascenseur de 4 px sous une rangée de
   pilules se lit comme un défaut, pas comme une commande. */
/* ⚠️ Seuil MESURÉ, pas supposé. Avec les intitulés complets le bandeau faisait
   1310 à 1375 px — il ne tenait dans AUCUNE colonne, et comme le hero est passé
   en `overflow:visible` pour le laisser descendre, il créait un scroll
   horizontal jusqu'à 1400 px de fenêtre. C'est le piège « ouvrir overflow
   libère ce qui devait rester borné », vécu une troisième fois sur ce projet.
   Correctif de fond : la COMMANDE porte des libellés courts (un segmented
   control ne porte pas des phrases de 40 caractères) ; les intitulés complets
   du user vivent dans la révélation de chaque plaque et dans l'`aria-label` de
   chaque bouton, donc rien n'est perdu, pas même pour un lecteur d'écran. */
@media (max-width:919px){
  .ve-fil{ display:flex; max-width:100%; border-radius:clamp(22px,3vw,34px) }
  .ve-fil-r{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-right:24px;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent);
            mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent);
  }
  .ve-fil-r::-webkit-scrollbar{ display:none }
  .ve-b{ flex:none }
}
@media (max-width:699px){
  .ve-b{ font-size:.8rem; padding:.66em 1em }
  .ve-fil{ margin-bottom:calc(-1 * (var(--ve-barh, 76px) / 2 + var(--f-panel-r))) }
}