/* =============================================================================
   valeur.css — « How Phicoins keep their value » (phicoins.html) et « Comment les Phicoins gardent leur valeur »
   (valeur.html), refonte « Studio » du 25 octobre 2026. Chargé après base.css ; les deux pages ont le même HTML.
   Rien que des jetons de base.css. Or : la pièce et les montants seulement. Violet : rien ici (aucune action, aucune
   rareté) sauf les liens et le focus. Graphiques en encre et gris, lisibles en sombre. Mouvement : transform et opacity,
   une fois, jamais en mouvement réduit.
   ============================================================================= */

/* ─── En-tête de page et chiffres de lundi (#now) : un petit tableau à deux colonnes dans une carte étroite ─── */
.v-tete{padding-bottom:21px}
@media (min-width:600px){.v-tete{padding-bottom:34px}}
.v-maintenant{padding-top:34px}
@media (min-width:600px){.v-maintenant{padding-top:55px}}
.v-panneau{position:relative;max-width:760px;padding:8px 21px;border-radius:var(--r-l);background:var(--carte);box-shadow:var(--ombre-objet)}
@media (min-width:600px){.v-panneau{padding:8px 34px}}
/* Le style .chiffres de base.css (chiffres tabulaires, filets gris, nombre à droite), sans le filet d'encre du haut.
   Les libellés sont écrits en minuscule, dans la page et par valeur.js (« free Phicoins… ») : la majuscule vient d'ici. */
.v-chiffres{border-top:0}
.v-chiffres tr:last-child>*{border-bottom:0}
.v-chiffres tbody th{font-weight:400;color:var(--attenue);text-wrap:pretty}
.v-chiffres tbody th::first-letter{text-transform:uppercase}
.v-chiffres th,.v-chiffres td{vertical-align:baseline}
.v-valeur{font-family:var(--titre);font-size:21px;font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--encre)}
.v-valeur .piece{margin-right:6px;vertical-align:-1px}
.v-valeur .v-unite{font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:0}
/* Sur téléphone, l'unité (« a day », « par jour ») passe sous le nombre : la colonne des libellés garde sa place. */
@media (max-width:599px){
  .v-valeur{display:inline-grid;grid-template-columns:1fr auto;align-items:baseline;justify-content:end}
  .v-valeur .piece{align-self:center;justify-self:end}
  .v-valeur .v-unite{grid-column:1 / -1;justify-self:end}
}
.v-valeur .v-unite:empty{display:none}
.v-etat{margin:0 0 13px}
.v-etat:empty{display:none}
.v-panneau[aria-busy="true"] .v-valeur .v-n{color:var(--attenue)}

/* ─── Pourquoi (#why) : le texte, et la jauge 0 → 200 avec la cible et sa zone ─────────────────────────────── */
.v-texte{margin-top:21px}
.v-texte>*+*{margin-top:1em}
.v-texte p{max-width:60ch;color:var(--attenue)}
.v-texte strong{color:var(--encre)}
.v-jauge-carte{padding:21px 21px 34px;border-radius:var(--r-l);background:var(--carte);box-shadow:var(--ombre-carte)}
@media (min-width:600px){.v-jauge-carte{padding:34px 34px 44px}}
.v-jauge-carte .v-surtitre{font-size:15px;font-weight:600;color:var(--encre)}
.v-jauge-carte .geant{margin-top:8px}
.v-jauge{position:relative;margin-top:55px}
.v-piste{position:relative;height:13px;border-radius:99px;background:var(--fond);box-shadow:inset 0 0 0 1px var(--trait)}
.v-bande{position:absolute;top:0;bottom:0;left:calc(var(--bas,.4) * 100%);width:calc((var(--haut,.6) - var(--bas,.4)) * 100%);background:var(--trait-fort);box-shadow:inset 1px 0 0 var(--attenue),inset -1px 0 0 var(--attenue)}
.v-cible{position:absolute;left:50%;top:-6px;bottom:-6px;width:2px;margin-left:-1px;border-radius:1px;background:var(--encre)}
.v-curseur{position:absolute;bottom:100%;left:calc(var(--p,.5) * 100%);margin-bottom:8px}
.v-curseur::after{content:'';position:absolute;left:-5px;top:100%;width:10px;height:6px;background:var(--encre);clip-path:polygon(0 0,100% 0,50% 100%)}
.v-curseur span{position:absolute;bottom:6px;left:0;transform:translateX(-50%);padding:3px 8px;border-radius:var(--r-s);background:var(--encre);color:var(--fond);font-size:13px;font-weight:600;line-height:1.4;white-space:nowrap;font-variant-numeric:tabular-nums}
.v-curseur.debut span{transform:translateX(-12px)}
.v-curseur.fin span{transform:translateX(calc(-100% + 12px))}
.v-graduations{position:relative;height:20px;margin-top:10px;font-size:13px;color:var(--attenue);font-variant-numeric:tabular-nums}
.v-graduations span{position:absolute;top:0;line-height:1.4}
.v-graduations .g0{left:0}
.v-graduations .g200{right:0}
@media (prefers-reduced-motion:no-preference){
  .v-curseur{transition:opacity 400ms var(--sortie),transform 600ms var(--ressort)}
  html.js .v-jauge-carte:not(.vu) .v-curseur{opacity:0;transform:translateY(-8px)}
}

/* ─── D'où ils viennent, où ils vont (#flows) ──────────────────────────────────────────────────────────────── */
.v-flux{display:grid;gap:8px}
.v-flux-col{min-width:0;padding:21px;border-radius:var(--r-l);background:var(--carte);box-shadow:var(--ombre-carte)}
.v-flux-col h3{font-size:19px;line-height:1.3}
.v-flux-col h3 small{display:block;margin-top:3px;font-size:13px;font-weight:600;letter-spacing:0;color:var(--attenue)}
.v-groupe{margin:21px 0 0;font-size:13px;font-weight:600;color:var(--attenue)}
.v-liste{margin:8px 0 0;padding:0;list-style:none}
.v-liste li{padding:13px 0 0;margin-top:13px;border-top:1px solid var(--trait);font-size:15px;line-height:1.5;color:var(--attenue)}
.v-liste li:first-child{margin-top:0;padding-top:8px;border-top:0}
.v-liste strong{display:block;font-size:15px;color:var(--encre)}
.v-groupe+.v-liste li:first-child{padding-top:5px}
.v-soldes{display:flex;flex-direction:column;align-items:center;gap:13px;padding:34px 21px;text-align:center;box-shadow:var(--ombre-objet)}
.v-soldes p{max-width:34ch;font-size:15px;line-height:1.5;color:var(--attenue)}
.v-soldes .piece{width:24px;height:24px}
.v-fleche{width:36px;height:28px;margin:5px auto;transform:rotate(90deg);fill:var(--attenue)}
.v-flux-note{max-width:80ch;margin-top:21px}
@media (min-width:900px){
  .v-flux{grid-template-columns:minmax(0,1fr) 36px minmax(0,.8fr) 36px minmax(0,1fr);align-items:center;column-gap:13px}
  .v-fleche{margin:0;transform:none}
  .v-soldes{padding:44px 21px}
}
@media (prefers-reduced-motion:no-preference){
  html.js .v-fleche[data-vu]:not(.vu) rect{opacity:0}
  .v-fleche.vu rect{animation:poser 1ms var(--t,0ms) both}
}

/* ─── Cinq garde-fous (#safeguards) : la tête reste à gauche sur ordinateur, les étapes défilent à droite ──── */
.v-gardes{display:grid}
.v-etapes{margin:0;padding:0;list-style:none}
.v-etapes>li{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:13px;padding:34px 0;border-top:1px solid var(--trait)}
.v-etapes>li:first-child{padding-top:0;border-top:0}
.v-num{font:600 27px/1.1 var(--titre);letter-spacing:-.02em;color:var(--attenue);font-variant-numeric:tabular-nums}
.v-etapes h3{margin-bottom:8px}
.v-etapes p{max-width:60ch;color:var(--attenue)}
.v-conclusion{margin-top:34px;padding-top:34px;border-top:1px solid var(--encre);font-size:clamp(19px,.6vw + 15px,21px);line-height:1.5;color:var(--encre);text-wrap:pretty}
@media (min-width:600px){
  .v-etapes>li{grid-template-columns:55px minmax(0,1fr);column-gap:21px}
  .v-num{font-size:44px;line-height:1}
}
@media (min-width:900px){
  .v-gardes{grid-template-columns:minmax(0,1fr) minmax(0,1.618fr);column-gap:55px}
  .v-gardes-tete{position:sticky;top:calc(var(--entete) + 34px);align-self:start;margin-bottom:0}
  .v-gardes .v-conclusion{grid-column:2}
}

/* Étape 3 : l'échelle en pièces empilées. Une pièce = 1 Phicoin par jour. La colonne en vigueur en pièces d'or, les
   autres en silhouettes grises (le dessin de la pièce, en masque vectoriel net). */
.v-echelle-fig{max-width:420px;margin-top:21px;padding:21px;border-radius:var(--r-l);background:var(--carte);box-shadow:var(--ombre-carte)}
.v-colonnes{display:flex;align-items:stretch;justify-content:space-between;gap:5px;margin:0;padding:8px 0 21px;list-style:none}
.v-col{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px}
.v-pieces{display:flex;flex-direction:column-reverse;gap:2px}
.v-pieces i{display:block;width:16px;height:16px;background:var(--trait-fort);-webkit-mask:var(--silhouette) 0 0/100% 100% no-repeat;mask:var(--silhouette) 0 0/100% 100% no-repeat}
.v-col.en-cours .v-pieces i{background:var(--piece) 0 0/100% 100% no-repeat;image-rendering:pixelated;-webkit-mask:none;mask:none}
.v-k{font-size:13px;font-weight:600;line-height:1;color:var(--attenue);font-variant-numeric:tabular-nums}
.v-col.en-cours .v-k{color:var(--encre)}
.v-etiquette{position:absolute;top:100%;margin-top:5px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:600;line-height:1.2;color:var(--encre);white-space:nowrap}
.v-col:first-child .v-etiquette{left:0;transform:none}
.v-col:last-child .v-etiquette{left:auto;right:0;transform:none}
.v-echelle-fig .note{margin-top:13px}
:root{--silhouette:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h4v1h1v1h1v4H7v1H6v1H2V7H1V6H0V2h1V1h1z'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:no-preference){
  html.js .v-echelle-fig[data-vu]:not(.vu) .v-pieces i,html.js .v-echelle-fig[data-vu]:not(.vu) .v-etiquette{opacity:0}
  .v-echelle-fig.vu .v-pieces i{animation:poser 1ms var(--t,0ms) both}
  .v-echelle-fig.vu .v-etiquette{animation:poser 1ms 1050ms both}
}

/* Étape 4 : un solde, sa part gratuite (comptée) et sa part achetée (jamais comptée). */
.v-solde-fig{max-width:420px;margin-top:21px;padding:21px;border-radius:var(--r-l);background:var(--carte);box-shadow:var(--ombre-carte)}
.v-solde{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:2px;height:21px}
.v-solde span{border-radius:4px 0 0 4px;background:var(--encre)}
.v-solde span+span{border-radius:0 4px 4px 0;background:repeating-linear-gradient(135deg,var(--trait-fort) 0 2px,transparent 2px 6px);box-shadow:inset 0 0 0 1px var(--trait-fort)}
.v-solde-legendes{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:2px;margin-top:8px;font-size:13px;line-height:1.4;color:var(--attenue)}
.v-solde-legendes b{display:block;font-weight:600;color:var(--encre)}

/* ─── La règle (#rule) ───────────────────────────────────────────────────────────────────────────────────── */
.v-regle-liste{margin:0;padding:0;list-style:none;counter-reset:regle}
.v-regle-liste>li{position:relative;padding:0 0 21px 44px;counter-increment:regle;color:var(--attenue)}
.v-regle-liste>li+li{padding-top:21px;border-top:1px solid var(--trait)}
.v-regle-liste>li::before{content:counter(regle);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--trait-fort);font:600 13px/28px var(--sans);text-align:center;color:var(--encre);font-variant-numeric:tabular-nums}
.v-regle-liste>li+li::before{top:21px}
.v-regle-liste strong{color:var(--encre)}
.v-sous{margin:13px 0 0;padding:0;list-style:none}
.v-sous li{padding:13px 0;border-top:1px solid var(--trait)}
.v-sous li:last-child{padding-bottom:0}
.v-cote{display:grid;grid-template-columns:minmax(0,1fr);gap:34px;align-content:start}
.v-formule{font:500 15px/1.6 var(--sans);font-variant-numeric:tabular-nums;white-space:normal}
.v-formule span{display:block;padding:3px 0}
.v-cote .note{margin-top:13px}

/* La zone : sous 100 − d, la zone, au-dessus de 100 + d (proportions 1 : φ : 1), et le point m de lundi. */
.v-zone{padding:34px 21px 21px;border-radius:var(--r-l);background:var(--carte);box-shadow:var(--ombre-carte)}
.v-zone-piste{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.618fr) minmax(0,1fr);gap:2px}
.v-zone-piste>span{display:flex;align-items:center;justify-content:center;min-height:64px;padding:8px 5px;font-size:13px;line-height:1.35;text-align:center;color:var(--attenue)}
.v-zone-piste>span:first-child{border-radius:var(--r-s) 0 0 var(--r-s);box-shadow:inset 0 0 0 1px var(--trait)}
.v-zone-piste>span:nth-child(2){background:var(--trait-fort);box-shadow:inset 1px 0 0 var(--attenue),inset -1px 0 0 var(--attenue);color:var(--encre);font-weight:600}
.v-zone-piste>span:nth-child(3){border-radius:0 var(--r-s) var(--r-s) 0;box-shadow:inset 0 0 0 1px var(--trait)}
.v-zone-m{position:absolute;bottom:100%;left:calc(var(--p,.5) * 100%);display:flex;flex-direction:column;align-items:center;gap:3px;margin-bottom:4px;transform:translateX(-50%);font-size:12px;font-weight:700;line-height:1;color:var(--encre)}
.v-zone-m::after{content:'';width:10px;height:6px;background:var(--encre);clip-path:polygon(0 0,100% 0,50% 100%)}
.v-zone-graduations{position:relative;height:20px;margin-top:8px;font-size:13px;color:var(--attenue);font-variant-numeric:tabular-nums;white-space:nowrap}
.v-zone-graduations span{position:absolute;top:0;transform:translateX(-50%)}
.v-zone-graduations span:nth-child(1){left:27.64%}
.v-zone-graduations span:nth-child(2){left:50%;color:var(--encre);font-weight:600}
.v-zone-graduations span:nth-child(3){left:72.36%}

/* L'échelle en tableau : le barreau en vigueur porte .en-cours et aria-current (style commun de base.css : fond neutre
   qui déborde de 13 px par une ombre, trait d'encre de 2 px à gauche, colonnes immobiles). */
#echelle td:first-child{white-space:nowrap}
/* Sous 380 px, l'étiquette du barreau (« au lancement · maintenant ») passe à la ligne : le tableau tient à 320 px. */
@media (max-width:379px){#echelle td:first-child{white-space:normal}}

/* ─── Semaine après semaine (#weeks) : deux graphiques, puis le tableau ─────────────────────────────────── */
.v-graphiques{margin-bottom:55px;align-items:stretch}
.v-graphique{display:flex;flex-direction:column;min-width:0;padding:21px;border-radius:var(--r-l);background:var(--carte);box-shadow:var(--ombre-carte)}
.v-graphique h3{font-size:17px;line-height:1.4}
.v-graphique .v-sous-titre{margin-top:3px;font-size:15px;line-height:1.5;color:var(--attenue)}
.v-legende{display:flex;flex-wrap:wrap;gap:5px 21px;margin:13px 0 21px;padding:0;list-style:none;font-size:13px;color:var(--attenue)}
.v-legende li{display:inline-flex;align-items:center;gap:8px}
.v-legende i{display:inline-block;flex:none}
.v-cle-ligne{width:16px;height:2px;border-radius:1px;background:var(--encre)}
.v-cle-bande{width:16px;height:10px;background:var(--trait-fort);box-shadow:inset 0 1px 0 var(--attenue),inset 0 -1px 0 var(--attenue)}
.v-cle-cible{width:16px;height:0;border-top:1px dashed var(--attenue)}
.v-cle-plein{width:10px;height:10px;border-radius:2px;background:var(--encre)}
.v-cle-contour{width:10px;height:10px;border-radius:2px;box-shadow:inset 0 0 0 1.5px var(--attenue)}
.v-graphique.serre .v-cle-contour{height:2px;border-radius:1px;background:var(--attenue);box-shadow:none}
.v-trace{position:relative;height:220px;margin-top:auto;border-radius:var(--r-s);outline-offset:4px;touch-action:pan-y}
@media (min-width:1280px){.v-trace{height:240px}}
.v-trace svg{width:100%;height:100%;overflow:visible}
.v-trace text{font:400 12px/1 var(--sans);fill:var(--attenue);font-variant-numeric:tabular-nums}
.v-trace .v-texte-cible{font-weight:600;fill:var(--encre);paint-order:stroke;stroke:var(--carte);stroke-width:4px;stroke-linejoin:round}
.v-grille{stroke:var(--trait);stroke-width:1;shape-rendering:crispEdges}
.v-base{stroke:var(--trait-fort);stroke-width:1;shape-rendering:crispEdges}
.v-bande-zone{fill:var(--trait-fort)}
.v-bord-zone{fill:none;stroke:var(--attenue);stroke-width:1;stroke-linejoin:round}
.v-ligne-cible{stroke:var(--attenue);stroke-width:1;stroke-dasharray:4 3;shape-rendering:crispEdges}
.v-courbe{fill:none;stroke:var(--encre);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.v-point{fill:var(--encre);stroke:var(--carte);stroke-width:2}
.v-barre-pleine{fill:var(--encre)}
.v-barre-contour{fill:none;stroke:var(--attenue);stroke-width:1.5}
.v-ligne-detruits{fill:none;stroke:var(--attenue);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.v-ligne-detruits-halo{fill:none;stroke:var(--carte);stroke-width:5;stroke-linejoin:round;stroke-linecap:round}
.v-point-detruits{fill:var(--attenue);stroke:var(--carte);stroke-width:2}
.v-viseur{stroke:var(--attenue);stroke-width:1;shape-rendering:crispEdges}
.v-survol{fill:var(--voile)}
.v-vide{position:absolute;top:50%;left:50%;z-index:1;width:max-content;max-width:calc(100% - 26px);padding:8px 13px;border-radius:var(--r-s);background:var(--carte);box-shadow:inset 0 0 0 1px var(--trait);transform:translate(-50%,-50%);font-size:15px;line-height:1.5;text-align:center;color:var(--attenue)}
.v-vide.bas{top:auto;bottom:40px;transform:translateX(-50%)}
.v-vide:empty{display:none}
.v-bulle{position:absolute;top:-8px;left:0;z-index:2;padding:6px 10px;border-radius:var(--r-s);background:var(--encre);color:var(--fond);font-size:13px;font-weight:500;line-height:1.4;width:max-content;max-width:100%;white-space:normal;font-variant-numeric:tabular-nums;pointer-events:none;box-shadow:0 4px 12px -4px rgb(0 0 0/.3)}
.v-bulle b,.v-bulle span{display:block}
.v-bulle b{font-weight:600}
.v-bulle span{font-weight:400}
@media (prefers-reduced-motion:no-preference){
  .v-revele{transition:transform 900ms var(--sortie)}
  html.js .v-graphique[data-vu]:not(.vu) .v-revele{transform:scaleX(0)}
}

/* Le tableau des lundis : il défile dans sa boîte, la colonne des lundis reste à gauche. */
.v-semaines .chiffres{min-width:980px}
.v-semaines tbody th{white-space:nowrap;font-weight:600}
.v-semaines :is(th,td):first-child{position:sticky;left:0;z-index:1;background:var(--fond)}
.v-semaines td.v-pourquoi{min-width:260px;white-space:normal;font-variant-numeric:normal}
.v-semaines td small{display:inline;margin-left:4px}
.v-semaines td.v-barreau small{display:block;margin-left:0;white-space:nowrap}
.v-semaines-legende{max-width:70ch;margin-bottom:13px;font-size:15px}
.v-vide-tableau{margin-top:21px;color:var(--attenue)}
.v-vide-tableau:empty{display:none}
.v-plus{margin-top:21px}
.v-manuel{margin-top:55px}
.v-manuel h3{margin-bottom:13px}
.v-manuel ul{margin:0;padding:0;list-style:none;color:var(--attenue)}
.v-manuel li+li{margin-top:8px}
html:not(.js) .v-direct{display:none}

/* ─── Fin de page ────────────────────────────────────────────────────────────────────────────────────────── */
.v-fin{padding-top:34px;border-top:1px solid var(--trait)}
.v-fin .note{max-width:70ch}
.v-liens{display:flex;flex-wrap:wrap;gap:0 21px;margin-top:8px;font-size:15px}
.v-liens a{display:inline-flex;align-items:center;min-height:44px}

@media (forced-colors:active){
  .v-bande,.v-zone-piste>span:nth-child(2),.v-cle-bande{border:1px solid}
  .v-cible,.v-curseur::after,.v-zone-m::after,.v-solde span{background:CanvasText}
  .v-pieces i{border:1px solid}
}