/* 2.30.2 · Portail client (démo) : toute la largeur comme api/portal.php (Pierre : « je veux la largeur de la page complète »), Aperçu
   en deux colonnes sur grand écran ; « Vos contacts » : l'interlocuteur du projet puis les dirigeants, avec photo, téléphone et e-mail. */
.modal-full .modal-body:has(>.v2-pd){padding-inline:clamp(16px,3vw,44px)}
.v2-pd-ov{display:grid;gap:12px;align-items:start}
.v2-pd-ov>*{min-width:0}
.v2-pd-ov>.v2-pd-proj{margin-bottom:0}
@media (min-width:1080px){.v2-pd-ov{grid-template-columns:minmax(0,1fr) clamp(320px,27vw,400px)}}
.v2-pd-side{display:grid;gap:12px}
.v2-pd-card{display:grid;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:14px}
.v2-pd-card>.v2-pd-meet{padding:0;border:0}
.v2-pd-card .v2-psub{margin:0}
.v2-pd-person{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 12px;padding:8px 0}
.v2-pd-person+.v2-pd-person{border-top:1px solid var(--line);padding-top:12px}
.v2-pd-who{display:grid;min-width:0}
.v2-pd-who small{overflow:hidden;color:var(--muted);font-size:12px;white-space:nowrap;text-overflow:ellipsis}
.v2-pd-tag{justify-self:start;margin:1px 0 2px;padding:1px 8px;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-size:11px;font-style:normal;font-weight:700}
.v2-pd-acts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.v2-pd-acts .btn{flex:1 1 auto}
.v2-pd-cta small{color:var(--muted);font-size:12.5px}
/* 2.30.3 · « nos têtes dans le rond » (Pierre) : en mode « Toute l'équipe » (Fait aujourd'hui, Historique, actions à faire), la photo ou
   les initiales de la personne dans un vrai rond cerclé de sa couleur, à gauche de l'heure ; sur téléphone, au-dessus de l'heure, dans la
   même colonne, donc aucune largeur perdue pour le texte. */
.v2-day-when{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.v2-day-when .v2-day-time{min-width:0;padding-top:0;white-space:nowrap}
.v2-by{display:inline-flex;flex:0 0 auto}
.v2-by .avatar{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--avatar);box-shadow:none;font-size:10px}
@media (max-width:860px){.v2-day-when{flex-direction:column;gap:4px;min-width:40px;text-align:center}.v2-by .avatar{width:26px;height:26px}}
/* 2.30.3 · Factures récurrentes (Pierre : « j'aimerais voir ceci au-dessus de Factures récurrentes ») : « Facturé ce mois » comme la
   Facturation du Dashboard sur téléphone, « Mensualités clients » comme dans Cockpit → Finances ; côte à côte sur ordinateur. */
.v2-rtop{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 16px}
.v2-rtop>.card{margin:0;border-radius:22px}
.v2-rtop-bill>small{grid-area:lab;color:var(--accent);font-size:11px;line-height:14px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.v2-rtop-bill>strong{grid-area:val;margin-top:6px;font:800 30px/34px 'Space Grotesk',system-ui,sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.v2-rtop-bill .v2-mb-barrow>b{font:700 24px/28px 'Space Grotesk',system-ui,sans-serif;color:var(--green);font-variant-numeric:tabular-nums}
.v2-rtop-bill .v2-mb-leg>b{margin-left:auto;overflow:hidden;text-overflow:ellipsis;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.v2-rtop-bill .v2-mb-leg.is-paid>i{background:var(--green)}
.v2-rtop-bill .v2-mb-leg.is-paid>b{color:var(--green)}
.v2-rtop .v2-ck-tile{padding:16px 18px 14px}
.v2-rtop .v2-ck-tile strong{margin-top:6px;font-size:30px;line-height:34px}
.v2-rtop .v2-ck-tile em{margin-top:auto;padding-top:10px;font-size:12px}
@media (max-width:760px){.v2-rtop{grid-template-columns:minmax(0,1fr);gap:10px}.v2-rtop-bill>strong,.v2-rtop .v2-ck-tile strong{font-size:24px;line-height:28px}.v2-rtop-bill .v2-mb-barrow>b{font-size:19px;line-height:23px}}
/* 2.30.3 · Actions du jour (Pierre : « sur mobile, les filtres prennent beaucoup de place, on perd 1/5 de la hauteur de l'écran », « des
   raccourcis des actions du jour, près de Planifier, avec l'option modifier ») : les objectifs du jour en boutons sur la barre des onglets ;
   sur téléphone une seule ligne (Programmées / Historique, Moi / Équipe en icônes, « + » rond), puis les raccourcis sur une ligne qui
   défile. Le compteur de l'onglet actif est lisible en clair comme en sombre (il était gris sur blanc). */
.v2-who button.is-on .v2-tab-count:not(.is-warn){background:var(--accent);color:var(--gv-on-ink,#fff)}
.v2-who button:not(.is-on) .v2-tab-count{background:color-mix(in srgb,var(--text) 9%,transparent)}
.v2-quick-btn b{color:var(--text);font-variant-numeric:tabular-nums}
.v2-quick-btn:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 40%,var(--line2))}
.v2-quick-btn.is-done{color:var(--green);border-color:color-mix(in srgb,var(--green) 40%,var(--line2))}
.v2-task-who button>svg{display:none}
@media (max-width:860px){
 .v2-task-who button>svg{display:block}
 .v2-tasks-top>.page-heading{order:3;margin:0 0 0 auto}
 .v2-tasks-top .v2-who button{min-height:28px;padding:0 9px}
 .v2-tasks-top .v2-task-who button{width:30px;padding:0}
}
/* 2.30.3 · Clients : la recherche et le filtre Billit (Tous, Reliés à Billit, Pas reliés) sur une ligne. */
.v2-ctools .v2-psearch{margin:0}
/* 2.30.4 puis 2.30.14 · Raccourcis d'Actions du jour (Pierre : « on ne comprend pas qu'il faut les cocher… vraiment comme un bouton avec
   plus… pas envie de scroller horizontalement… ne les colle pas trop des trucs au-dessus, genre des filtres ») : chaque objectif porte un « + »
   et ouvre l'enregistrement de l'action. Sur téléphone, un bloc à part sous la barre, titré comme « Les 14 prochains jours », avec « Appuie sur
   une tuile quand c'est fait » et « Modifier » à droite, puis des tuiles en grille (trois par ligne au plus, deux pour quatre objectifs) :
   l'icône, le compte et le « + » en haut, le nom dessous, une barre d'avancement. L'ordinateur garde ses pilules, « + » au bout. */
.v2-quick-head>span,.v2-quick-head>small{display:none}
.v2-quick-plus>svg{width:12px;height:12px;stroke-width:2.6}
@media (max-width:860px){
 .v2-quick-head>span{display:block;grid-area:t;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.04em;line-height:1.3}
 .v2-quick-head>small{display:block;grid-area:h;color:var(--muted);font-size:11.5px;line-height:1.35;opacity:.85}
 .v2-quick-btn.is-done .v2-quick-bar>i{background:var(--green)}
}
/* 2.30.5 · Suivi des paiements : une case devant chaque facture échue (« envoyer un rappel à tous », « sélectionner ceux à qui je veux »),
   « Tout sélectionner » au-dessus de la liste, le nombre dans le bouton ; « en avance » dans la fenêtre des rappels. */
.v2-tk-name{display:flex;align-items:center;gap:10px;min-width:0;cursor:pointer}
span.v2-tk-name{cursor:default}
.v2-tk-name>input,.v2-tk-all>input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--accent);cursor:pointer}
.v2-tk-nobox{flex:none;width:18px;height:18px;box-sizing:border-box;border:1.5px dashed var(--line2);border-radius:4px}
.v2-tk-name>.v2-ellipsis{min-width:0}
.v2-tk-all{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer}
.v2-tk-all:has(>input:disabled){cursor:default;opacity:.6}
.v2-tk-n{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:2px;padding:0 6px;border-radius:999px;background:color-mix(in srgb,#fff 24%,transparent);font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums}
.v2-dun-ahead{color:var(--orange);font-weight:700}
@media (max-width:760px){.v2-od-main>.v2-tk-name{grid-area:name;min-width:0}.v2-tk-name>input,.v2-tk-all>input,.v2-tk-nobox{width:20px;height:20px}}
/* 2.30.6 · Aperçu d'une page HTML envoyée en ressource : toute la fenêtre, la page isolée (iframe sandbox) sur fond blanc, comme
   dans un navigateur ; Télécharger et Fermer en bas. */
.modal-full .modal-body:has(>.v2-hview){display:flex;padding:0;overflow:hidden}
.v2-hview{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.v2-hview>iframe{flex:1 1 auto;width:100%;min-height:0;border:0;background:#fff;color-scheme:light}
.v2-hview-note{display:flex;align-items:center;gap:6px;margin:0;padding:7px 16px;border-bottom:1px solid var(--line);background:var(--surface2);color:var(--muted);font-size:12.5px}
/* 2.30.10 · Signature du client dans les ressources d'un projet : l'état sous le nom (à signer, signé, preuve), « Demander la
   signature » en petite pilule, la fenêtre d'explication ; un document figé le dit dans sa fiche. Tuto vidéo : icône de lecture. */
.v2-res-main .v2-sign{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;overflow:visible;white-space:normal;margin-top:2px;font-weight:650}
.v2-sign .i{flex:none}
.v2-sign.is-ok{color:var(--green)}
.v2-sign.is-wait{color:var(--orange)}
.v2-sign.is-proof{color:var(--accent)}
.v2-sign .v2-dk-link{font-size:12px;margin-left:4px}
.v2-sign-ask{justify-self:start;display:inline-flex;align-items:center;gap:5px;margin-top:4px;padding:3px 10px;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.v2-sign-ask:hover{background:color-mix(in srgb,var(--accent) 15%,transparent)}
.v2-sign-ask-box{display:grid;gap:10px}
.v2-sign-ask-box p{margin:0}
.v2-sign-warn{display:flex;align-items:flex-start;gap:6px;margin:0;padding:9px 11px;border-radius:11px;background:color-mix(in srgb,var(--orange) 12%,transparent);color:var(--text);font-size:13px}
.v2-sign-warn .i{flex:none;margin-top:2px;color:var(--orange)}
.v2-sign-lock{display:flex;align-items:flex-start;gap:6px;margin:0;padding:9px 11px;border-radius:11px;background:var(--surface2);color:var(--muted);font-size:12.5px}
.v2-sign-lock .i{flex:none;margin-top:2px}
/* 2.30.10 · Aperçu du portail dans la démo : « À signer », page de signature, tutos (un cadre à la place du lecteur YouTube) et, pour
   l'équipe seulement, où remplir un téléphone qui manque. */
.v2-pd-signbox{margin-bottom:12px;border-color:color-mix(in srgb,var(--accent) 35%,var(--line));background:color-mix(in srgb,var(--accent) 6%,transparent)}
.v2-pd-signbox .v2-tk-kick{margin:0}
.v2-pd-srow,.v2-pd-doc{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);font:inherit;text-align:left}
.v2-pd-srow{cursor:pointer}
.v2-pd-srow:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.v2-pd-srow>.i,.v2-pd-doc>.i{flex:none;color:var(--accent)}
.v2-pd-srow>span:not(.btn),.v2-pd-doc>span{display:grid;flex:1;min-width:0}
.v2-pd-srow small,.v2-pd-doc small{color:var(--muted);font-size:11.5px}
.v2-pd-srow>.btn,.v2-pd-doc>.btn{flex:none}
.v2-pd-doc{margin:8px 0}
.v2-pd-signform{display:grid;gap:10px;margin-top:4px}
.v2-pd-signform .v2-field-note,.v2-pd-signform .form-group{margin:0}
.v2-pd-signform>.btn{justify-self:start}
.v2-pd-check{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;font-size:13.5px;font-weight:650;cursor:pointer}
.v2-pd-check:has(input:checked){border-color:color-mix(in srgb,var(--accent) 50%,var(--line));background:color-mix(in srgb,var(--accent) 7%,transparent)}
.v2-pd-check input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--accent)}
.v2-pd-signed{display:flex;align-items:center;gap:8px;margin:6px 0;padding:9px 12px;border-radius:12px;background:color-mix(in srgb,var(--green) 12%,transparent)}
.v2-pd-signed>.i{color:var(--green)}
.v2-pd-proof{justify-self:start;margin-top:4px}
.v2-pd-stag{display:inline-block;justify-self:start;margin-top:3px;padding:1px 8px;border-radius:999px;font-size:11px;font-style:normal;font-weight:700}
.v2-pd-stag.is-wait{background:color-mix(in srgb,var(--orange) 14%,transparent);color:var(--orange)}
.v2-pd-stag.is-ok{background:color-mix(in srgb,var(--green) 13%,transparent);color:var(--green)}
button.v2-pd-tile{width:100%;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
button.v2-pd-tile:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.v2-pd-vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:10px}
.v2-pd-vid{display:grid;gap:3px;min-width:0}
.v2-pd-vid>small{color:var(--muted);font-size:11.5px}
.v2-pd-vframe{display:grid;place-content:center;justify-items:center;gap:6px;aspect-ratio:16/9;margin-bottom:4px;border-radius:12px;background:#0b0f1a;color:#fff}
.v2-pd-vframe>.i{width:34px;height:34px;opacity:.9}
.v2-pd-vframe>small{color:rgba(255,255,255,.7);font-size:11px}
.v2-pd-hint{grid-column:1/-1;padding:7px 10px;border:1px dashed color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--accent) 7%,transparent);color:var(--text);font-size:12px;line-height:1.45}
.v2-pd-hint em{display:block;color:var(--muted);font-style:normal}
.v2-pd-hnote{margin:0 0 10px}.v2-pd-hnote small{display:block;color:var(--muted)}
@media (max-width:640px){.v2-pd-srow,.v2-pd-doc{flex-wrap:wrap}.v2-pd-srow>.btn,.v2-pd-doc>.btn{width:100%}}
/* 2.30.12 · Identifiants du projet (onglet Identifiants) et interrupteurs des sections du portail (Aperçu du projet, administrateurs). */
/* 2.33.7 (« essaye de hiérarchiser ça mieux ») : une carte par identifiant, comme À fournir ; tête en grille (icône, nom et type, pastille de visibilité,
   actions), lignes alignées sous le nom ; sur téléphone, la pastille passe sous le nom et les lignes prennent toute la largeur, leur intitulé au-dessus. */
.v2-creds{list-style:none;display:grid;gap:10px;margin:0;padding:0}
.v2-cred{padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.v2-cred-head{display:grid;grid-template-columns:36px minmax(0,1fr) auto auto;align-items:start;gap:6px 12px}
.v2-cred-title{display:grid;gap:1px;min-width:0;padding-top:1px}
.v2-cred-title strong{font-size:14.5px;overflow-wrap:anywhere}
.v2-cred-title small{color:var(--muted);font-size:12.5px}
.v2-cred-vis{--st:var(--green);margin-top:6px}
.v2-cred-vis.is-off{--st:var(--muted)}
.v2-cred-body{display:grid;gap:6px;margin-top:10px;padding-left:48px}
/* Relecture : chaque ligne en grille (intitulé 96px, valeur, bouton) : le bouton reste à côté d'une valeur longue, sur téléphone aussi (intitulé au-dessus). */
.v2-cred-line{display:grid;grid-template-columns:96px minmax(0,max-content) auto;justify-content:start;align-items:center;gap:6px 8px}
.v2-cred-line.is-note{align-items:baseline}
.v2-cred-line>span,.v2-pd-crow>span{flex:0 0 96px;color:var(--muted);font-size:12.5px}
.v2-cred-line code,.v2-pd-crow code{min-width:0;padding:4px 9px;border-radius:8px;background:var(--surface3);font:500 13px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}
.v2-cred .v2-cred-note{grid-column:2/-1;min-width:0;margin:0;color:var(--text);font-size:13px;overflow-wrap:anywhere}
/* 2.33.7 : l'adresse de connexion, lien visible dans sa ligne (souligné, couleur des liens, icône « ouvrir »), dans TrackR et l'aperçu du portail
   (.curl du portail) ; fond --surface2 (4,9:1 en sombre), la copie reste à côté sur téléphone ; un lien écrit dans la note se voit aussi. */
.v2-cred .v2-cred-url,.v2-pd-crow .v2-pd-curl{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;padding:4px 9px;border-radius:8px;background:var(--surface2);color:var(--accent);color:color-mix(in srgb,var(--accent) 75%,var(--text));font:500 13px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;overflow-wrap:anywhere}
.v2-cred .v2-cred-url:hover,.v2-pd-crow .v2-pd-curl:hover{text-decoration-thickness:2px}
.v2-cred-url .i,.v2-pd-curl .i{flex:none}
.v2-cred-note .v2-tlink{color:var(--accent);color:color-mix(in srgb,var(--accent) 75%,var(--text));text-decoration:underline;text-underline-offset:2px}
.v2-cred-seen{display:flex;align-items:center;gap:5px;margin-top:2px;color:var(--muted);font-size:12px}
.v2-cred .v2-cred-warn{display:flex;align-items:center;gap:5px;margin:0;color:var(--orange);color:color-mix(in srgb,var(--orange) 70%,var(--text));font-size:12.5px}
.v2-cred-pw{display:flex;align-items:center;gap:6px}
.v2-cred-pw .form-input{flex:1;min-width:0}
.v2-psect-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px 22px;margin-top:6px}
.v2-psect-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line)}
/* 2.30.13 : l'interrupteur de l'onglet, en haut des onglets du projet qui ont leur pendant dans le portail (administrateurs). */
.v2-psect-strip{display:flex;align-items:center;gap:10px;margin:-4px 0 14px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:13px}
.v2-psect-strip span{flex:1;min-width:0}.v2-psect-strip>.i{flex:none;color:var(--accent)}
.v2-psect-strip.is-off{border-style:dashed;background:transparent}.v2-psect-strip.is-off>.i{color:var(--muted)}
.v2-pmenu-list .v2-pmenu-act+.v2-pmenu-act{margin-top:0;border-top:0;padding-top:6px}
.v2-pd-creds{list-style:none;display:grid;gap:10px;margin:10px 0 0;padding:0}
.v2-pd-creds li{padding:12px 14px;border:1px solid var(--line);border-radius:14px}
.v2-pd-chead{display:flex;align-items:center;gap:10px}
.v2-pd-chead>span{display:grid;min-width:0}
.v2-pd-chead strong{overflow-wrap:anywhere}
.v2-pd-crow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
@media (max-width:640px){.v2-cred-line>span,.v2-pd-crow>span{flex-basis:100%}
 .v2-cred{padding:12px}.v2-cred-head{grid-template-columns:36px minmax(0,1fr) auto}.v2-cred-body{padding-left:0}
 .v2-cred-vis{grid-column:2/-1;grid-row:2;justify-self:start;max-width:100%;height:auto;min-height:24px;margin-top:0;padding:3px 10px;white-space:normal}
 .v2-cred-line{grid-template-columns:minmax(0,max-content) auto}.v2-cred-line>span,.v2-cred .v2-cred-note{grid-column:1/-1}}

/* 2.30.15 · Dashboard du téléphone refait (Pierre, 29/10 : « le design de cette partie-là, c'est vraiment hyper moche en mobile… fais un
   truc bien », « il manque juste le bénéfice ») : une seule famille de cartes. Les cases (Trésorerie, TVA, Bénéfice, Devis à faire, Projets
   en cours) ont la même forme : pastille d'icône colorée et nom en haut, le chiffre en bas, une ligne dessous ; une case seule en fin de
   grille prend toute la largeur, nom à gauche et chiffre à droite. La Facturation tient en une carte découpée en zones (le facturé du mois
   et l'encaissé, À envoyer | Échu, le récurrent), sous un titre de section comme « Vue d'ensemble ». L'objectif garde sa grande carte. */
@media (max-width:860px){
 .v2-dash.is-ph .v2-mb-barrow{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
 .v2-dash.is-ph .v2-mb-barrow>small{font-size:12px;font-weight:650;color:var(--muted)}
 .v2-dash.is-ph .v2-mb-barrow>b{font:700 15px/1 'Space Grotesk',system-ui,sans-serif;color:var(--green);font-variant-numeric:tabular-nums}
}
/* 2.30.16 · Avis de fin de projet : la carte du projet (Aperçu), le lien d'avis Google (Paramètres → Projets → Portail client) et
   l'aperçu du portail dans la démo (cinq étoiles en boutons radio, allumées jusqu'à la note choisie). */
.v2-review{grid-column:1/-1;padding:20px}
.v2-review .section-title{display:flex;align-items:center;gap:8px}
.v2-review-item{padding:12px 0;border-top:1px solid var(--line)}
.v2-review-item:first-of-type{padding-top:4px;border-top:0}
.v2-review-item p{margin:6px 0 4px;white-space:pre-line}
.v2-review-item small{color:var(--muted)}
.v2-stars{display:inline-block;color:#f5b301;font-size:18px;letter-spacing:2px;line-height:1}
.v2-stars i{font-style:normal;color:color-mix(in srgb,var(--muted) 40%,transparent)}
.v2-review-cfg{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.v2-review-cfg-row{display:flex;gap:8px;align-items:center}
.v2-review-cfg-row .form-input{flex:1;min-width:0}
.v2-pd-review{border-color:color-mix(in srgb,#f5b301 35%,var(--line))}
.v2-pd-review small{color:var(--muted);font-size:12.5px}
.v2-pd-review blockquote{margin:0;padding:8px 12px;border-left:3px solid color-mix(in srgb,#f5b301 60%,var(--line));border-radius:0 10px 10px 0;background:var(--surface2);font-size:13.5px;white-space:pre-line}
.v2-pd-review .btn{justify-self:start}
.v2-pd-revform{display:grid;gap:10px}
.v2-pd-stars{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0}
.v2-pd-stars legend{width:100%;margin-bottom:6px}
.v2-pd-stars label{position:relative;cursor:pointer}
.v2-pd-stars input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.v2-pd-stars span{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:color-mix(in srgb,var(--muted) 45%,transparent);font-size:24px;line-height:1;transition:color .15s,background .15s,border-color .15s}
.v2-pd-stars label:hover span{border-color:color-mix(in srgb,#f5b301 55%,var(--line))}
.v2-pd-stars input:focus-visible+span{outline:3px solid var(--accent2);outline-offset:2px}
.v2-pd-stars:has(input[value="1"]:checked) label:nth-of-type(-n+1) span,.v2-pd-stars:has(input[value="2"]:checked) label:nth-of-type(-n+2) span,.v2-pd-stars:has(input[value="3"]:checked) label:nth-of-type(-n+3) span,.v2-pd-stars:has(input[value="4"]:checked) label:nth-of-type(-n+4) span,.v2-pd-stars:has(input[value="5"]:checked) label:nth-of-type(-n+5) span{color:#f5b301;border-color:color-mix(in srgb,#f5b301 55%,var(--line));background:color-mix(in srgb,#f5b301 13%,var(--surface))}
/* 2.30.20 · « il manque la société à laquelle il appartient » : la personne et sa fonction sous le nom de la société dans la fiche,
   comme sur les cartes du CRM (« Personne · fonction », qui passe à la ligne au lieu de déborder). */
.v2-drawer-who{margin:-6px 0 12px;font-size:13px;font-weight:600;line-height:1.35;color:var(--muted);overflow-wrap:anywhere}
/* 2.30.21 · Devis et factures créés directement dans Billit, sous ceux de TrackR (lecture seule) : même liste que les fiches client et projet,
   titre, heure de lecture et « Actualiser » sur une ligne qui passe à la ligne sur téléphone. */
.v2-bxl{margin-top:18px}
.v2-bxl-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 2px 8px}
.v2-bxl-head h3{flex:1;min-width:200px;margin:0;font-size:15px;font-weight:800}
.v2-bxl-head h3 small{display:block;margin-top:2px;font-size:12px;font-weight:600;color:var(--muted)}
.v2-bxl-head>small{font-size:12px;color:var(--muted)}
.v2-bxl-card{padding:2px 14px}
.v2-bxl-card>.v2-field-note{margin:12px 0}
.v2-bxl-list li:last-child>a,.v2-bxl-list li:last-child>div{border-bottom:0}
/* 2.30.22 · Devis et factures dans l'aperçu du portail (jumeau de .bdocs du portail) : sur téléphone le numéro en haut, puis l'état à gauche et le montant à droite. */
.v2-pd-bsum{margin:10px 0 0;padding:10px 14px;border:1px solid color-mix(in srgb,#2563eb 30%,var(--line));border-radius:14px;background:color-mix(in srgb,#2563eb 7%,var(--surface));font-size:13.5px}
.v2-pd-bdocs{list-style:none;display:grid;gap:8px;margin:6px 0 0;padding:0}
.v2-pd-bdoc{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:6px 12px;padding:11px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.v2-pd-bmain{min-width:0}
.v2-pd-bdoc>.v2-pstatus{justify-self:start}
.v2-pd-bmain strong{display:block;font-size:14px;overflow-wrap:anywhere}
.v2-pd-bmain small{display:block;margin-top:2px;color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.v2-pd-bamt{justify-self:end;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.v2-pd-bamt small{margin-left:4px;color:var(--muted);font-size:10.5px;font-weight:600}
@media (max-width:640px){.v2-pd-bdoc{grid-template-columns:minmax(0,1fr) auto}.v2-pd-bmain{grid-column:1/-1}}
/* 2.30.23 · À fournir : onglet du projet (une carte par élément, état, fichiers reçus, actions) et son jumeau dans l'aperçu du portail. */
.v2-asks,.v2-pd-asks{list-style:none;display:grid;gap:10px;margin:12px 0 0;padding:0}
.v2-ask,.v2-pd-ask{padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.v2-ask-head,.v2-pd-ahead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px}
.v2-ask-head strong,.v2-pd-ahead strong{font-size:14.5px;overflow-wrap:anywhere}
.v2-ask-note,.v2-pd-anote{margin:5px 0 0;color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.v2-ask-redo,.v2-pd-aredo{margin:8px 0 0;padding:8px 11px;border-radius:10px;background:color-mix(in srgb,var(--red) 10%,transparent);font-size:13px;overflow-wrap:anywhere}
.v2-ask-files,.v2-pd-asent{list-style:none;display:grid;gap:4px;margin:8px 0 0;padding:0;font-size:13px}
.v2-ask-files li{display:flex;align-items:center;gap:6px;min-width:0}
.v2-ask-files a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-ask-files small,.v2-pd-asent small{color:var(--muted);flex:none}
.v2-pd-asent li{overflow-wrap:anywhere}
.v2-pd-asent li::before{content:'✓ ';color:var(--green);font-weight:700}
.v2-ask-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.v2-ask-icons{display:flex;gap:4px;margin-left:auto}
.v2-pd-asend{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 0;color:var(--accent);font-size:13px;font-weight:650}
.v2-pd-asend small{color:var(--muted);font-weight:500}

/* 2.30.25 · Réunions dans la fiche d'un prospect : « Lier » et « Nouvelle » en haut de la section ; une ligne par réunion ; fenêtre « Lier une
   réunion » (recherche et liste) ; le prospect d'une réunion dans l'onglet Réunions du projet ouvre sa fiche. */
.v2-lmeet-acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.v2-lmeet small .i{vertical-align:-1px}
.v2-meet-lead{display:inline-flex;align-items:center;gap:3px;margin:0;padding:0;border:0;background:none;color:var(--accent);font:inherit;font-weight:700;cursor:pointer}
.v2-meet-lead:hover{text-decoration:underline}
.v2-mlink-note{margin:-6px 0 2px}
.v2-mlp-find{margin-top:10px}
.v2-mlp{display:grid;gap:8px;max-height:min(56vh,460px);margin-top:12px;overflow-y:auto}
.v2-mlp-row{display:grid;gap:3px;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);font:inherit;text-align:left;cursor:pointer}
.v2-mlp-row:hover,.v2-mlp-row:focus-visible{border-color:var(--accent)}
.v2-mlp-row strong{overflow-wrap:anywhere}
.v2-mlp-row small{display:block;color:var(--muted)}
.v2-mlp-row small .i{vertical-align:-2px}

/* 2.30.26 · Documents créés dans Billit (Facturation et Devis) : picto devant le numéro, dans la couleur de l'état (comme sa pastille) ;
   bouton « Envoyer » au bout de la ligne (picto seul sur téléphone) ; cartes comme celles de TrackR en vue « Cartes », marquées « Billit ». */
.v2-bxl-ico{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--surface3);color:var(--muted)}
.v2-bxl-ico.is-good{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}
.v2-bxl-ico.is-bad{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red)}
.v2-bxl-ico.is-warn{background:color-mix(in srgb,var(--orange) 18%,transparent);color:var(--orange)}
.v2-bxl-ico.is-info{background:color-mix(in srgb,var(--accent2) 15%,transparent);color:var(--accent2)}
.v2-bxl-ico[style*="--qc"]{background:color-mix(in srgb,var(--qc) 16%,transparent);color:var(--qc)}
.v2-bxl-list li{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line)}
.v2-bxl-list li:last-child{border-bottom:0}
.v2-bxl-list li>a,.v2-bxl-list li>div{flex:1;min-width:0;border-bottom:0}
.v2-bxl-tag{flex:none;padding:2px 8px;border-radius:30px;background:var(--surface3);color:var(--muted);font-size:10.5px;font-weight:800;letter-spacing:.02em}
.v2-bxl-qcard .v2-qcard-top{align-items:center}
.v2-bxl-qcard .v2-qcard-top .v2-bxl-ico{width:26px;height:26px;border-radius:8px}
.v2-bxl-open{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none}
.v2-bxl-open>.i{color:var(--subtle);flex:none}
@media (max-width:640px){
 .v2-bxl-send span{display:none}
 .v2-bxl-list .v2-bxl-ico{width:26px;height:26px;border-radius:8px}
}

/* 2.30.27 · Sous-tâches : « 2/5 » sur la tâche (vert quand tout est coché) ou petit bouton discret quand il n'y en a pas, liste à cocher
   sous la tâche (retrait et filet à gauche), ajout rapide en bas ; titre modifiable d'un clic. */
.v2-psub-chip[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
.v2-psub-chip.is-done{border-color:color-mix(in srgb,var(--green) 45%,transparent);color:var(--green)}
.v2-task:has(>.v2-psubs){flex-wrap:wrap}
.v2-psubs{flex:1 0 100%;margin:0 0 6px 34px;padding:2px 0 2px 12px;border-left:2px solid var(--line)}
.v2-psubs ul{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.v2-psub{display:flex;align-items:center;gap:8px;min-height:38px}
.v2-psub-edit{flex:1;min-width:0;height:34px;padding:4px 8px;font-size:13.5px}
/* Téléphone : la ligne d'une tâche passe la poubelle (order 1) puis l'état, l'échéance et la personne (order 2) sous le titre ; « 2/5 » va avec
   l'état, la liste des sous-tâches tout en bas. */
@media (max-width:760px){.v2-psubs{margin-left:16px;padding-left:10px}.v2-task>.v2-psub-chip{order:2}.v2-task>.v2-psubs{order:3}}

/* 2.30.28 · Plusieurs personnes sur une tâche : les autres avatars serrés contre le premier, « + » discret pour en ajouter une ;
   « Avec » du formulaire de la tâche en cases à cocher sur deux colonnes (une sur téléphone). */
.v2-task>.v2-co-pick,.v2-co-pick{margin-left:-6px} /* plus fort que la marge automatique de .v2-task-who : collés à la première */
.v2-co-pick.is-set .avatar{box-shadow:0 0 0 2px var(--surface)}
.v2-task>.v2-co-pick.is-add,.v2-co-pick.is-add{margin-left:-2px;width:24px;height:24px;border:1px dashed var(--line);color:var(--muted);opacity:.7}
.v2-co-pick.is-add:hover,.v2-co-pick.is-add:focus-within{opacity:1;border-color:var(--accent);color:var(--accent)}
.v2-co-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;margin:0;padding:0;border:0}
.v2-co-form legend{grid-column:1/-1;padding:0}
@media (max-width:640px){.v2-co-form{grid-template-columns:1fr}}

/* 2.30.29 · Devis de la fiche d'une opportunité : × pour délier au bout de chaque devis ; « Lier un devis » réutilise la fenêtre des réunions
   (.v2-mlp-row). */
.v2-qmini-lead li{display:flex;align-items:center;gap:4px}
.v2-qmini-lead li>button[data-q-open]{flex:1;min-width:0}
.v2-qmini-x{flex:none}
.v2-qmini .v2-qmini-x{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:10px;background:none;color:var(--muted)} /* plus fort que .v2-qmini button (pleine largeur) */
.v2-qmini .v2-qmini-x:hover{background:var(--surface2);color:var(--text)}
.v2-mlp-row small .v2-qchip,.v2-mlp-row small .v2-bx-chip{vertical-align:1px}

/* 2.30.30 · « Coller « … » » sous les lignes d'un devis, après « Copier » sur une ligne d'un autre devis : pointillés couleur d'accent (le nom
   est coupé à 28 caractères par le code) ; « Ajouter au catalogue » d'une ligne libre reprend le style des autres actions de la ligne. */
.v2-qadd .v2-qpaste{border:1px dashed color-mix(in srgb,var(--accent) 55%,var(--line2));color:var(--accent)}
.v2-qadd .v2-qpaste:hover{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
.v2-qpaste{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.v2-qbr{display:none}
/* Téléphone : l'étiquette et « Ajouter au catalogue » (avec son texte) au-dessus, les autres boutons sur une rangée. */
@media (max-width:560px){.v2-qbr{display:block;flex:0 0 100%;height:0}.v2-qline-acts .btn.v2-qtocat{width:auto;padding:0 10px}.v2-qline-acts .btn.v2-qtocat>span{display:inline}}
@media (max-width:860px){.modal-footer:has(.v2-qpaste){flex-wrap:wrap}.modal-footer .v2-qpaste{order:-1;flex:1 0 100%;min-height:44px}} /* fenêtre « Ajouter une prestation » : « Coller » sur sa ligne */
.modal-footer .v2-qpaste{border-style:dashed;border-color:color-mix(in srgb,var(--accent) 55%,var(--line2));color:var(--accent)}

/* 2.30.31 · Mensualités Billit : « Reprendre dans TrackR » sous la mensualité ; alerte orange tant que Billit la facture encore tout seul
   (mensualité, « À préparer », carte Récurrence de l'éditeur). */
.v2-rec-still-l{display:flex;align-items:flex-start;gap:5px;margin-top:4px;font-size:11.5px;font-weight:700}
.v2-rec-still-l .i{flex:none;margin-top:1px}
.v2-rec-still{margin-top:6px}.card .v2-rec-still{color:var(--orange)} /* plus fort que .card p (gris) */
.v2-rec-still a{color:inherit;text-decoration:underline}
/* ——— 2.30.33 · Nouveau Dashboard (Pierre, 31/10 : « refait le design du dashboard, desktop et mobile comme tu recommençais le thème givre,
   (en oubliant les instructions que j'ai donné pour modifier), garde juste les infos actuelles ») : une seule forme de carte, l'objectif en
   bandeau, les cases en grille régulière (4 par ligne, la dernière remplie ; 2 sur téléphone), les blocs en deux colonnes à 1 280 px et plus
   (dashStacks). Les couches 2.13 à 2.30.15 visaient .v2-dash-kpis, .v2-ph-grid, .v2-m-list et --span : elles ne s'appliquent plus. ——— */
.v2-dash{--dz-gap:20px;--dz-r:22px}
.v2-dash .v2-dash-grid{display:flex;flex-direction:column;gap:var(--dz-gap)}
.v2-dash .v2-dash-grid>*{min-width:0;margin:0}
@media (max-width:860px){.v2-dash{--dz-gap:12px;--dz-r:20px}
}
/* Titres des blocs : la pastille d'icône des cases, à la couleur de la famille du bloc (DASH_BFAM). En-tête plus compact. */
.v2-dc-ico svg{width:16px;height:16px}
.v2-dash>.page-heading{margin-bottom:20px}
.v2-dash>.page-heading h2{font-size:30px;line-height:36px}
@media (max-width:860px){.v2-dc-ico svg{width:14px;height:14px}
}
/* 2.30.34 · Menu du téléphone (« c'est moche, pas agréable ni facile à utiliser en mobile ») : comme l'écran d'accueil du téléphone,
   quatre pages par ligne, une pastille d'icône à la couleur de sa partie, le nom dessous ; la page ouverte en plein. */
.m-more-grid{display:flex;flex-direction:column;gap:20px;padding-bottom:4px}
.m-more-sec{--k:var(--accent)}
.m-more-sec.is-pilot,.m-more-sec.is-home{--k:var(--blue)}
.m-more-sec.is-sales{--k:var(--violet)}
.m-more-sec.is-projects{--k:var(--green)}
.m-more-sec.is-me{--k:var(--orange)}
.m-more-sec>.m-more-label{grid-column:auto;margin:0 2px 11px;font-size:11px;letter-spacing:.11em;color:var(--muted)}
.m-more-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 6px}
.m-more-row>.m-more-item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;min-width:0;min-height:0;padding:0;border:0!important;border-radius:0;background:none!important;box-shadow:none;color:var(--text);text-align:center;font-size:11.5px;font-weight:650;line-height:14px;-webkit-tap-highlight-color:transparent}
.m-more-row>.m-more-item>span{flex:none}
.m-more-ico{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:color-mix(in srgb,var(--k) 14%,var(--surface));color:var(--k);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--k) 20%,transparent);transition:transform .15s ease}
.m-more-ico>svg{width:24px;height:24px}
.m-more-item:active>.m-more-ico{transform:scale(.93)}
.m-more-txt{display:-webkit-box;max-width:100%;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.m-more-row>.m-more-item.is-current>.m-more-ico{background:var(--k);color:#fff;box-shadow:0 10px 20px -10px var(--k)}
.m-more-row>.m-more-item.is-current>.m-more-txt{font-weight:800}
.m-more-ico>.nav-count{position:absolute;inset:-6px -7px auto auto;width:auto;min-width:20px;height:20px;padding:0 6px;border:0;border-radius:999px;line-height:20px;font-size:10.5px;box-shadow:0 3px 8px -3px #0008}
/* 2.30.34 : dans « À encaisser », une facture pas encore échue garde sa date d'échéance en gris (les échues restent en rouge). */
.v2-unpaid-days>.v2-od-soon{color:var(--muted)}
/* 2.30.35 · Création automatique des factures récurrentes dans Billit : interrupteur et dernier passage (carte Récurrence), pastille
   « Automatique » et message dans « À préparer », note sur la facture préparée par TrackR. */
.v2-rec-auto{display:grid;gap:8px;margin:10px 0 2px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface2)}
.v2-rec-auto-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.v2-rec-auto-row>span{display:grid;gap:3px;min-width:0}
.v2-rec-auto-row b{font-size:13.5px;line-height:1.3}
.v2-rec-auto-row small{color:var(--muted);font-size:12px;line-height:1.45}
.v2-rec-auto-msg{display:flex;align-items:flex-start;gap:6px;margin:0}
.v2-rec-auto-msg>.i{flex:none;margin-top:2px}
small.v2-rec-auto-msg{display:block;margin-top:4px;color:var(--muted);font-size:11.5px;line-height:1.4}
.v2-rec-still .v2-dk-link{font:inherit;font-weight:800}
/* 2.30.36 · Parrainages : chiffres en tête, une carte par personne présentée (nom, parrain, coordonnées, son projet, choix d'un
   administrateur), statut et boutons à droite sur ordinateur, dessous sur téléphone ; fiche du prospect, fiche du client, démo du portail. */
.v2-ref-main strong{font-size:15px;overflow-wrap:anywhere}
.v2-ref-main>small{color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
/* Téléphone : chiffres sur une ligne, statut et boutons sur la même ligne sous la carte (Pierre : rien qui prend la moitié de l'écran pour peu). */
.v2-ref-empty p{max-width:520px;margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}
.v2-lead-ref-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--glass-edge,var(--line));border-radius:12px;box-shadow:var(--glass-hi,none)}
.v2-lead-ref-row>span:first-child{display:grid;gap:2px;flex:1;min-width:0}
.v2-lead-ref-row strong{display:flex;align-items:center;gap:6px;font-size:14px;overflow-wrap:anywhere}
.v2-lead-ref-row small{color:var(--muted);font-size:12px}
.v2-client-refs{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:8px}
.v2-client-refs button{cursor:pointer}
.v2-client-refs button:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.v2-client-refs strong{display:block;font-size:14px}
.v2-client-refs small{display:block;color:var(--muted);font-size:12px}
.v2-pd-refs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:8px}
.v2-pd-refs li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.v2-pd-refs li>span:first-child{flex:1 1 160px;min-width:0}
.v2-pd-refs strong{display:block;font-size:14px;overflow-wrap:anywhere}
.v2-pd-refs small{display:block;color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.v2-pd-refs p{flex-basis:100%;margin:0;color:var(--muted);font-size:12.5px}
/* 2.33.8 : « Votre bilan » du parrain dans l'aperçu du portail, comme .rsum du portail (clients ramenés, mois offerts, réduction). */
.v2-pd-rsum{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:8px;margin:0;padding:0}
.v2-pd-rsum li{padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.v2-pd-rsum strong{display:block;font:700 26px/1.1 'Space Grotesk',system-ui,sans-serif;overflow-wrap:anywhere}
.v2-pd-rsum .is-money strong{font-size:clamp(18px,5vw,26px)}
.v2-pd-rsum span{display:block;margin-top:3px;color:var(--muted);font-size:12.5px}
/* 2.30.37 · Récompense du parrainage : une ligne sous la personne présentée (orange tant qu'elle est à choisir), la fenêtre du choix,
   les mois offerts sur la carte « Récurrence », la ligne « Réduction parrainage » d'un devis et sa proposition au-dessus des lignes. */
.v2-ref-rw>span{flex:1 1 180px;min-width:0;overflow-wrap:anywhere}
.v2-rw-months{display:grid;gap:8px}
.v2-rw-months [data-rw-prev]{display:flex;align-items:flex-start;gap:6px;margin:0;line-height:1.45}
.v2-rw-months [data-rw-prev]>.i{flex:none;margin-top:2px}
.v2-rec-gift span{display:inline-flex;align-items:center;gap:6px}
.v2-rec-gift span>.i,.v2-rec-gift b{color:var(--green)}
.v2-q-refer{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 12px;padding:10px 14px;border:1px solid color-mix(in srgb,var(--green) 40%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--green) 8%,var(--surface));font-size:13.5px;font-weight:600}
.v2-q-refer>.i{flex:none;color:var(--green)}
.v2-q-refer>span{flex:1 1 220px;min-width:0}
.v2-client-refs small.v2-client-ref-rw{display:flex;align-items:center;gap:5px;margin-top:2px;color:var(--green);font-weight:600}


/* 2.32.1 · Dashboard du téléphone sur toute la hauteur (Pierre, 01/11 : « que ça descende jusqu'en bas, mais qu'on ne doive pas avoir de
   scroll. Redimensionne ça, que ça ait un bon ratio ») : --px vaut 1 px × --ph-z ; dashFill() (app.js) choisit --ph-z (0,85 à 1,3 ; 0,82 depuis la 2.32.3) pour que
   le tout tienne pile entre l'en-tête et la barre du bas, puis dashGrow() allonge chaque bloc en proportion s'il reste de la place (--ph-g,
   --ph-h, qui passent la règle !important de la 2.20). Un bloc allongé garde son titre en haut et son chiffre en bas. Sur un iPhone
   installé sur l'écran d'accueil, la page s'arrête 14 px au-dessus de la barre du bas, comme dans Safari (34 px de plus avant). */
@media (max-width:860px){.main:has(.v2-dash.is-ph){padding-bottom:max(94px,calc(env(safe-area-inset-bottom) + 74px))}}
/* 2.32.3 · Entrées du compte (Pierre, 01/11 : « dans la tréso, je veux aussi voir les entrées d'argent ») : la fenêtre des sorties sert aux
   deux sens (« Entrées | Sorties » en haut), montants et période choisie des entrées en vert ; sur le téléphone, la date au-dessus du montant
   et « Entrées · Sorties » dessous. « Évolution du CA » sur le Dashboard du téléphone (« mets le graphique du CA un peu plus grand sur mobile ») :
   il suit le zoom (--px) et prend la place libre au lieu de rester à 180 px ; l'anneau de l'objectif passe à 88 px (règle de la 2.31.1). */
.v2-out-kind{margin:0 0 10px}
.v2-out-list.is-in b{color:var(--green)}
.v2-out-tabs.is-in button.is-on{border-color:color-mix(in srgb,var(--green) 55%,var(--line2));background:color-mix(in srgb,var(--green) 10%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--green) 35%,transparent)}

/* 2.32.6 · Rouge et vert remplacés par le violet et le vert de l'image de Pierre (01/11 : « je veux que tu revoie les couleurs rouge et
   verte par celles ci »). --red et --green portent les textes (violet #692aa7 et vert #2e9a36 en clair, #a77df0 et #5ad762 en sombre) ;
   les barres et les points de la facturation prennent les teintes vives de l'image (--vif-ok #4ace52, --vif-ko #9d65e2), comme les
   pastilles d'état des listes du JS (devis, factures, projets, SAV, demandes du portail), écrites en clair. */
:root{--vif-ok:#4ace52;--vif-ko:#9d65e2}
.v2-mb-bar i,.v2-mb-leg.is-paid>i{background:var(--vif-ok)}

/* 2.32.7 · Pierre (01/11, avec une capture) : « des icônes sympa pour ces cards et la card des échus en fond mauve clair comme ici » : une
   icône au-dessus du nom des trois petites cartes de la Facturation du téléphone, et « Échu » en mauve clair quand une facture est échue. */
.v2-dash.is-ph .v2-bill-tiles .v2-bt-ico{display:block;width:calc(22*var(--px));height:calc(22*var(--px));margin:0 0 calc(7*var(--px));color:color-mix(in srgb,var(--accent) 60%,var(--muted))}
.v2-dash.is-ph .v2-bill-tiles .v2-bt-ico>.i{display:block;width:100%;height:100%}
.v2-dash.is-ph .v2-bill-tiles>.is-due .v2-bt-ico{color:var(--red)}
.v2-dash.is-ph .v2-bill-tiles>.is-due.is-bad{background:color-mix(in srgb,var(--vif-ko) 20%,var(--surface));border-color:color-mix(in srgb,var(--vif-ko) 34%,var(--line))}
.v2-dash:not(.is-ph) .v2-bt-ico{display:none}
/* 2.32.7 · « je veux un peu de vert dans le graphique du CA aussi » : l'arc du CA de Billit en vert (du vert menthe au vert vif de son image
   en sombre, du vert vif à son vert en clair ; Givre : le vert menthe sur la carte violette) ; « hors Billit » garde sa couleur. */
#v2-ring-grad stop:first-child{stop-color:#c7f9c1}
#v2-ring-grad stop:last-child{stop-color:var(--vif-ok)}
[data-theme="light"] #v2-ring-grad stop:first-child{stop-color:var(--vif-ok)}
[data-theme="light"] #v2-ring-grad stop:last-child{stop-color:var(--green)}
/* 2.33.2 (Pierre, 02/11 : « en desktop, je veux pouvoir rétracter le menu de gauche ») : bouton en haut du menu ; menu réduit à ses
   icônes (le nom au survol, les pastilles sur l'icône, une ligne entre les sections), sur ordinateur seulement (dès 861 px), gardé sur
   l'appareil (dimagin-nav-rail). L'animation ne joue qu'au clic (rail-in, rail-out). */
.nav-rail-btn{flex:0 0 auto;margin-left:auto;display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--muted);cursor:pointer;transition:color .18s,background .18s,border-color .18s}
.nav-rail-btn:hover{color:var(--text);background:var(--surface2)}
@media (min-width:861px){
 .layout{--nav-w:248px}
 .layout.is-rail{grid-template-columns:76px minmax(0,1fr)}
 .layout.is-rail .sidebar{width:auto;padding-left:12px;padding-right:12px}
 .layout.is-rail .brand{flex-direction:column;gap:14px;padding:3px 0 20px}
 .layout.is-rail .brand>:not(.brand-icon):not(.nav-rail-btn){display:none}
 .layout.is-rail .nav-rail-btn{margin:0}
 .layout.is-rail .nav-section-toggle{display:none}
 .layout.is-rail .nav-section-toggle+.nav-list{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
 .layout.is-rail .nav-link{justify-content:center;gap:0;padding-left:0;padding-right:0}
 .layout.is-rail .nav-link>span{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
 .layout.is-rail .nav-link .nav-indicator{position:absolute;right:5px;top:50%;margin:-3px 0 0}
 .layout.is-rail .nav-count{left:calc(50% + 3px)}
 .layout.rail-in{animation:v2RailIn .22s cubic-bezier(.2,.7,.3,1)}
 .layout.rail-out{animation:v2RailOut .22s cubic-bezier(.2,.7,.3,1)}
 .layout.rail-in .sidebar,.layout.rail-out .sidebar{overflow:hidden}
}
@keyframes v2RailIn{from{grid-template-columns:var(--nav-w) minmax(0,1fr)}}
@keyframes v2RailOut{from{grid-template-columns:76px minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.layout.rail-in,.layout.rail-out{animation:none}}
/* 2.33.2 (Pierre, 02/11 : « nouveau logo et favicon ») : son identité. La marque : carré arrondi violet nuit, lueur en bas à gauche,
   crochet du T (LOGO_MARK, base.js) ; mêmes calques que assets/icon.svg, dans toutes les apparences. Le mot « TrackR » : tracé de
   son image (masque), barre du T du violet à l'encre, R violet ; encre et violet suivent le thème. */
.brand-icon,.mobile-logo,.boot-mark{background:radial-gradient(91.0% 97.8% at 0 100%, #fff5ffff 0%, #9466f9ff 28.6%, #9466f996 40.0%, #9466f957 50.0%, #9466f92c 60.0%, #9466f912 70.0%, #9466f905 80.0%, #9466f901 90.0%, #9466f900 100%),linear-gradient(180deg,#9279e853 0,#9279e800 24.0%),radial-gradient(83.6% 95.4% at 0 0, #a072ffff 0%, #a072ffa8 20.0%, #a072ff62 40.0%, #a072ff2e 60.0%, #a072ff0c 80.0%, #a072ff00 100%),linear-gradient(90deg,#483b7800 95.7%,#483b7844 100%),#201c48!important;border-radius:24%!important;box-shadow:0 6px 16px #221c4a40,inset 0 0 0 1px #ffffff29!important}
.brand-icon{flex:none}.brand-sub{white-space:nowrap} /* « FOUNDER MODE » sur une ligne, même avec une barre de défilement */
.v2-wordmark{--wm-ink:#f1eefc;--wm-r:#a68cff;--wm-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='686' height='136' viewBox='0 0 685.9 136.5'%3E%3Cpath fill-rule='evenodd' d='M1.7,0 0.4,1.3 0,4.3 0.6,8.3 2.7,12.8 4.6,15.3 8,18.3 12.7,20.6 15.7,21.3 24.7,21.7 113.7,21.7 117.7,22.1 124.7,23.9 129.6,26.3 133.7,28.9 139,34.3 142.1,39.3 144.9,47.3 145.8,53.3 146,134.3 146.7,134.9 150.7,134.9 155.7,133.6 159.7,131.3 162.9,128.3 165.8,123.3 167,117.3 167.1,54.3 166.3,45.3 164,36.3 159.9,27.3 155.9,21.3 152.7,17.5 146.7,12 140.7,7.9 132.7,4 121.7,1.1 112.7,0ZM468.7,0 465.7,1.1 464.4,2.3 463.1,4.3 462.4,7.3 462.5,128.3 462.7,130.3 463.6,132.3 466.7,134.5 471.7,134.9 475.7,134.5 478.6,132.3 480.1,129.3 480.1,105.3 498.7,88.5 499.7,88.6 501.9,91.3 531.6,129.3 534.7,132.4 536.7,133.6 539.7,134.5 555.7,134.5 556.9,133.3 557,132.3 555.9,130.3 512.6,76.3 513.2,75.3 516.7,72 552.7,39.3 554,37.3 553.8,36.3 552.7,35.3 551.7,35.1 535.7,35.2 531.7,36 529.7,37.2 480.7,82.7 480.2,81.3 480.1,74.3 480,5.3 479.2,3.3 476.7,0.9 473.7,0ZM215.7,34.2 225.7,34 231.7,35 237.7,37.1 240.9,39.3 243.1,42.3 243.9,45.3 243.4,48.3 241.9,51.3 240.7,52.4 238.7,53.6 235.7,54.3 223.7,51.4 219.7,51.4 215.7,52 212.7,53.1 208.7,55.2 205.7,57.5 203.3,60.3 200.6,65.3 198.6,74.3 198.1,130.3 196.7,132.7 193.7,134.7 184.7,134.5 181.7,132 180.6,129.3 180.6,73.3 181.5,66.3 182.5,62.3 184.3,57.3 187.6,51.3 190.6,47.3 194.8,43.3 202.7,38.1 207.7,36.1ZM282.7,34.2 269.7,37 262.7,40 257.7,42.9 255.7,45.4 255,48.3 255.4,51.3 257.4,54.3 260.7,56.6 262.7,57 275.7,52.1 279.7,51 287.7,49.8 299.7,50.2 307.7,52 313.7,55 316.7,57.5 319,60.3 320.8,63.3 322.3,67.3 323.1,71.3 323.1,76.3 322.7,77.2 309.7,74.8 300.7,73.7 288.7,73.5 281.7,74.1 275.7,75.1 269.7,76.9 262.7,80 257.9,83.3 254.7,86.3 250.7,92.4 248.7,97.4 247.9,102.3 248,108.3 249.6,115.3 251.5,119.3 255.7,124.8 261.7,129.7 269.7,133.5 276.7,135.5 284.7,136.4 289.7,136.4 296.7,135.8 302.7,134.5 308.7,132.4 312.7,130.5 318.7,126.3 322.7,122.5 323.7,122.5 324.2,130.3 326.1,133.3 328.7,134.6 336.7,134.6 338.7,133.3 339.7,132 340.4,129.3 340.5,73.3 338.9,62.3 335.9,54.3 330.9,47.3 327.7,44.1 322.2,40.3 315.7,37.1 308.7,35 301.7,33.9 292.7,33.5ZM398.7,34.1 387.7,37.1 379.7,41.2 372.9,46.3 368.7,50.4 365.5,54.3 361.4,61.3 359.5,65.3 357.4,71.3 356.4,76.3 356,82.3 356.5,94.3 359.4,104.3 363.4,112.3 369.6,120.3 372.7,123.4 377.7,127.4 382.7,130.4 387.7,132.6 392.7,134.3 397.7,135.4 407.7,136.5 418.7,135.4 425.7,133.6 432.7,130.7 439.7,126.5 443.7,123.3 445.8,121.3 447.4,118.3 447.4,115.3 446.2,112.3 443.7,109.9 441.7,108.8 439.7,107.9 436.7,107.9 427.7,114.6 423.7,116.6 418.7,118.6 410.7,120 400.7,119.5 394.7,117.6 390.7,115.7 385.7,112.3 382.6,109.3 378.3,103.3 375.6,97.3 373.9,90.3 373.6,84.3 374.4,77.3 375.4,73.3 379.2,65.3 383.7,59.6 389.7,55.1 393.7,53 398.7,51.1 408.7,49.9 417.7,51.1 425.7,54.2 435.7,61.5 438.7,62.1 442.7,60.3 445.9,57.3 447.3,54.3 447.2,51.3 445.7,48.4 440.7,44.1 434.7,40.1 425.7,36.1 414.7,33.8 407.7,33.5ZM285.5,88.3 278.7,89.9 273.7,92.1 269.7,95.2 267.4,98.3 266.1,103.3 266.5,109.3 267.4,111.3 269.6,114.3 273.7,117.5 278.7,119.6 286.7,121 295.7,120.8 302.7,119.7 308.7,117.7 314.7,114.4 319.1,110.3 321,107.3 321.9,105.3 323.2,100.3 323.3,91.3 322.7,90.6 302.7,87.8 290.7,87.6ZM587.7,1.2 632.7,1.2 643.7,2.1 652.7,4 660.7,7 668.7,12 675,18.3 677.7,22.4 679.9,27.3 681.9,33.3 682.7,38.3 681.9,51.3 680,57.3 677.7,61.9 674.9,66.3 668.7,72.3 665.7,74.5 660.5,77.3 654.7,79.6 647.7,81.5 647.2,82.3 681.2,126.3 684.7,130.3 685.9,132.3 685.9,133.3 684.7,134.5 666.7,134.5 662.7,133.4 659.7,131.5 657.4,129.3 623.3,84.3 621.7,83.1 597.7,83.3 594.7,84.1 592.7,85.6 591.3,87.3 590.2,90.3 590.3,127.3 589.9,130.3 587.7,133.4 584.7,134.6 575.7,134.6 573.7,133.8 571.7,132 570.5,128.3 570.5,83.3 571.4,78.3 572.6,75.3 574.3,72.3 576.7,69.6 578.7,67.8 581.7,66.1 589.7,63.9 634.7,63.7 643.7,62.5 651.7,59.5 655.7,56.3 659.4,51.3 660.9,45.3 661,39.3 660,35.3 657.7,31.4 654.9,28.3 651.7,26 644.7,23 634.7,21.6 571.7,21.7 570.4,20.3 570.5,17.3 571.5,13.3 574.2,8.3 577.1,5.3 580.7,3 583.7,1.9Z'/%3E%3C/svg%3E");display:block;height:19px;aspect-ratio:685.9/136.5;background:var(--wm-ink);background:linear-gradient(90deg,var(--wm-r) 1.6%,color-mix(in srgb,var(--wm-r) 52%,var(--wm-ink)) 8.6%,var(--wm-ink) 19%,var(--wm-ink) 82.2%,var(--wm-r) 82.2%);-webkit-mask:var(--wm-mask) center/contain no-repeat;mask:var(--wm-mask) center/contain no-repeat} /* sans color-mix (iOS avant 16.2) : le mot d'une couleur */
[data-theme="light"] .v2-wordmark{--wm-ink:#241e4e;--wm-r:#8b6cf6}
.brand-title .v2-wordmark{margin:1px 0 4px}
html[data-skin=givre] .brand-title .v2-wordmark{margin:4px 0 8px} /* Givre : la hauteur de l'ancien titre (28 px) et ses 3 px avant « FOUNDER MODE », dont la marge se fond avec celle-ci : le menu ne bouge pas */
.login-logo{display:flex;align-items:center;gap:16px}
.login-logo .v2-wordmark{height:30px}
.login-logo i{align-self:stretch;width:1px;background:currentColor;opacity:.25}
.login-logo small{font:600 10.5px/1.5 system-ui,sans-serif;letter-spacing:.32em;opacity:.8}
/* Étape 4d, partie 2 (03/11/2026) : un module se charge (classe posée sur <html> par le chargeur, noyau/aiguillage.js) : curseur
   d'attente, et une fine barre en haut de l'écran si le chargement dure plus de 150 ms */
html.is-chargement{cursor:progress}
html.is-chargement::after{content:"";position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;height:2px;z-index:2147483000;pointer-events:none;background:var(--accent);transform-origin:0 50%;animation:is-chargement 1.1s ease-in-out .15s infinite backwards}
@keyframes is-chargement{0%{transform:scaleX(0);opacity:1}70%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes is-chargement-fondu{from{opacity:0}to{opacity:0}}
@media (prefers-reduced-motion:reduce){html.is-chargement::after{transform:none;opacity:.7;animation:is-chargement-fondu 1ms linear .15s backwards}}