/* ============================================================================
   Le panneau des variantes, et le modal de ses informations.
   Aucune valeur brute : tout vient de `tokens.css`.
   ========================================================================= */

/* ---------- le bouton du chrome ---------- */
.appbar__var{flex:none;gap:var(--s-2)}
.appbar__var .vb-cnt{
  font-family:var(--font-mono);font-size:var(--t-3xs);line-height:1;
  color:var(--soft-foreground);background:var(--background);
  border-radius:var(--radius-full);padding:2px var(--s-2);
}
.appbar__var.is-on{background:var(--accent);border-color:var(--border-strong);color:var(--foreground)}

/* ---------- le panneau ----------
   Il se pose PAR-DESSUS, il ne repousse rien : le plan et la 3D garderaient
   sinon un cadrage différent selon qu'il est ouvert, et l'on comparerait deux
   implantations à deux échelles. */
.vp{
  /* Le haut est MESURÉ : la barre d'application s'enroule sur un portable,
     donc sa hauteur n'est pas une valeur de dessin mais une géométrie, posée
     en ligne par le JS — comme la taille d'un bloc du mixer. */
  position:fixed;inset-block:0;inset-inline-end:0;z-index:40;
  width:min(400px,92vw);box-sizing:border-box;
  display:flex;flex-direction:column;
  background:var(--background);border-inline-start:1px solid var(--border-strong);
  box-shadow:var(--shadow-lg);
}
.vp[hidden]{display:none}
.vp__head{
  flex:none;display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-4) var(--s-4) var(--s-3);
  border-block-end:1px solid var(--border);
}
.vp__head h2{margin:0;font-size:var(--t-lg);font-weight:600;letter-spacing:-.015em}
.vp__cnt{flex:1;font-size:var(--t-2xs);color:var(--muted-foreground)}
.vp__body{
  flex:1;min-height:0;overflow:auto;
  padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-5);
}
/* Rien ne rétrécit dans le corps : c'est LUI qui défile. Sans cela, les onglets
   de groupe — un conteneur en `overflow-x:auto`, donc de hauteur minimale nulle
   — s'écrasaient dès que la liste des variantes remplissait le panneau. */
.vp__body>*,.vp-sec>*{flex:none}
.vp-sec{display:flex;flex-direction:column;gap:var(--s-3)}
.vp-enreg{gap:var(--s-2)}

.vp-note{margin:0;font-size:var(--t-2xs);color:var(--muted-foreground);line-height:var(--lh-snug)}
.vp-note.is-bad{color:var(--destructive)}

/* ---------- le compte ---------- */
.vp-conn{display:flex;flex-direction:column;gap:var(--s-2)}
.vp-conn>label{font-size:var(--t-xs);color:var(--soft-foreground)}
.vp-conn__row{display:flex;gap:var(--s-2)}
.vp-conn__row input{flex:1;min-width:0}
.vp-grp{display:flex;align-items:center;gap:var(--s-2)}
.vp-grp__n{flex:1;min-width:0;display:flex;flex-direction:column;line-height:var(--lh-tight)}
.vp-grp__n b{font-size:var(--t-sm);font-weight:600}
.vp-grp__n span{font-size:var(--t-2xs);color:var(--muted-foreground)}
.vp-grp__set{flex:none}
.vp-av{
  inline-size:var(--s-5);block-size:var(--s-5);flex:none;border-radius:var(--radius-full);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--t-3xs);font-weight:600;letter-spacing:.02em;
  background:var(--soft-foreground);color:var(--background);
}
.vp-av.is-moi{background:var(--primary)}

/* ---------- enregistrer ----------
   Le champ du nom et le « + » sont les deux moitiés d'un même bouton : on
   nomme, puis on pose. */
.vp-save{
  flex:none;display:flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-block-size:var(--s-7);padding:var(--s-3);cursor:pointer;
  font:inherit;font-size:var(--t-sm);font-weight:500;color:var(--foreground);
  background:transparent;border:1.5px dashed var(--border-strong);border-radius:var(--radius-lg);
}
.vp-save:hover{border-color:var(--muted-foreground);background:var(--card)}
.vp-save:disabled{opacity:.55;cursor:default}
.vp-save__p{font-size:var(--t-md);line-height:1}
.vp-save--nom{padding:0;cursor:default;align-items:stretch;overflow:hidden}
.vp-save--nom:hover{background:transparent}
.vp-save--nom:focus-within{border-color:var(--ring);border-style:solid}
.vp-save__nom{
  flex:1;min-width:0;padding:0 var(--s-3);
  font:inherit;font-size:var(--t-sm);color:var(--foreground);
  background:transparent;border:0;
}
.vp-save__nom:focus-visible{outline:none}
.vp-save__nom::placeholder{color:var(--muted-foreground)}
.vp-save__plus{
  flex:none;inline-size:var(--s-7);display:flex;align-items:center;justify-content:center;
  color:var(--primary-foreground);background:var(--primary);border:0;cursor:pointer;
  border-inline-start:1.5px dashed var(--border-strong);
}
.vp-save__plus:hover{opacity:.88}
.vp-save__plus:disabled,.vp-save__nom:disabled{opacity:.55;cursor:default}

/* ---------- l'avertissement avant de charger ---------- */
.vp-alerte{
  padding:var(--s-3);border-radius:var(--radius-lg);
  background:var(--card);border:1px solid var(--warn);
}
.vp-alerte p{margin:0 0 var(--s-3);font-size:var(--t-xs);color:var(--soft-foreground);line-height:var(--lh-snug)}
.vp-alerte__a{display:flex;flex-wrap:wrap;gap:var(--s-2)}

/* ---------- les cartes ---------- */
/* ---------- la carte ----------
   Horizontale et courte. Celle d'avant était haute comme une affiche : trois
   variantes remplissaient le panneau, et comparer demandait de défiler. La
   miniature tient dans un CARRÉ à gauche ; le nom et la note, qui sont ce
   qu'on lit en premier, prennent la largeur. */
.vp-liste{display:flex;flex-direction:column;gap:var(--s-3)}
.vc{
  position:relative;display:flex;gap:var(--s-3);align-items:stretch;
  padding:var(--s-2);border-radius:var(--radius-lg);
  background:var(--card);border:1px solid var(--border);
}
.vc.is-perime{border-style:dashed}
/* La nouvelle : cernée, et soulignée d'un trait sous la carte — le temps de
   la retrouver. */
.vc.is-new{border-color:var(--ring);box-shadow:0 0 0 1px var(--ring)}
.vc.is-new::after{
  content:"";position:absolute;inset-inline:var(--s-4);inset-block-end:calc(var(--s-2) * -1 + 1px);
  block-size:2px;border-radius:var(--radius-full);background:var(--ring);
}
.vc__vig{
  position:relative;flex:none;inline-size:104px;block-size:104px;
  border-radius:var(--radius-sm);border:1px solid var(--border-soft);
  background:var(--background);overflow:hidden;
}
.vc__vig svg{inline-size:100%;block-size:100%;display:block}
/* La colonne fait la hauteur de la miniature : les gestes se calent sur son bas. */
.vc__d{flex:1;min-width:0;min-block-size:104px;display:flex;flex-direction:column;gap:var(--s-1)}
.vc__t{display:flex;align-items:baseline;gap:var(--s-3)}
.vc__nom{
  flex:1;min-width:0;margin:0;
  font-size:var(--t-md);font-weight:600;letter-spacing:-.012em;line-height:var(--lh-tight);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vc__note{flex:none;font-size:var(--t-num-md);font-weight:500;line-height:1;color:var(--soft-foreground)}
.vc__note.is-haut{color:var(--ok)}
.vc__note.is-bas{color:var(--destructive)}
.vc__meta{
  margin:0;display:flex;align-items:center;gap:var(--s-2);min-width:0;
  font-size:var(--t-2xs);color:var(--muted-foreground);
}
.vc__qui{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vc__fil{margin:0;font-size:var(--t-2xs);color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vc__tags{display:flex;flex-wrap:wrap;gap:var(--s-1)}
.vc-tag{
  padding:0 var(--s-2);line-height:1.6;
  font-size:var(--t-3xs);font-weight:600;letter-spacing:.03em;color:var(--soft-foreground);
  border:1px solid var(--border);border-radius:var(--radius-full);
}
.vc-tag--new{color:var(--on-fill);background:var(--focus-fill);border-color:var(--focus-fill)}
.vc-tag--perime{color:var(--on-fill);background:var(--warn-fill);border-color:var(--warn-fill)}
.vc__a{display:flex;gap:var(--s-2);margin-block-start:auto}
.vc__load{flex:1}
.vc__info{flex:none}
.vc__sup{flex:none;color:var(--muted-foreground)}
.vc__sup:hover,.vc__sup.is-arme{color:var(--destructive);border-color:var(--destructive)}

/* ---------- la mèche ----------
   Deux faces empilées, qui passent l'une à l'autre en fondu flou, et un
   contour SVG dont le trait recule le long du bord : un seul tiret de la
   longueur du tour, décalé de 0 à -tour (variantes.js). */
.meche{
  position:relative;
  transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),transform var(--dur-2) var(--ease);
}
.meche.is-arme{border-color:var(--border)}
.meche:active:not(:disabled){transform:scale(.97)}
.meche__faces{display:inline-grid}
.meche__f{
  grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  transition:opacity var(--dur-2) ease,filter var(--dur-2) ease,visibility 0s;
}
.meche__f--arme,.meche.is-arme .meche__f{
  opacity:0;filter:blur(2px);visibility:hidden;transition-delay:0s,0s,var(--dur-2);
}
.meche.is-arme .meche__f--arme{opacity:1;filter:none;visibility:visible;transition-delay:0s}
/* la flèche d'annulation arrive en tournant */
.meche__f--arme .ic{transform:rotate(-70deg);transition:transform var(--dur-2) var(--ease)}
.meche.is-arme .meche__f--arme .ic{transform:none}
.meche__rim{
  position:absolute;top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);
  overflow:visible;pointer-events:none;opacity:0;
  filter:drop-shadow(0 0 3px color-mix(in srgb,var(--destructive) 60%,transparent));
  transition:opacity var(--dur-2) ease;
}
.meche.is-arme .meche__rim{opacity:1}
.meche__rim rect{
  x:.75px;y:.75px;width:calc(100% - 1.5px);height:calc(100% - 1.5px);
  rx:calc(var(--radius-md) - .75px);
  fill:none;stroke:var(--destructive);stroke-width:1.5px;stroke-linecap:round;
}

/* ---------- trier, filtrer, chercher, Reload ---------- */
.vp-barre{
  display:flex;align-items:center;gap:var(--s-2);
  position:sticky;inset-block-start:calc(var(--s-4) * -1);z-index:3;
  margin-inline:calc(var(--s-4) * -1);padding:var(--s-2) var(--s-4);
  background:var(--background);border-block-end:1px solid var(--border-soft);
}
.vp-barre__g{flex:1;min-width:0;display:flex;align-items:center;gap:var(--s-1)}
.vp-outil{padding-inline:var(--s-2);min-inline-size:var(--ctl-h);gap:var(--s-1)}
.vp-outil.is-actif{color:var(--foreground);background:var(--accent);border-color:var(--border-strong)}
.vp-outil[aria-expanded="true"]{border-color:var(--ring)}
.vp-outil__r{max-inline-size:14ch;overflow:hidden;text-overflow:ellipsis;font-size:var(--t-2xs)}
.vp-reload{flex:none}
.vp-cherche{
  flex:1;min-width:0;display:flex;align-items:center;gap:var(--s-2);
  min-block-size:var(--ctl-h);padding-inline:var(--s-2);color:var(--muted-foreground);
  background:var(--card);border:1px solid var(--ring);border-radius:var(--radius-md);
}
.vp-cherche input{
  flex:1;min-width:0;font:inherit;font-size:var(--t-xs);color:var(--foreground);
  background:transparent;border:0;
}
.vp-cherche input:focus-visible{outline:none}

.vp-pop{
  position:absolute;z-index:5;inset-inline:var(--s-4);inset-block-start:calc(100% + var(--s-1));
  max-block-size:min(70vh,560px);overflow:auto;
  display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-3);
  background:var(--popover);color:var(--popover-foreground);
  border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
}
/* Il s'ouvre en pop, comme le déroulant — à l'ouverture seulement : chaque
   réglage le repeint, et il ne doit pas rejaillir à chaque clic. */
.vp-pop.is-neuf{transform-origin:top left;animation:vp-pop var(--dur-2) var(--ease-out)}
@keyframes vp-pop{from{opacity:0;transform:scale(.95)}}
.vp-pop h4{
  margin:var(--s-1) 0 0;font-size:var(--t-3xs);font-weight:600;
  letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--muted-foreground);
}
.vp-pop h4:first-child{margin-block-start:0}
.vp-pop__note{display:flex;gap:var(--s-3)}
.vp-pop__note label{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-xs);color:var(--soft-foreground)}
.vp-pop__note input{
  inline-size:6ch;min-block-size:var(--tap-min);padding:0 var(--s-2);
  font:inherit;font-size:var(--t-xs);color:var(--foreground);
  background:var(--card);border:1px solid var(--input);border-radius:var(--radius-md);
}
.vp-seg{align-self:flex-start;max-inline-size:100%}
.vp-seg .btn{min-block-size:var(--tap-min);font-size:var(--t-2xs);padding-inline:var(--s-2)}
.vp-pils{display:flex;flex-wrap:wrap;gap:var(--s-1)}
.vp-pil{
  padding:var(--s-1) var(--s-3);cursor:pointer;
  font:inherit;font-size:var(--t-2xs);color:var(--soft-foreground);
  background:transparent;border:1px solid var(--border);border-radius:var(--radius-full);
}
.vp-pil[aria-pressed="true"]{color:var(--primary-foreground);background:var(--primary);border-color:var(--primary)}
.vp-pop .vp-lien{align-self:flex-start;margin-block-start:var(--s-1)}

/* la miniature : le périmètre du relevé, les corps de la variante */
.vp-per{fill:var(--card);stroke:var(--site-perimetre);stroke-width:1.3;stroke-linejoin:round}
.vp-corps{fill:var(--soft-foreground)}
.vp-corps.is-sport{fill:var(--f-spo)}
.is-perime .vp-corps{opacity:.55}

/* ---------- le modal ---------- */
.vm{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center}
.vm[hidden]{display:none}
.vm__voile{position:absolute;inset:0;background:color-mix(in srgb,var(--foreground) 46%,transparent)}
.vm__box{
  position:relative;z-index:1;
  inline-size:min(900px,94vw);max-block-size:min(860px,92vh);
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;
}
.vm__head{
  flex:none;display:flex;align-items:flex-start;gap:var(--s-4);
  padding:var(--s-5) var(--s-5) var(--s-4);border-block-end:1px solid var(--border-soft);
}
.vm__g{flex:1;min-width:0}
.vm__nom{
  inline-size:100%;box-sizing:border-box;
  font:inherit;font-size:var(--t-lg);font-weight:600;letter-spacing:-.018em;
  color:var(--foreground);background:transparent;
  border:1px solid transparent;border-radius:var(--radius-sm);
  padding:var(--s-1) var(--s-2);margin-inline-start:calc(var(--s-2) * -1);
}
.vm__nom:hover:not(:disabled){border-color:var(--border)}
.vm__nom:focus{border-color:var(--ring);background:var(--background)}
.vm__meta{
  margin:var(--s-2) 0 0;display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-2);
  font-size:var(--t-xs);color:var(--muted-foreground);
}
.vm__chip{
  font-size:var(--t-2xs);color:var(--soft-foreground);background:var(--background);
  border:1px solid var(--border-soft);border-radius:var(--radius-full);padding:2px var(--s-2);
}
.vm-perime{
  margin:0;padding:var(--s-3) var(--s-5);
  font-size:var(--t-xs);color:var(--warn);background:var(--background);
  border-block-end:1px solid var(--border-soft);
}
.vm__body{
  flex:1;min-height:0;overflow:auto;padding:var(--s-4) var(--s-5);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);align-content:start;
}
.vm-sec{
  padding:var(--s-4);border-radius:var(--radius-md);
  background:var(--background);border:1px solid var(--border-soft);
}
.vm-sec h4{
  margin:0 0 var(--s-3);font-size:var(--t-3xs);font-weight:600;
  text-transform:uppercase;letter-spacing:var(--track-caps);color:var(--muted-foreground);
}
.vm-sec--plan{grid-column:1 / -1}
.vm-plan{
  block-size:260px;border-radius:var(--radius-sm);
  border:1px solid var(--border-soft);background:var(--card);overflow:hidden;
}
.vm-plan svg{inline-size:100%;block-size:100%;display:block}

.vm-note{display:flex;align-items:flex-start;gap:var(--s-4);margin-block-end:var(--s-3)}
.vm-note__n{font-size:var(--t-num-lg);font-weight:500;line-height:1;letter-spacing:-.02em;color:var(--soft-foreground)}
.vm-note__n.is-haut{color:var(--ok)}
.vm-note__n.is-bas{color:var(--destructive)}
.vm-note__s{font-size:var(--t-sm);color:var(--muted-foreground);margin-inline-start:2px;letter-spacing:0}
.vm-note__g{display:flex;flex-direction:column;gap:var(--s-1);flex:none}
.vm-noteb{padding:var(--s-4);background:var(--card);border-radius:var(--radius-sm);margin-block-end:var(--s-5)}
.vm-note p{margin:0;font-size:var(--t-2xs);color:var(--muted-foreground);line-height:var(--lh-snug)}

.vm-c{display:flex;align-items:center;gap:var(--s-3);margin-block-start:var(--s-1)}
.vm-c__n{flex:1;min-width:0;font-size:var(--t-2xs);color:var(--soft-foreground)}
.vm-c__t{flex:1.4;min-width:0;font-size:var(--t-2xs);color:var(--muted-foreground)}
.vm-nuls{margin:var(--s-3) 0 0;padding-block-start:var(--s-2);border-block-start:1px solid var(--border-soft);
  font-size:var(--t-2xs);color:var(--muted-foreground);line-height:var(--lh-snug)}

.vm-r{display:flex;align-items:baseline;gap:var(--s-3);font-size:var(--t-xs);margin-block-start:var(--s-1)}
.vm-r>span{flex:1;min-width:0;color:var(--soft-foreground)}
.vm-r>b{font-weight:500;font-size:var(--t-num-sm)}
.vm-r.is-ecart>b{color:var(--warn)}

.vm-v{margin:var(--s-1) 0 0;font-size:var(--t-xs);color:var(--soft-foreground)}
.vm-v.is-ok{color:var(--ok);font-weight:600}
.vm-v.is-warn{color:var(--warn)}
.vm-v.is-err{color:var(--destructive);font-weight:600}

.vm-membre{display:flex;align-items:center;gap:var(--s-3);padding-block:var(--s-2)}
.vm-membre+.vm-membre{border-block-start:1px solid var(--border-soft)}
.vm-membre__n{flex:1;min-width:0;display:flex;flex-direction:column;line-height:var(--lh-tight)}
.vm-membre__n b{font-size:var(--t-xs);font-weight:500}
.vm-membre__n span{font-size:var(--t-2xs);color:var(--muted-foreground)}
.vm-membre.is-invite{opacity:.7}
.vm-role{
  font-size:var(--t-2xs);color:var(--soft-foreground);background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius-full);padding:2px var(--s-3);
}
.vm-mail{inline-size:100%;box-sizing:border-box}

.vm__pied{
  flex:none;display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-3) var(--s-5);background:var(--background);
  border-block-start:1px solid var(--border-soft);
}
.vm__dit{flex:1;min-width:0;font-size:var(--t-2xs);color:var(--muted-foreground)}
.vm__sup{color:var(--destructive)}
.vm__sup:hover{color:var(--destructive);border-color:var(--destructive)}

@media (max-width:760px){
  .vm__body{grid-template-columns:minmax(0,1fr)}
  .vm-sec--plan{grid-column:auto}
  .vp{inline-size:100vw}
}

/* ---------- connexion par mot de passe ----------
   Les mêmes champs pour entrer et pour s'inscrire : deux réponses à une seule
   question, distinguées par le bouton et non par un écran de plus. */
.vp-conn__t{margin:0 0 var(--s-1);font-size:var(--t-sm);font-weight:600;letter-spacing:-.01em}
.vp-conn input[type="email"],
.vp-conn input[type="password"],
.vp-conn input[type="text"]{inline-size:100%;box-sizing:border-box}
.vp-mdp{position:relative;display:block}
.vp-mdp__oeil{
  position:absolute;inset-inline-end:var(--s-1);inset-block-start:50%;
  transform:translateY(-50%);
  font:inherit;font-size:var(--t-2xs);color:var(--muted-foreground);
  background:transparent;border:0;border-radius:var(--radius-md);
  padding:var(--s-1) var(--s-2);cursor:pointer;
}
.vp-mdp__oeil:hover{color:var(--foreground)}
.vp-conn__row{align-items:stretch}
.vp-conn__row .btn{flex:1}
.vp-conn__bas{display:flex}
.vp-lien{
  font:inherit;font-size:var(--t-2xs);color:var(--muted-foreground);
  background:transparent;border:0;padding:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;
}
.vp-lien:hover{color:var(--foreground)}

/* ---------- le badge du compte ----------
   À côté du thème, hors du groupe d'onglets : c'est une identité, pas une
   destination. */
.appbar__prof{flex:none;padding-inline:var(--s-1);position:relative}
.appbar__prof .vp-av{inline-size:var(--s-5);block-size:var(--s-5)}
.appbar__prof.is-invite::after{
  content:"";position:absolute;inset-block-start:2px;inset-inline-end:2px;
  inline-size:var(--s-2);block-size:var(--s-2);border-radius:var(--radius-full);
  background:var(--focus-fill);border:1.5px solid var(--background);
}

/* ---------- les onglets de groupe ----------
   Ils ne paraissent qu'à partir de deux : un seul onglet n'est pas un choix,
   c'est un titre — et le nom du groupe est déjà en tête du panneau. */
.vg{
  display:flex;gap:var(--s-1);overflow-x:auto;
  padding-block-end:var(--s-1);scrollbar-width:none;
}
.vg::-webkit-scrollbar{display:none}
.vg__t{
  flex:0 0 auto;display:flex;align-items:center;gap:var(--s-2);
  padding:var(--s-2) var(--s-3);cursor:pointer;
  font:inherit;font-size:var(--t-xs);color:var(--soft-foreground);
  background:transparent;border:1px solid var(--border);border-radius:var(--radius-full);
}
.vg__t:hover{color:var(--foreground);border-color:var(--border-strong)}
.vg__t.is-on{color:var(--foreground);font-weight:600;background:var(--accent);border-color:var(--border-strong)}
.vg__n{max-inline-size:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vg__av{display:flex}
.vg__av .vp-av+.vp-av{margin-inline-start:-6px}
.vp-av--mini{
  inline-size:var(--s-4);block-size:var(--s-4);font-size:8px;
  border:1.5px solid var(--card);box-sizing:content-box;
}

/* ---------- le profil et les groupes, dans le modal ---------- */
.vm__titre{margin:0;font-size:var(--t-lg);font-weight:600;letter-spacing:-.018em}
.vm__body--un{grid-template-columns:minmax(0,1fr)}
.vm-grp{display:flex;align-items:center;gap:var(--s-3);padding-block:var(--s-2)}
.vm-grp+.vm-grp{border-block-start:1px solid var(--border-soft)}
.vm-grp__n{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--s-1)}
.vm-grp__n b{font-size:var(--t-sm);font-weight:600}
.vm-grp__qui{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-2xs);color:var(--muted-foreground)}
.vm-grp.is-on .vm-grp__n b{color:var(--foreground)}
.vm-ligne{display:flex;gap:var(--s-2);margin-block-start:var(--s-3)}
.vm-ligne>input,.vm-ligne>.vp-mdp{flex:1;min-width:0}
.vm-ligne .vp-mdp input{inline-size:100%;box-sizing:border-box}

/* Le profil et un groupe tiennent sur UNE colonne : la boîte large de la
   variante y étirait des lignes de trois mots sur neuf cents pixels. */
.vm__box--etroit{inline-size:min(620px,94vw)}

/* ---------- la recherche automatique ----------
   L'étiquette sur la carte, le filtre, le suivi dans le panneau, le formulaire
   dans le modal. Mêmes pilules que les onglets de groupe : c'est le même geste,
   choisir ce qu'on regarde. */
.vp-rech{
  display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-3);
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
}
.vp-rech__h{display:flex;align-items:center;gap:var(--s-3);font-size:var(--t-sm)}
.vp-rech__h b{flex:1;font-weight:600}
.vp-rech__h span{color:var(--muted-foreground);font-size:var(--t-xs)}
.vp-rech progress{inline-size:100%;accent-color:var(--soft-foreground)}
.vp-rech__top{margin:0;padding-inline-start:var(--s-5);font-size:var(--t-xs);color:var(--soft-foreground)}
.vp-rech__top li{display:flex;justify-content:space-between;gap:var(--s-3)}
.vp-rech__top b{color:var(--ok);font-weight:500}
.vr-case{display:flex;align-items:flex-start;gap:var(--s-2);padding-block:var(--s-1);font-size:var(--t-sm);cursor:pointer}
.vr-case input{margin-block-start:3px}
.vr-case small{display:block;font-size:var(--t-2xs);color:var(--muted-foreground)}
/* ce que rebat le Shuffle coché, sous sa case, aligné sur son libellé */
.vr-resume{margin:0 0 var(--s-2);padding-inline-start:calc(13px + var(--s-2))}
.vr-parvol{margin-block-start:var(--s-2)}
.vr-nbs{display:flex;flex-wrap:wrap;gap:var(--s-4)}
.vr-nb{display:flex;flex-direction:column;gap:var(--s-1);font-size:var(--t-xs);color:var(--soft-foreground)}
.vr-nb input{inline-size:8ch}
.vm-rang{margin:var(--s-3) 0 var(--s-1)}
.vm-c.is-off{opacity:.55}
.vm-c .chip{flex:none;inline-size:6.5em;text-align:center}

/* --- la note par axes du jugement (`views/note.js`) ------------------------ */
.vm-axe{ border-top:1px solid var(--border-soft); }
.vm-axe__h{
  display:grid; grid-template-columns:minmax(0,1.6fr) minmax(60px,1fr) 3.5rem; align-items:center;
  gap:var(--s-3); padding:var(--s-2) 0; cursor:pointer; list-style:none; font-size:var(--t-xs);
}
.vm-axe__h::-webkit-details-marker{ display:none; }
.vm-axe__n{ color:var(--foreground); }
.vm-axe__h b{ text-align:right; font-weight:500; color:var(--soft-foreground); }
.vm-axe[open] .vm-axe__h{ color:var(--primary); }
.vm-main{ flex:none; }
.vm-main .btn{ min-inline-size:var(--tap-min); padding:0 var(--s-1); }
.vc__note.is-vieux{ font-style:italic; opacity:.7; }