/* 2.22.1 · Essai « nom du projet » envoyé à Billit (case du bloc Billit d'un devis). */
.v2-qtrial{margin-top:10px;align-items:flex-start;font-size:13px}.v2-qtrial small{display:block;margin-top:2px;color:var(--muted);font-size:11.5px}
.v2-qp-input{flex:1;min-width:0;min-height:40px;padding:11px 0;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:inherit}
.v2-qp-input::placeholder{color:var(--subtle)}
.v2-qlink{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;align-items:center;gap:6px}
.v2-qsecs{display:grid;gap:14px}
.v2-qsec{display:grid;gap:10px;padding:12px 14px}
.v2-qsec-head{display:flex;align-items:center;gap:8px}
.v2-qsec-head h4{flex:1;margin:0;font-size:14px}
.v2-qsec-tot{font-size:13.5px;white-space:nowrap;font-variant-numeric:tabular-nums}.v2-qsec-tot small{color:var(--muted);font-weight:700}
.v2-qlines{display:grid;gap:10px}
.v2-qline{display:grid;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface2) 72%,transparent)}
.v2-qline.is-new{animation:v2-qnew 1.4s ease}
@keyframes v2-qnew{from{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent)}to{box-shadow:0 0 0 0 transparent}}
.v2-qline.is-sorting,.v2-qsec.is-sorting{box-shadow:var(--shadow);z-index:2;position:relative}
.v2-qline-top{display:flex;align-items:center;gap:8px}
.v2-qname{flex:1;min-width:0;font-weight:700}
.v2-qline-total{display:grid;justify-items:end;min-width:96px;font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.v2-qline-total small{color:var(--muted);font-size:11px;font-weight:700}.v2-qline-total .v2-qline-disc{color:var(--green)}
.v2-qhandle{display:inline-grid;place-items:center;flex:0 0 auto;width:28px;height:34px;border:0;border-radius:8px;background:none;color:var(--subtle);cursor:grab;touch-action:none}
.v2-qhandle:hover{background:var(--surface3);color:var(--text)}
.v2-qline-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.v2-qf{display:grid;gap:4px;min-width:0}
.v2-qf>span:first-child{color:var(--muted);font-size:11px;font-weight:700}
.v2-qf .form-input,.v2-qf .form-select{min-height:38px;padding-top:6px;padding-bottom:6px;font-size:14px}
.v2-qdisc{display:flex;gap:4px}.v2-qdisc .form-input{flex:1;min-width:0}.v2-qdisc .form-select{flex:0 0 auto;width:60px;padding-left:9px;padding-right:22px}
.v2-qf-int>span:first-child{color:var(--violet)}
.form-input.is-todo{border-color:color-mix(in srgb,var(--orange) 60%,var(--line2))}.form-input.is-bad{border-color:var(--red)}
.v2-qline-acts{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:4px}
.v2-qmove{display:none}
.v2-qmemo{display:grid;gap:8px;padding:10px 12px;border:1px dashed color-mix(in srgb,var(--accent) 50%,var(--line2));border-radius:12px;background:color-mix(in srgb,var(--accent) 8%,transparent);font-size:13px}
.v2-qmemo>span:first-child{display:flex;align-items:flex-start;gap:6px;font-weight:700}
.v2-qmemo-acts{display:flex;flex-wrap:wrap;gap:6px}
.v2-qmemo-sim{display:grid;gap:6px}.v2-qmemo-sim:empty{display:none}.v2-qmemo-sim p{display:flex;align-items:center;gap:5px;margin:0;font-weight:700}
.v2-qadd{display:flex;flex-wrap:wrap;gap:8px}.v2-qadd-sec{justify-content:center}
.v2-qt-block{display:grid;gap:5px;padding:10px 0 0;border-top:1px solid var(--line)}
.v2-qt-block:first-child{padding-top:0;border-top:0}
.v2-qt-block h4{display:flex;align-items:center;gap:5px;margin:0 0 2px;color:var(--subtle);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.v2-qt-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:13px}
.v2-qt-row span{min-width:0;color:var(--muted)}
.v2-qt-row b{white-space:nowrap;font-variant-numeric:tabular-nums}.v2-qt-row b small{color:var(--muted)}
.v2-qt-row.is-strong b{font-size:14px}
.v2-qt-row.is-big{font-size:15px}.v2-qt-row.is-big span{color:var(--text);font-weight:800}.v2-qt-row.is-big b{font-size:19px;font-weight:900}
.v2-qt-row.is-muted b,.v2-qt-row.is-ok b{color:var(--green)}.v2-qt-row.is-warn b{color:var(--orange)}
.v2-qt-int{padding:10px 12px;border:1px dashed color-mix(in srgb,var(--violet) 38%,transparent);border-radius:12px;background:color-mix(in srgb,var(--violet) 7%,transparent)}
.v2-qt-block+.v2-qt-int{margin-top:4px}
.v2-qwarn{display:flex;align-items:flex-start;gap:6px;margin:0;color:var(--orange);font-size:12.5px;font-weight:700}
.v2-qlog summary{color:var(--muted);font-size:12.5px;font-weight:700;cursor:pointer}
.v2-qlog ul{display:grid;gap:6px;margin:8px 0 0;padding:0;list-style:none}
.v2-qlog li{display:grid;gap:2px;padding-left:9px;border-left:2px solid var(--green);font-size:12px}.v2-qlog li.is-bad{border-left-color:var(--red)}.v2-qlog li small{color:var(--subtle)}
.v2-qcp{display:grid;gap:10px}
.v2-qcp-list{display:grid;align-content:start;gap:6px;max-height:min(60vh,520px);overflow:auto}
.v2-qcp-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:12px;background:var(--surface2);color:var(--text);font:inherit;text-align:left;cursor:pointer}
.v2-qcp-row:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line2))}
.v2-qcp-row>span{display:grid;gap:2px;min-width:0}
.v2-qcp-row small{overflow:hidden;color:var(--muted);font-size:11.5px;text-overflow:ellipsis;white-space:nowrap}
.v2-qcp-row>b{display:grid;justify-items:end;font-size:13px;white-space:nowrap}.v2-qcp-row>b small{font-weight:600}
.v2-qmini{display:grid;gap:6px;margin:8px 0 0;padding:0;list-style:none}
.v2-qmini button{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface2);color:var(--text);font:inherit;font-size:13px;text-align:left;cursor:pointer}
.v2-qmini button>span{flex:1;min-width:0}.v2-qmini small{color:var(--muted)}.v2-qmini b{font-size:12px;white-space:nowrap}
.v2-lead-quotes .v2-qmini b{display:none}
.v2-q-wait{display:grid;gap:8px;padding:20px}
.v2-qbar{display:none}
.v2-q-totals,.v2-q-billit,.v2-q-catcol{background:var(--panel-bg)}
@media (min-width:1440px){.v2-q-grid{grid-template-columns:250px minmax(0,1fr) 330px}
 .v2-q-catcol{position:sticky;top:28px;display:grid;align-content:start;gap:10px;max-height:calc(100vh - 44px);padding:14px;overflow:auto}
 .v2-q-catcol .section-title{margin:0}.v2-q-catcol .v2-qcp-list{max-height:none;overflow:visible}
 .v2-q-catcol .v2-qcp-row{flex-direction:column;align-items:stretch;gap:4px}.v2-q-catcol .v2-qcp-row>b{justify-items:start}}
@media (max-width:1100px){.v2-q-grid{grid-template-columns:minmax(0,1fr)}.v2-q-side{position:static}}
/* 2.23.2 · « Enlève le sticky ici » : l'en-tête du devis (titre, statut, Aperçu, Enregistrer) défile avec la page ; Enregistrer est
   aussi en bas du devis (.v2-qfoot) sur ordinateur et tablette, et dans la barre du bas sur téléphone. */
.v2-qfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px;margin-top:18px}.v2-qfoot .v2-qsaved{min-width:0}
@media (max-width:860px){.v2-qfoot{display:none}}
/* 2.22.5 · « voir directement l'aperçu » : sur ordinateur, l'aperçu en direct à droite, puis le récapitulatif et Billit (la colonne défile seule) */
.v2-q-live{display:grid;gap:10px;padding:12px;background:var(--panel-bg)}
.v2-q-live-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 0}.v2-q-live-head .section-title{flex:1 1 auto}
/* 2.22.6 · Mise en page Billit du devis, en haut de l'aperçu */
.v2-qlay{display:inline-flex;align-items:center;gap:8px;min-width:0;color:var(--muted);font-size:12px;font-weight:700}.v2-qlay .form-select{width:auto;min-width:150px;max-width:220px;height:34px;padding-top:0;padding-bottom:0;font-size:13px}
.v2-qprev>.v2-qlay{justify-self:start}.v2-qlay-none{color:var(--muted);font-size:12px}
.v2-qlay-seen{display:grid;gap:4px;margin:0 0 10px;padding:0;list-style:none;color:var(--muted);font-size:13px}.v2-qlay-seen b{color:var(--text)}.v2-q-live-head .section-title{margin:0}
.v2-q-live-head small{margin-left:6px;color:var(--green);font-size:11px;font-weight:800;letter-spacing:.02em}
/* 2.22.8 · l'aperçu en direct sur tablette en paysage et ordinateur (dès 861 px, comme l'en-tête collant) ; il tient dans la hauteur de l'écran (qPrevFit). */
@media (min-width:861px){.v2-q-grid.is-live{grid-template-columns:minmax(0,1fr) clamp(260px,40%,520px)}.v2-q-grid.is-live .v2-q-catcol{display:none}
 .v2-q-grid.is-live .v2-q-side{position:sticky;max-height:calc(100vh - 44px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;border-radius:var(--radius-lg,18px)}
 .v2-qprev-btn[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}}
@media (max-width:860px){.v2-q-live{display:none}}
@media (max-width:860px){
 .v2-quote{padding-bottom:84px}
 .v2-qtitle{font-size:20px}
 .v2-qhead-acts{width:100%}
 .v2-qmove{display:inline-grid}
 .v2-qline-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
 .v2-qf .form-input,.v2-qf .form-select,.v2-qname{min-height:44px;font-size:16px}
 .v2-qline-total{min-width:0}
 .v2-qlink{grid-template-columns:minmax(0,1fr) auto}.v2-qlink [data-qlf="url"]{grid-row:2;grid-column:1/-1}
 .v2-qbar{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 16px;border:1px solid var(--glass-edge,var(--line2));border-radius:16px;background:color-mix(in srgb,var(--surface) 90%,transparent);box-shadow:var(--shadow);-webkit-backdrop-filter:var(--glass-blur,blur(16px));backdrop-filter:var(--glass-blur,blur(16px))}
 .v2-qbar>span,.v2-qbar-sum{display:grid}.v2-qbar-sum{min-width:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}.v2-qbar-sum small .i{vertical-align:-2px}.v2-qbar small{color:var(--muted);font-size:11px;font-weight:700}.v2-qbar b{font-size:18px;font-weight:900;font-variant-numeric:tabular-nums}
 .v2-qbar>.v2-qbar-acts{display:flex;gap:8px}
 .v2-qbar .btn{justify-content:center;width:46px;height:46px;padding:0;border-radius:14px}
 html:has(.v2-qbar) #toast-stack{bottom:calc(158px + env(safe-area-inset-bottom))}
}
@media (max-width:420px){.v2-qsec-head{flex-wrap:wrap}.v2-qsec-tot{margin-left:36px}}
@media (max-width:560px){.v2-qline-acts .btn>span{display:none}.v2-qline-acts .btn{width:38px;padding:0;justify-content:center}}
.v2-qmore{padding-top:10px;border-top:1px solid var(--line)}
.v2-qmore>summary{display:flex;align-items:center;flex-wrap:wrap;gap:6px;color:var(--muted);font-size:13px;font-weight:700;list-style:none;cursor:pointer}
.v2-qmore>summary::-webkit-details-marker{display:none}
.v2-qmore>summary .i{transition:transform .15s}.v2-qmore[open]>summary .i{transform:rotate(90deg)}
.v2-qmore>summary small{color:var(--subtle);font-weight:600}
.v2-qmore[open]>summary{margin-bottom:12px}
.v2-qmore-end{display:flex;justify-content:center}

/* ——— 2.16 : revenu mensuel, couverture, rentabilité, répartitions (Dashboard) ——— */
/* Couleurs de séries (huit, dans cet ordre, jamais recyclées ; validées en clair sur #fff et en sombre sur #151d32) ; --s0 = gris « sans / autres ». */
:root,[data-theme="dark"]{--s1:#3987e5;--s2:#d95926;--s3:#199e70;--s4:#c98500;--s5:#d55181;--s6:#008300;--s7:#9085e9;--s8:#e66767;--s0:#5b6886}
[data-theme="light"]{--s1:#2a78d6;--s2:#eb6834;--s3:#1baf7a;--s4:#eda100;--s5:#e87ba4;--s6:#008300;--s7:#6250d6;--s8:#e34948;--s0:#b3bccd}
.v2-c0{--c:var(--s0)}.v2-c2{--c:var(--s2)}.v2-c3{--c:var(--s3)}.v2-c4{--c:var(--s4)}.v2-c5{--c:var(--s5)}.v2-c6{--c:var(--s6)}.v2-c7{--c:var(--s7)}.v2-c8{--c:var(--s8)}
/* 2.17 : mois prochain (prévu) = 13e colonne hachurée (à facturer, HTVA) et deux chiffres sous le graphique, jamais additionnés. */
.v2-inc-next strong{flex:1 0 100%;font-size:12px}.v2-inc-next span b{font-size:15px;margin-right:5px;font-variant-numeric:tabular-nums}.v2-inc-next small{display:block;color:var(--subtle);font-size:11px;margin-top:1px}
.v2-ctable tr.is-next td{font-style:italic}
.v2-ctable .is-num{text-align:right;font-variant-numeric:tabular-nums}
/* Couverture */
.v2-cov-main strong{font-size:40px;line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums}.v2-cov-main strong small{font-size:20px;color:var(--muted)}
.v2-cov-state.is-good{color:var(--green);background:color-mix(in srgb,var(--green) 13%,transparent)}.v2-cov-state.is-warn{color:var(--orange);background:color-mix(in srgb,var(--orange) 14%,transparent)}
.v2-cov-meter>i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--s1)}
.v2-cov-meter>b{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;border-radius:2px;background:var(--text)}
.v2-cov-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.v2-cov-list li>span{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:13px;font-weight:700}.v2-cov-list small{color:var(--muted);font-size:11px;font-weight:600}
.v2-cov-list b{font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums}.v2-cov-list b small{font-size:11px}
/* Répartitions */
.v2-dn-mid strong{font-size:15px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.v2-dn-mid small{font-size:10.5px;color:var(--muted)}
.v2-dn-legend li{display:grid;grid-template-columns:10px minmax(0,1fr) auto 38px;align-items:center;gap:8px;font-size:12.5px}
.v2-dn-legend b{font-variant-numeric:tabular-nums;white-space:nowrap}.v2-dn-legend small{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
/* Rentabilité */
.v2-profit .section-head{flex-wrap:wrap;gap:10px}
.v2-pf-kpi small{color:var(--muted);font-size:11.5px;font-weight:700}.v2-pf-kpi strong{font-size:20px;letter-spacing:-.04em;white-space:nowrap;font-variant-numeric:tabular-nums}.v2-pf-kpi em{font-style:normal;color:var(--muted);font-size:11px}
.v2-pf-kpi.is-neg strong,.v2-pf-list .is-neg b{color:var(--red)}
.v2-pf-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;font-size:13px;border-top:1px solid var(--line)}
.v2-pf-list li>span{display:flex;flex-direction:column;gap:1px;min-width:0}.v2-pf-list li small{color:var(--muted);font-size:11px}
.v2-pf-list b{white-space:nowrap;font-variant-numeric:tabular-nums}.v2-pf-list b small{margin-left:8px;font-weight:700}
.v2-pf-notes li{display:flex;gap:6px;align-items:flex-start;color:var(--muted);font-size:11.5px;line-height:1.45}.v2-pf-notes .i{flex:0 0 auto;margin-top:2px}
.v2-pf-buys{list-style:none;margin:12px 0;padding:0}
.v2-pf-buys li{display:grid;grid-template-columns:minmax(0,1fr) auto 200px;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.v2-pf-buys li>span{display:flex;flex-direction:column;gap:2px}.v2-pf-buys small{color:var(--muted);font-size:11px}.v2-pf-buys b{font-variant-numeric:tabular-nums;white-space:nowrap}
.v2-pf-buys li.is-dup b{color:var(--muted);text-decoration:line-through}
.v2-pf-buys .form-select,.v2-pf-taxsel{min-height:32px;padding:4px 28px 4px 10px;font-size:12px}
.v2-pf-taxsel{max-width:220px}
@media (max-width:760px){.v2-pf-buys li{grid-template-columns:minmax(0,1fr) auto}.v2-pf-buys .form-select{grid-column:1/-1}.v2-profit-sw button{flex:1 1 auto;min-width:0;padding:0 8px;white-space:nowrap}.v2-cov-main strong{font-size:34px}}
/* Devis : tableau (par défaut) et envoi au client par Billit */
.v2-qtable tr[data-q-row]{cursor:pointer}.v2-qtable tbody tr:hover{background:color-mix(in srgb,var(--text) 3%,transparent)}
.v2-qtable tr[hidden]{display:none}
.v2-qtable td{vertical-align:middle}.v2-qtable .v2-qchip{margin-top:4px}
.v2-qtable .v2-ctable-name{text-align:left}
.v2-q-tools .v2-pview{margin-left:auto}
.v2-qcard-top .v2-qsend-tag{margin-left:auto}
.v2-qsend>span{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.v2-qsend small{color:var(--muted);font-size:11.5px;overflow-wrap:anywhere}
.v2-qsend .i{flex:0 0 auto;margin-top:2px}
.v2-qsend-to small{color:var(--muted);font-size:12px}.v2-qsend-to strong{font-size:15px;overflow-wrap:anywhere}
.v2-qsend-again{align-items:flex-start}
@media (max-width:760px){.v2-q-tools .v2-pview{margin-left:0}}
.v2-qs-note{display:flex;gap:6px;align-items:flex-start;line-height:1.45}.v2-qs-note .i{flex:0 0 auto;margin-top:1px}
.v2-qtpl-sub{margin-bottom:12px}
/* 2.16.1 : « Envoyer » dans la liste des devis (tableau : sous le titre, qui passe à la ligne pour que le tableau tienne à 1 280 px ;
   cartes : le titre couvre la carte, le bouton reste au-dessus) et devis créé puis envoyé depuis la fenêtre */
.v2-qtable td:nth-child(2){white-space:normal;min-width:160px}
@media (max-width:1439px){.v2-qtable th,.v2-qtable td{padding-left:10px;padding-right:10px}}
.v2-qcard{position:relative}
.v2-qcard-open{padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.v2-qcard-open:after{content:'';position:absolute;inset:0;border-radius:inherit}
.v2-qcard-open:focus-visible{outline:none}.v2-qcard:has(.v2-qcard-open:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.v2-qcard-send{position:relative;z-index:1;display:flex;justify-content:flex-end;margin-top:2px}
.v2-qsend-new{display:flex;gap:8px;align-items:flex-start;margin:0;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.45;color:var(--text);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.v2-qsend-new .i{flex:0 0 auto;margin-top:2px;color:var(--accent)}
/* 2.16 : thème clair / sombre / auto (Paramètres → Apparence) */
.v2-theme-modes button{display:inline-flex;align-items:center;gap:6px}
/* Choix du style (2.19) : Classique ou Givre, avec un aperçu de chacun. Les couleurs des aperçus sont celles des styles, pas des jetons. */
.v2-skin-opt:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line2))}
.v2-skin-opt.is-on{border-color:var(--accent);box-shadow:0 0 0 3px var(--card-glow)}
.v2-skin-opt>.i{margin-left:auto;flex:none;color:var(--accent)}
.v2-skin-sw i{position:absolute;border-radius:50%;filter:blur(5px)}
.v2-skin-txt b{font-size:13px;font-weight:750}.v2-skin-txt small{font-size:11.5px;color:var(--muted);line-height:1.3}
.v2-theme-auto .form-group{flex:1 1 140px;min-width:0;margin:0}.v2-theme-auto .form-group:first-child{flex:2 1 230px}.v2-theme-auto .v2-field-note{flex:1 1 100%;margin:0}

/* ——— 2.17 : téléphone plus compact (demande de Pierre du 26/10 : « on perd beaucoup de place, et c'est toutes les pages comme ça ») ———
   Header : nom de la page et sa phrase (le grand titre de la page est masqué), loupe de recherche, thème, avatar rond.
   Cases à cocher et cases du suivi des habitudes rondes (« comme une tâche à clôturer »). Actions du jour : boutons et filtres sur
   deux lignes, carte « Aujourd'hui » et frise des jours resserrées. Dashboard : objectif compact, cases resserrées. */
.topbar-sub,.mobile-search{display:none}
.task-check{border-radius:50%}
.v2-habit-cells i{border-radius:50%}
@media (max-width:860px){
 .topbar{height:60px;margin-bottom:10px;gap:10px}
 .topbar-kicker{display:none}
 .topbar-title{font-size:18px;line-height:1.15;margin:0}
 .topbar-sub{display:block;margin-top:2px;font-size:11.5px;line-height:1.3;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .topbar-sub .demo-ribbon{margin-right:3px}
 .top-actions{gap:6px}
 .topbar .mobile-search{display:grid;place-items:center}
 /* Loupe, thème et avatar : trois vrais cercles de 36 px. Le min-height de 40 px de la pastille « Light » (ordinateur) étirait le
    bouton du thème en ovale (« ce n'est plus un vrai cercle », 26/10/2026) ; flex:none : jamais écrasé quand le header est plein. */
 .topbar .mobile-search,.topbar .top-actions .theme-switch{width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;flex:none;aspect-ratio:1}
 .topbar .mobile-profile{padding:0;border-radius:50%;width:36px;height:36px;flex:0 0 36px;align-self:center}
 .topbar .mobile-profile .avatar{width:36px;height:36px;border-radius:50%}
 .topbar .mobile-logo{width:34px;height:34px}
 .page .page-heading>div:first-child{display:none}
 .page .page-heading:not(:has(>:nth-child(2))){display:none}
 .page .page-heading{margin:0 0 12px;justify-content:flex-end}
 .v2-x-m{display:none}
 .toast-action{min-height:32px;padding:0 10px;border-radius:9px}
.m-pipeline-header p{margin:0;font-size:12.5px}
 .v2-tasks-top>.page-heading{order:2;margin:0 0 0 auto}
 .v2-plan-today .section-head{margin-bottom:6px}
 .v2-plan-free{margin:0;font-size:12.5px}
 .v2-day-list li{gap:8px;padding:9px 10px;border-radius:12px}
 .v2-plan-row .v2-day-time{min-width:40px;font-size:12px}
 .v2-plan-row .icon-btn{width:30px;height:30px}
 .v2-plan-row .icon-btn+.icon-btn{margin-left:-4px}
 .v2-strip-day i{display:none}
 .v2-strip-day strong{font-size:15px}
 .v2-strip-day b{min-height:12px;font-size:10px}
}
@media (max-width:480px){
.v2-habit-cells i{width:20px;height:20px}
.v2-habit-name strong{font-size:13px}.v2-habit-name small{font-size:11px}
}

/* ——— 2.18 : cockpit du Dashboard sur téléphone, cartes entières cliquables, relance des impayés (demande de Pierre du 26/10/2026 :
   « l'ensemble des informations essentielles visible sur un seul écran de smartphone, sans défilement vertical ») ——— */
.metric{position:relative}
@media (hover:hover) and (pointer:fine){.metric:has(>.v2-tile-hit):hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}}
.metric:has(>.v2-tile-hit) .metric-foot :is(button,a){position:relative;z-index:2}
.v2-m-only{display:none}
.v2-pmini i{flex:1;max-width:16px;height:100%;border-radius:3px;background:linear-gradient(to top,var(--accent) var(--p),color-mix(in srgb,var(--muted) 24%,transparent) var(--p))}
.v2-dun-list{display:grid;gap:8px}
.v2-dun-g{padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface2)}
.v2-dun-g>label{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;cursor:pointer}
.v2-dun-g>label input{width:18px;height:18px;margin:0;accent-color:var(--accent)}
.v2-dun-g>label>span{display:grid;min-width:0}
.v2-dun-g>label small{overflow:hidden;font-size:12px;color:var(--muted);text-overflow:ellipsis;white-space:nowrap}
.v2-dun-g>label b{font:700 15px 'Space Grotesk',system-ui,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.v2-dun-g>label b small{font:600 10px system-ui,sans-serif}
.v2-dun-g>ul{margin:6px 0 0 28px;padding:0;list-style:none;font-size:12px;line-height:1.5;color:var(--muted)}
.v2-dun-prev{margin:6px 0 0 28px;font-size:12px}
.v2-dun-prev summary{cursor:pointer;font-weight:700;color:var(--accent)}
.v2-dun-prev pre{margin:6px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font:12.5px/1.5 system-ui,sans-serif;white-space:pre-wrap;color:var(--text)}
.v2-dun-skip{margin-top:12px;font-size:12.5px;color:var(--muted)}
.v2-dun-skip p{margin:0 0 4px;font-weight:700}
.v2-dun-skip ul{margin:0;padding-left:18px;line-height:1.55}
.v2-dun-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px 12px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.v2-dun-foot [data-dun-count]{margin-right:auto;font-size:12.5px;color:var(--muted)}
.v2-dun-res{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.v2-dun-res li{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.v2-dun-res li>span{display:grid;gap:2px;min-width:0}
.v2-dun-res li small{color:var(--muted)}
.v2-dun-res li.is-ok>.i{color:var(--green)}
.v2-dun-res li.is-ko>.i{color:var(--red)}
.v2-od.is-held{opacity:.72}
.v2-od-held{font-weight:700;color:var(--accent)}
.v2-dun-hold.is-on{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
/* 2.20.2 : limité à la case à cocher (label) ; sur .v2-check tout court, il décentrait le « + » rond des objectifs du jour. */
label.v2-check{display:flex;align-items:center;gap:8px;font-size:13px}
label.v2-check input{width:17px;height:17px;margin:0;accent-color:var(--accent)}
@media (max-width:860px){
 .v2-m-only{display:inline}
 .v2-dash .page-heading{margin-bottom:8px}
 .v2-dash .v2-dash-status{justify-content:flex-end;gap:6px;width:100%}
 .v2-dash .v2-dash-status .pill{min-height:24px;padding:3px 9px;font-size:11px}
 .v2-dash .v2-dash-status .icon-btn{width:28px;height:28px}
 .v2-dash .v2-dash-grid{gap:8px}
}
@media (max-width:860px){
 .v2-bill-sync .icon-btn{width:28px;height:28px}
}
@media (max-width:860px){
 .v2-dash .v2-dash-grid{gap:7px}
}
/* 2.18 · Dashboard sur téléphone (« c'est très moche en mobile », 26/10/2026) : une seule forme de case et un seul écart de 8 px, rien n'est poussé en bas d'une case, unités lisibles, liens à la taille de leur ligne, une case seule en fin de groupe devient une ligne basse, 3 cases par ligne de 560 à 860 px ; Facturation sans cases dans la carte ni TTC (il reste dans chaque liste). */
@media (max-width:860px){
 .v2-dash .v2-dash-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
}
@media (min-width:560px) and (max-width:860px){
 .v2-dash .v2-dash-grid,.v2-dash .v2-dash-grid:has(>.v2-goal.is-third+.v2-dash-kpis){grid-template-columns:repeat(6,minmax(0,1fr))}
}
/* 2.18.1 : photos en vrais ronds (Mon profil, aperçu de la photo, tête du haut sur téléphone) ; l'image est elle-même découpée
   en rond et la case reste carrée, pour qu'aucun navigateur n'en fasse un ovale. */
.avatar.avatar-photo{aspect-ratio:1;flex-shrink:0}.avatar.avatar-photo img{border-radius:inherit}
/* 2.18.3 : sur téléphone, le menu du bas est une barre de verre flottante, presque toute la largeur (12 px de chaque côté), avec
   le nom sous chaque icône (la pilule de ronds de la 2.18.2 n'avait plus les noms). La page ouverte est dans une pastille plus
   claire, le « + » rond au milieu. Verre sombre ou clair selon le thème. */
@media (max-width:860px){
 :root,[data-theme="dark"]{--dock-bg:linear-gradient(180deg,#262f5299,#11183099);--dock-edge:#ffffff2e;--dock-hi:inset 0 1px 0 #ffffff29,inset 0 -1px 0 #ffffff0a;--dock-on:#ffffff1c;--dock-ink:#c3cbe0;--dock-ink-on:#ddd4ff}
 [data-theme="light"]{--dock-bg:linear-gradient(180deg,#ffffffbf,#f3f5fda6);--dock-edge:#ffffffeb;--dock-hi:inset 0 1px 0 #fff,inset 0 -1px 0 #1d2b5c0f;--dock-on:#8156ea1c;--dock-ink:#56637f;--dock-ink-on:#6a43d9}
 .bottom-nav{left:12px;right:12px;bottom:max(10px,calc(env(safe-area-inset-bottom) - 10px));transform:none;width:auto;max-width:none;height:auto;padding:6px!important;display:flex;align-items:center;gap:2px;border:1px solid var(--dock-edge)!important;border-radius:999px;background:var(--dock-bg)!important;-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);box-shadow:var(--dock-hi),0 16px 38px #0b0e2e38,0 3px 8px #0b0e2e1f}
 .bottom-link{flex:1 1 0;min-width:0;width:auto;height:56px;min-height:0;padding:0 2px;border-radius:999px;background:none;color:var(--dock-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10.5px;font-weight:650;line-height:1}
 .bottom-link .i{width:22px;height:22px}
 .bottom-link span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .bottom-link.active{background:var(--dock-on);color:var(--dock-ink-on);box-shadow:inset 0 1px 0 #ffffff1f}
 .bottom-quick{flex:0 0 52px;width:52px;height:52px;margin:0 4px}
}
@media (max-width:860px) and (prefers-reduced-transparency:reduce){.bottom-nav{background:var(--glass-solid)!important;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (max-width:360px){.bottom-nav{left:8px;right:8px}.bottom-link{font-size:9.5px;letter-spacing:-.01em}}
/* 2.18.3 · Dashboard du téléphone refait (« refais-moi un truc en mode designer », 26/10/2026), même DA. Une colonne, 10 px entre
   les groupes : l'objectif en bandeau violet (anneau blanc à droite), Trésorerie et TVA côte à côte, le récurrent, les coûts fixes et
   la marge en une liste à pastilles de couleur, la Facturation, puis Devis à faire et le dossier « Projets en cours » côte à côte,
   plus hauts : le dossier descend jusqu'en bas de la ligne, le chiffre en bas de chaque case. */
@media (max-width:860px){
 .v2-dash{margin-bottom:0}
 .v2-dash .v2-dash-grid{display:flex;flex-direction:column;gap:10px;min-height:calc(100dvh - 176px - env(safe-area-inset-bottom))}
}
/* 2.18.3 (suite) · le mois prochain dans les récurrentes, la Facturation en une carte, « Devis à faire » en feuille de devis. */
.v2-rec-nx,.v2-sheet,.v2-sheet-lines{display:none}
@media (max-width:860px){
 .v2-mb-bar{display:block;height:6px;margin-top:6px;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--green) 16%,transparent)}
 .v2-mb-bar i{display:block;height:100%;border-radius:inherit;background:var(--green)}
}
/* 2.18.4 : « HTVA » écrit à côté des montants de la Facturation (« on ne sait pas ce qu'il en est ») ; dans Paramètres → Dashboard,
   le choix de l'ordre à ranger (mobile ou ordinateur). */
.v2-dash-ord{margin:0 0 12px}
.v2-dash-ord button{display:inline-flex;align-items:center;gap:6px}
/* 2.18.4 : téléphones peu hauts (iPhone SE, Safari avec ses barres) : tout se resserre pour tenir sans défiler ou presque. */
@media (max-width:860px) and (max-height:760px){
 .v2-dash .v2-dash-grid{gap:8px}
}
/* 2.18.7 : plus de grand cadre bleu au clic dans un champ (« un rectangle bleu … c'est hyper moche », Recherche rapide et partout) :
   les champs de saisie, zones de texte et listes n'ont plus de contour ; ils prennent une bordure violette et un léger halo.
   Les champs sans bordure (recherche, choix d'un prospect) le montrent sur leur cadre. Boutons, liens et cases gardent leur contour au clavier. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):focus,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):focus-visible,textarea:focus,textarea:focus-visible,select:focus,select:focus-visible,button.form-input:focus-visible{outline:none}
.form-input:focus,.form-select:focus,.form-textarea:focus,.filter-select:focus,button.form-input:focus-visible,.field-search:focus-within,.v2-lp-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.field-search input:focus,.v2-lp-input:focus,.v2-task-input:focus,.v2-qp-input:focus,.v2-pt-pick select:focus,.v2-pstatus-pick select:focus,.stage-select:focus{box-shadow:none}
.v2-pt-pick:focus-within{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
/* 2.18.7 : réunion — libellés proposés (le titre devient « date · libellé ») et participants à choisir (équipe, client, utilisateurs). */
.v2-mchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.v2-mchip{display:inline-flex;align-items:center;min-height:30px;padding:0 11px;border:1px solid var(--line2);border-radius:999px;background:var(--surface2);color:var(--muted);font:inherit;font-size:12.5px;font-weight:650;cursor:pointer}
.v2-mchip:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line2));color:var(--text)}
.v2-mchip.is-on{border-color:color-mix(in srgb,var(--accent) 60%,transparent);background:color-mix(in srgb,var(--accent) 13%,var(--surface));color:var(--accent)}
.v2-mchip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.v2-mtitle-prev{margin:9px 0 0;color:var(--subtle);font-size:12.5px}.v2-mtitle-prev b{color:var(--text);font-weight:650}
.v2-mpeople{margin-top:10px}.v2-mpeople>small{display:block;color:var(--subtle);font-size:11.5px;font-weight:650}
.v2-mpeople>summary{color:var(--subtle);font-size:11.5px;font-weight:650;cursor:pointer}.v2-mpeople>summary b{font-weight:700;color:var(--muted)}
@media (max-width:600px){.v2-mchip{min-height:34px;font-size:13px}}
/* 2.18.7 : Dashboard du téléphone sans aucun défilement (« je ne veux pas de scroll sur cette page mobile, même pas minime ») :
   dashFit() mesure la hauteur libre et ajoute fit-1 puis fit-2 tant que le contenu dépasse (zoom en dernier recours). */
@media (max-width:860px){
 .v2-dash.fit-1 .v2-dash-grid{gap:7px}
 .v2-dash.fit-2 .v2-dash-grid{gap:6px}
}
/* 2.18.7 : sur téléphone, les projets en grille de deux (« par grille de deux, l'un à côté de l'autre … c'est énorme ») : dossiers
   plus petits, icône et statut réduits, nom sur deux lignes, détails sur deux lignes, avancement et équipe en bas. */
@media (max-width:600px){
 .v2-folders .v2-folder-ico .i{width:15px;height:15px}
 .v2-folders .v2-team .avatar{width:22px;height:22px;margin-left:-7px;font-size:9px}
}
/* 2.18.8 : case « Facturé ce mois » du téléphone mieux agencée : le montant et le nombre de factures en haut ; en bas, « Encaissé » et son %,
   la barre, puis la légende Payé (pastille vert plein, comme la barre) et Reste (vert pâle, comme le fond de la barre), montants à droite. */
@media (max-width:860px){
 .v2-mb-pay{display:flex;flex-direction:column;gap:4px;margin-top:auto;padding-top:8px}
 .v2-mb-pay>.v2-mb-bar{margin:0 0 2px}
 .v2-mb-barrow{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
 .v2-mb-barrow>b{font-size:12px;font-weight:800;color:var(--green);font-variant-numeric:tabular-nums}
 .v2-mb-leg{display:flex;align-items:center;gap:6px;min-width:0;font-size:11.5px;line-height:15px;color:var(--muted);white-space:nowrap}
 .v2-mb-leg>i{flex:none;width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--green) 30%,transparent)}
 .v2-mb-leg.is-paid>i{background:var(--green)}
 .v2-mb-leg>b{margin-left:auto;overflow:hidden;text-overflow:ellipsis;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
 .v2-mb-leg.is-paid>b{color:var(--green)}
 .v2-dash.fit-2 .v2-mb-pay{gap:3px;padding-top:6px}
 .v2-dash.fit-2 .v2-mb-leg{font-size:11px;line-height:14px}
}
/* 2.20 · Dashboard du téléphone d'après la maquette de Pierre (« garde cette idée-là », « c'est pas grave si on a du scroll ») : il
   défile de nouveau ; « Vue d'ensemble » et « Suivi des paiements » en petites capitales ; l'objectif en grande carte ; Trésorerie, TVA,
   Devis à faire et le dossier « Projets en cours » en grille de deux ; la Facturation en cartes séparées. Même DA que la 2.18. */
@media (max-width:860px){
 .v2-dash .v2-dash-grid{gap:12px;min-height:0!important}
 .v2-dash .v2-dash-grid>*{flex:none!important}
 .v2-eyebrow{display:inline-flex;align-items:center;gap:7px;color:var(--subtle);font-size:11px;line-height:14px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
 .v2-m-sec>.v2-eyebrow>i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.v2-hero-of b{color:var(--text);font-weight:700}
 .v2-hero-set{grid-area:ring;align-self:center;display:grid;place-items:center;gap:4px;width:96px;height:96px;border:2px dashed color-mix(in srgb,var(--accent) 40%,transparent);border-radius:50%;color:var(--accent);text-align:center}
 .v2-hero-set small{max-width:70px;font-size:10.5px;line-height:12px;font-weight:700}
 .v2-hero-foot>i{flex:1;height:1px;background:var(--line)}
 .v2-hero-foot .v2-dd small{color:var(--muted)}
}
/* 2.20 : boutons « œil » (montants masqués) et bloc de Paramètres ; montant masqué en « •••• € ». */
html[data-money-hidden] .v2-money{letter-spacing:.04em}
html[data-money-hidden] .v2-money-btn{color:var(--accent)}
/* 2.20 : réunion — description sous le titre, libellés gardés (× pour les retirer), contacts des autres clients à chercher. */
.v2-meet-desc{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:19px;white-space:pre-line;overflow-wrap:anywhere}
.v2-mchip small{margin-left:6px;font-size:11px;font-weight:500;color:var(--subtle)}
.v2-mchip-own{position:relative;display:inline-flex;align-items:center}
.v2-mchip-own>.v2-mchip{padding-right:32px}
.v2-mchip-x{position:absolute;right:5px;display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:none;color:var(--subtle);cursor:pointer}
.v2-mchip-x:hover{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red)}
/* 2.33.6 : libellés proposés sur deux lignes, « Voir plus (N) » au bout (mchipsFit) ; une pastille cachée ne prend pas de place. */
.v2-mchips>[hidden]{display:none}
.v2-mchip-more{border-style:dashed;background:none;color:var(--accent)}
.v2-mchip-more:hover{color:var(--accent)}
.v2-mkeep{margin-top:10px;font-size:13px}
.v2-mfind-box{margin-top:6px}
.v2-mfind-none{display:block;margin-top:2px;color:var(--subtle);font-size:12px}

/* 2.20 · relecture : case « Garder » vraiment cachée sur ordinateur, échelle des graphiques masquée avec les montants,
   un seul œil sur le Dashboard du téléphone, et une tuile seule en fin de grille qui prend toute la ligne. */
.v2-mkeep[hidden]{display:none}
@media (max-width:860px){
 .v2-dash:has(.v2-m-sec [data-money-toggle])>.page-heading [data-money-toggle]{display:none}
}



/* 2.20.5 · Header du téléphone sans fond (« j'aime pas qu'il y ait une barre au-dessus, je préfère que tout soit uni ») : transparent,
   sans flou ni filet, comme sur ordinateur, Givre compris. */
@media (max-width:860px){
 .topbar,html[data-skin] .topbar{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom:0!important;box-shadow:none!important}
}
/* 2.20.6 · « laisse le sticky » et « active le fond seulement quand on scrolle » : le header reste collé en haut ; en haut de page il
   n'a ni fond ni filet (tout est uni) ; dès que la page a défilé (html.is-scrolled), il reprend son fond en verre (couleur de la page
   translucide et flou), sans filet, ce qui couvre aussi la barre d'état de l'app installée sur iPhone. */
@media (max-width:860px){
 .topbar{transition:background-color .2s}
 html.is-scrolled .topbar{background:color-mix(in srgb,var(--bg) 62%,transparent)!important;-webkit-backdrop-filter:var(--glass-blur)!important;backdrop-filter:var(--glass-blur)!important}
 html.is-scrolled[data-skin=givre] .topbar{background:color-mix(in srgb,var(--bg) 52%,transparent)!important}
}
@media (max-width:860px) and (prefers-reduced-transparency:reduce){html.is-scrolled .topbar,html.is-scrolled[data-skin] .topbar{background:var(--nav)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
@media (max-width:860px) and (prefers-reduced-motion:reduce){.topbar{transition:none}}
/* 2.20.6 · Header du téléphone dans le même ratio que le menu du bas, un rien plus petit (« dans le même ratio ou un tout petit peu
   plus petit que les éléments du menu ») : menu = icônes 22 px, bouton + 52 px ; header = cercles 42 px, icônes 20 px, logo et avatar
   40-42 px, titre 20 px. La hauteur compte la barre d'état de l'app installée (padding-top de style.css). */
@media (max-width:860px){
 .topbar{height:calc(70px + env(safe-area-inset-top,0px));gap:11px}
 .topbar .topbar-title{font-size:20px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .topbar .topbar-sub{font-size:12px;margin-top:3px}
 .top-actions{gap:8px}
 .topbar .mobile-logo{width:40px;height:40px}
 /* « le logo du TrackR … dans un rond » (Givre compris, qui l'arrondissait à 14 px) */
 .topbar .mobile-logo,html[data-skin] .topbar .mobile-logo{border-radius:50%!important}
 .topbar .mobile-search,.topbar .top-actions .theme-switch{width:42px;height:42px;min-height:42px}
 .topbar .mobile-profile,.topbar .mobile-profile .avatar{width:42px;height:42px;flex-basis:42px}
 .topbar .mobile-search .i,.topbar .top-actions .theme-switch .i{width:20px;height:20px}
}
/* 2.30.24 · Téléphone de 360 à 380 px (iPhone mini, SE) : titre de l'en-tête un peu plus petit, pour que « Facturation », « Paramètres »,
   « Récurrentes » ou « Duel & stats » tiennent sans « … » (comme la barre du portail en 2.30.18). Sous 360 px, la règle suivante garde 18 px. */
@media (max-width:380px){
 .topbar .topbar-title{font-size:17.5px}
}
@media (max-width:359px){
 .topbar .mobile-search,.topbar .top-actions .theme-switch,.topbar .mobile-profile,.topbar .mobile-profile .avatar{width:38px;height:38px;min-height:38px;flex-basis:38px}
 .topbar .mobile-logo{width:36px;height:36px}
 .topbar .topbar-title{font-size:18px}
}


/* 2.20.9 · Dashboard du téléphone à la même échelle qu'Objectifs et Actions (« les éléments sont trop grands par rapport à la page
   objectif ou action ») : même disposition, tailles reprises de ces pages. Titres de section 16 px, titres de carte 12-14 px,
   chiffres des tuiles 19-20 px (22 px sur Objectifs), grand chiffre de l'objectif 26 px, textes secondaires 11 px, cartes 22 px
   d'arrondi et 14-16 px de marge intérieure. */
@media (max-width:860px){
 .v2-dash .v2-eyebrow{font-size:10px;line-height:13px;font-weight:800}
 .v2-hero .v2-goal-mid strong{font-size:calc(var(--ring) * .21)}
}

/* 2.20.9 · Couleurs avec leur nom (avatar dans Mon profil, colonne, pipeline) : la règle des pastilles rondes des projets
   (.v2-swatch en 30 × 30 px) les écrasait, les noms se chevauchaient (« TurquoiseCorail ») et passaient sur le titre suivant. */
.v2-swatch:has(>span){display:flex;flex-direction:column;align-items:center;gap:5px;width:auto;height:auto}
.v2-swatches:has(>.v2-swatch>span){gap:12px 10px}
/* 2.20.9 · « D'où vient le récurrent » (ordinateur) : l'interrupteur Service / Nature passe dans l'en-tête de la carte ; à côté du
   titre de colonne, il débordait sur « Coûts fixes par nature » dès que la carte est étroite (382 px à 1280 px d'écran). */
.v2-mix>.section-head{align-items:flex-start;gap:10px}
/* 2.21.1 · « la carte de visite doit être accessible dans le profil » ; le menu + propose à la place « Nouvelle réunion » (bientôt :
   pastille, un toucher affiche juste un message). */
/* 2.22.2 · « la carte de visite, c'est affreux ; Se déconnecter, on ne le voit plus du tout » : la carte devient une tuile sous le nom
   (vignette de la carte à sa couleur, titre, « Ouvrir ») ; « Se déconnecter » reste en haut à droite, en rouge, lisible dans tous les
   styles. Téléphone : la tuile sous le nom, « Se déconnecter » en dessous, sur toute la largeur. */
.profile-cover .btn.v2-logout{height:38px;padding:0 15px;gap:8px;font-size:13px;font-weight:800;color:color-mix(in srgb,var(--red) 82%,var(--text));background:color-mix(in srgb,var(--red) 10%,transparent);border:1px solid color-mix(in srgb,var(--red) 45%,transparent);box-shadow:none}
.v2-prof-card-mini>b{position:absolute;left:7px;top:7px;z-index:1;display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:#ffffff24}
.v2-prof-card-mini>i{position:absolute;right:6px;bottom:6px;z-index:1;display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:#fff;color:#1d1640}
.v2-prof-card-mini>i .i{width:15px;height:15px}
.v2-prof-card-txt strong{font-size:15px;font-weight:800;letter-spacing:-.01em}
.v2-prof-card-txt small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:600px){
.v2-prof-card-go .i{margin:0}}
.m-add-choice.is-later{opacity:.78}
.m-add-choice.is-later>strong .v2-soon-pill{margin-left:4px;vertical-align:1px}
/* 2.21 · Fonction de l'équipe (« d'autres types de fonction comme marketeur ou designer ») : titre discret, jamais une pastille
   (la pastille reste l'accès). À côté de l'accès dans Membres (téléphone : sa ligne sous l'e-mail), sous le nom dans Mon profil,
   après le nom dans l'équipe d'un projet. */
.v2-role-pick>.v2-role-note{grid-column:1/-1;margin-top:0}
/* 2.21 · Types et technologies d'un projet en pastilles à cocher (« un projet peut avoir plusieurs types », « un peu plus beau à
   l'intérieur ») : sobres, 30 px (34 px au doigt), de la famille des libellés de réunion (.v2-mchip) ; retour à la ligne, un nom trop long
   finit en « … ». Jetons du thème seulement : clair, sombre et Givre suivent. */
.v2-pchips{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.v2-pchip{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:30px;max-width:100%;padding:0 11px;border:1px solid var(--line2);border-radius:999px;background:var(--surface2);color:var(--muted);font-size:12.5px;font-weight:650;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.v2-pchip>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-pchip>input{position:absolute;opacity:0;pointer-events:none}
.v2-pchip:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line2));color:var(--text)}
.v2-pchip:has(input:checked){border-color:color-mix(in srgb,var(--accent) 60%,transparent);background:color-mix(in srgb,var(--accent) 13%,var(--surface));color:var(--accent)}
.v2-pchip:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.v2-pchip-main{flex:0 0 auto;padding:1px 6px;border-radius:999px;background:color-mix(in srgb,var(--accent) 16%,transparent);font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.v2-pchip-main[hidden]{display:none}
.v2-pick-hint{margin-left:6px;font-size:11.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--subtle)}
.v2-pchip-new{display:inline-flex;align-items:center;gap:4px;min-height:30px;max-width:100%;padding:0 4px 0 0;border:1px dashed var(--line2);border-radius:999px}
.v2-pchip-new:focus-within{border-style:solid;border-color:var(--accent)}
.v2-pchip-new>input{width:104px;min-width:0;height:28px;padding:0 4px 0 11px;border:0;background:none;color:var(--text);font:inherit;font-size:12.5px;font-weight:650}
.v2-pchip-new>input::placeholder{color:var(--accent);opacity:1}
.v2-pchip-new>button{height:22px;padding:0 9px;border:0;border-radius:999px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);font:inherit;font-size:11.5px;font-weight:750;cursor:pointer}
.v2-pchip-new>button[hidden]{display:none}
@media (max-width:600px){.v2-pchip,.v2-pchip-new{min-height:34px;font-size:13px}.v2-pchip-new>input{height:32px;width:118px;font-size:16px}.v2-pchip-new>input::placeholder{font-size:13px}}
/* 2.22.3 · « un prévisualisateur de devis dans l'app » : la page du devis dans le modèle Billit de Pierre (devis-billit-dimagin, version B :
   bande violette, « Devis » et numéro en violet, dates dans un bloc lavande, totaux sur toute la largeur avec la barre noire du TVAC,
   textes dans un bloc lavande, contact en liste), toujours sur fond blanc quel que soit le thème ; le tableau défile de côté sur un
   téléphone plutôt que d'écraser les colonnes. */
/* 2.22.5 · Aperçu = ton modèle Billit B rempli en direct (iframe sans script, page blanche de 728 px réduite à la largeur) */
.v2-qprev-modal{max-width:820px}
.v2-qprev{display:grid;gap:12px}
.v2-qprev>.v2-field-note,[data-qpv-warn] .v2-qwarn{margin:0}[data-qpv-warn]{display:grid;gap:6px}[data-qpv-warn]:empty{display:none}
.v2-qpv-fit{position:relative;overflow:hidden;border-radius:4px;filter:drop-shadow(0 4px 12px rgba(15,18,40,.10))}
.v2-qpv-frame{display:block;width:728px;max-width:none;border:0;background:transparent;transform-origin:0 0}
.v2-qpv-hit{position:absolute;inset:0;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.v2-qprev[data-qpv-zoom="1"] .v2-qpv-fit{overflow-x:auto}
.v2-qpv-zoombtn{display:none}
@media (max-width:760px){.v2-qpv-zoombtn{display:inline-flex}}
/* 2.22.4 · « Mettre à jour dans Billit » sous l'avertissement d'un devis modifié depuis sa création dans Billit. */
.v2-qrebill{flex-wrap:wrap}.v2-qrebill>span{flex:1 1 180px}.v2-qrebill>.btn{flex:0 0 auto;margin-left:22px}
/* 2.22.7 · « Contact pris » : comment (appel, e-mail, message, rendez-vous) et quand (aujourd'hui ou hier). Un appui sur le canal enregistre. */
.v2-cpick{display:grid;gap:14px}
.v2-cpick .v2-field-note{margin:0}
.v2-cpick-when,.v2-cpick-seen{display:grid;gap:6px}
.v2-cpick-row{display:flex;align-items:center;gap:8px;padding:5px 5px 5px 11px;border-radius:12px;background:var(--surface2);font-size:13px}
.v2-cpick-row>span{flex:1;min-width:0}
.v2-cpick-row>.i{color:var(--green)}
.v2-cpick-note .form-group{margin:0}
.v2-cpick-ways{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.v2-cpick-way{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:98px;padding:13px 6px 10px;border-radius:16px;border:1px solid var(--line2);background:var(--surface);color:var(--text);font:inherit;text-align:center;cursor:pointer;transition:border-color .15s,background .15s,transform .1s}
.v2-cpick-way .i{width:22px;height:22px;color:var(--accent)}
.v2-cpick-way strong{font-size:14px;font-weight:750}
.v2-cpick-way small{font-size:11px;line-height:1.3;color:var(--muted)}
.v2-cpick-way em{margin-top:auto;font-style:normal;font-size:11px;font-weight:750;color:var(--green)}
.v2-cpick-way:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.v2-cpick-way:active{transform:scale(.97)}
.v2-cpick-way:disabled{opacity:.55;cursor:default;transform:none}
.v2-cpick-more{justify-self:start;padding:2px 0;border:0;background:none;color:var(--muted);font:inherit;font-size:12.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media(max-width:600px){.v2-cpick-ways{grid-template-columns:1fr 1fr}.v2-cpick-way{min-height:86px}}
/* 2.22.8 · Devis : « c'est fort gros, ça prend beaucoup de place pour juste une ligne » : lignes compactes sur tablette et ordinateur (le
   téléphone garde ses champs de 44 px), les champs sur une seule rangée quand la place le permet, poignée à droite (« pas au début du titre »),
   description dans une grande fenêtre ; la ligne n'en montre que deux lignes. */
@media (min-width:861px){
 .v2-qline{gap:6px;padding:8px 10px 8px 12px;container-type:inline-size}
 .v2-qline-top{gap:6px}
 .v2-qname{min-height:34px;padding-top:4px;padding-bottom:4px;font-size:14px}
 .v2-qhandle{width:26px;height:30px;margin-right:-4px}
 .v2-qline-fields{grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:6px}
 .v2-qf{gap:3px}
 .v2-qf>span:first-child{font-size:10.5px}
 .v2-qf .form-input,.v2-qf .form-select{min-height:32px;padding-top:4px;padding-bottom:4px;font-size:13px}
 .v2-qdisc .form-select{width:54px}
 .v2-qline-acts .btn-sm{min-height:28px;padding:0 9px;font-size:12px}
 .v2-qline-acts .icon-btn{width:28px;height:28px}
 @container (max-width:780px){.v2-qline-fields{grid-template-columns:repeat(5,minmax(0,1fr))}}
 @container (max-width:560px){.v2-qline-fields{grid-template-columns:repeat(4,minmax(0,1fr))}}
 @container (max-width:360px){.v2-qline-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
}
/* 2.23.5 · « l'onglet description est fort petit en hauteur » : 6 lignes visibles (4 sur téléphone) au lieu de 2. La limite est posée sur
   le texte, pas sur le bouton : un bouton ne prend pas « -webkit-box », la 3e ligne débordait à moitié dans la marge du bas. */
.v2-qdesc{display:block;width:100%;margin:0;padding:7px 10px;border:1px dashed var(--line2);border-radius:10px;background:transparent;color:var(--muted);font:inherit;font-size:12.5px;line-height:1.45;text-align:left;cursor:pointer}
.v2-qdesc-tx{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;line-clamp:6;overflow:hidden;white-space:pre-line;overflow-wrap:anywhere}
@media (max-width:860px){.v2-qdesc-tx{-webkit-line-clamp:4;line-clamp:4}}
.v2-qdesc:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line2));color:var(--text)}
.v2-qdesc-form{display:grid;gap:8px}
.v2-qdesc-area{min-height:340px;font-size:14px;line-height:1.55;resize:vertical}
.v2-qdesc-count{justify-self:end;color:var(--subtle);font-size:11px}
@media (max-width:600px){.v2-qdesc-area{min-height:46vh;font-size:16px}}
.v2-q-live .v2-qpv-fit{justify-self:center}
/* 2.22.8 · Duel : « bords arrondis stp sur ce tableau ». */
.v2-q-live-head .v2-qlay-none{flex-basis:100%;margin:0;color:var(--muted);font-size:11.5px;font-weight:600;letter-spacing:0}
/* 2.22.8 · petit écran (861-1100 px, tablette en paysage) : aperçu un peu plus étroit pour laisser l'éditeur lisible ; le titre d'une section ne s'écrase plus. */
@media (min-width:861px) and (max-width:1100px){.v2-q-grid.is-live{grid-template-columns:minmax(0,1fr) clamp(220px,30%,340px)}}
.v2-q-live .v2-qlay,.v2-q-live .v2-qlay select{min-width:0;max-width:100%}
.v2-q-grid.is-live .v2-q-side{overflow-x:hidden}.v2-q-grid.is-live .v2-q-side>*{min-width:0}
.v2-qsec-head{flex-wrap:wrap}
.v2-cpick-way em.is-done{color:var(--muted);font-weight:700}
.v2-cpick-more{min-height:32px}
.v2-q-live{grid-template-columns:minmax(0,1fr)}.v2-q-live-head .section-title{min-width:0}
.v2-q-grid.is-live .v2-qt-row{flex-wrap:wrap}.v2-q-grid.is-live .v2-qt-row b{margin-left:auto;text-align:right;white-space:normal}
.v2-q-grid.is-live .v2-qbx-acts .btn{max-width:100%;height:auto;min-height:32px;white-space:normal;text-align:center}
/* 2.22.9 · « vérifier que tous les icônes, style chevron, sont bien centrés visuellement » : style.css met tous les svg en bloc, donc une
   icône posée dans un texte (« Ouvrir ↗ » de la fiche, « Total TVAC ⌄ » de la barre du devis…) passait à la ligne, sous le mot. Dans un
   texte, elle reste sur la ligne, centrée sur les lettres. Dans un bouton ou une puce en flex ou en grille, rien ne change. */
:where(a,span,strong,b,em,small,label,p,li,td,th,h1,h2,h3,h4,h5)>svg.i{display:inline-block;vertical-align:-.2em}

/* 2.23 · Devis signés (page Stats) : quatre chiffres, puis les derniers devis signés (date, « Billit » quand la signature y a été relue). */
.v2-signed .section-head{flex-wrap:wrap;gap:10px}
.v2-signed-k>span{font-size:12px;color:var(--muted)}
.v2-signed-k>strong{font-size:24px;line-height:1.1;letter-spacing:-.03em}
.v2-signed-k>small{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
/* 2.24.0 · Devis → « Signés » : total des devis signés au-dessus de la liste ; lien depuis la carte des stats. */
.v2-q-signed-sum{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:-2px 0 12px;padding:10px 14px;border:1px solid color-mix(in srgb,var(--green) 35%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--green) 8%,transparent);font-size:13.5px}
.v2-q-signed-sum>.i{color:var(--green);flex:0 0 auto}
.v2-q-signed-sum>span{flex:1 1 12em;min-width:0}
.v2-q-signed-sum .v2-quiet-link{margin-left:auto}
.v2-signed-list .v2-qchip{--qc:var(--muted);flex:0 0 auto}
@media (max-width:860px){.v2-signed-k>strong{font-size:20px}}
@media (max-width:600px){.v2-signed-list b{display:none}}
/* 2.23.1 · fenêtre d'un objectif du jour : les mêmes actions encore prévues, à cocher d'ici */
.v2-day-plan{margin-top:14px;display:grid;gap:8px}.v2-day-plan .form-label{margin:0}
.v2-closed-by{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:12px;color:var(--muted)}.v2-closed-by .v2-dk-link{font-size:12px}

/* 2.23.2 · aperçu en feuilles A4 : nombre de pages à côté du titre */
.v2-qpv-pages{display:inline-block;margin-left:4px;padding:2px 8px;border-radius:999px;background:var(--surface2);color:var(--muted);font-size:11px;font-weight:700;letter-spacing:0;vertical-align:middle;white-space:nowrap}.v2-qpv-pages:empty{display:none}