/* Système TrendTrack, relevé le 15.09.2026 (voir ../reference/TRENDTRACK_RELEVE_2026-09-15.md). Feuille servie aussi aux clients des
   agences : aucun nom de produit ici (tour 8, K23).
   App = barre latérale NOIRE (#000) + contenu CLAIR (#FDFDFD), typo Inter 13-14 px, accent lime #BFFD04 (boutons) / #7EFC43 (hausse), rouge #FB6461 (baisse), rayons 8-16 px, bordures #EAEAEA, zéro dégradé. */
:root{--side:#000000;--side-hi:#2A2A2C;--side-tx:#FBFBFB;--side-tx2:#A5A5A5;--side-tx3:#6B6B6B;--bg:#FDFDFD;--row:#F5F5F5;--card:#FFFFFF;--line:#EAEAEA;--line2:#DCDCDC;--tx:#0F0F10;--tx2:#5F5F63;--tx3:#8A8A8F;--lime:#BFFD04;--lime-ink:#0A0A0A;--lime-sur-noir:#BFFD04;--up:#7EFC43;--up-ink:#0F3D0A;--up-soft:#E9FFDC;--down:#FB6461;--down-soft:#FFE6E5;--down-ink:#7A1512;--warn:#F5B301;--warn-soft:#FFF5D6;--warn-ink:#6B4A00;--dark:#292929;--dark2:#212121;--r:12px;--sans:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;--mono:"Geist Mono",ui-monospace,SFMono-Regular,monospace}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--sans);font-size:13.5px;line-height:1.5;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1}
a{color:inherit}
/* coque */
.shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh;background:var(--side)}
.side{background:var(--side);color:var(--side-tx);padding:14px 12px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh}
.logo{display:flex;align-items:center;gap:9px;padding:6px 8px 14px;font-weight:600;font-size:15px;letter-spacing:-.01em;text-decoration:none;color:var(--side-tx);min-width:0}
/* tour 8 : le nom de la marque s'arrête au bord (points de suspension), le logo garde sa largeur bornée (style posé dans la page) */
.logo-nom{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logo i{width:22px;height:22px;border-radius:0;background:url('/static/brand/icone.svg') center/contain no-repeat;display:inline-block}
.slab{font-size:12px;font-weight:500;color:var(--side-tx2);padding:12px 8px 6px;overflow-wrap:anywhere}
.side a.item{display:flex;align-items:center;gap:10px;min-height:40px;padding:8px 10px;border-radius:8px;color:var(--side-tx2);text-decoration:none;font-size:14px;font-weight:500}
.side a.item:hover{color:var(--side-tx);background:#151516}
.side a.item.on{color:var(--side-tx);background:var(--side-hi)}
.side a.item .ic{flex:none;width:16px;height:16px;display:inline-flex;color:var(--side-tx2)}.side a.item .ic svg{width:16px;height:16px}
.side a.item.on .ic{color:var(--lime-sur-noir)}
.side .grow{flex:1}
.who{border-top:1px solid #1E1E20;padding:12px 8px 4px;display:flex;align-items:center;gap:10px}
.who span{width:28px;height:28px;border-radius:8px;background:#1E1E20;display:grid;place-items:center;font-weight:600;font-size:12px;color:var(--side-tx)}
.who b{display:block;font-size:13px;font-weight:600}.who small{color:var(--side-tx2);font-size:12px}
/* Le contenu est un panneau clair arrondi posé dans le cadre noir, comme l'app TrendTrack (reference/app_table.png). */
.main{min-width:0;padding:0 28px 48px;background:var(--bg);margin:8px 8px 8px 0;border-radius:16px;min-height:calc(100vh - 16px)}
.topbar{display:flex;align-items:center;gap:14px;padding:16px 0 14px;border-bottom:1px solid var(--line);margin-bottom:22px}
.topbar h1{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Pastille compteur à côté du titre (« Shops 5 464 » chez TrendTrack) */
.count{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0;padding:3px 8px;border:1px solid var(--line);border-radius:6px;color:var(--tx);background:var(--card);line-height:1.4;white-space:nowrap}
.topbar .crumb{font-size:12.5px;color:var(--tx3)}
.topbar .spacer{flex:1}
.pill{font-family:var(--mono);font-size:12px;padding:4px 8px;border:1px solid var(--line2);border-radius:6px;color:var(--tx3);background:var(--card)}
/* boutons */
.btn{font:inherit;font-weight:600;font-size:13px;min-height:40px;padding:8px 14px;border-radius:8px;border:1px solid var(--line2);background:var(--card);color:var(--tx);cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:background .15s}
.btn:hover{background:var(--row)}
.btn.go,.cta{background:var(--lime);border-color:var(--lime);color:var(--lime-ink);font-weight:600;font-size:13px;min-height:40px;padding:9px 16px;border-radius:8px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--lime)}
.btn.go:hover,.cta:hover{background:#D2FF3A;border-color:#D2FF3A}
.btn.dark{background:var(--dark);border-color:var(--dark);color:#FBFBFB}.btn.dark:hover{background:#333}
/* bouton secondaire sur une carte sombre : jamais lime (un seul lime par écran, celui de la seule chose à faire) */
.btn.clair{background:var(--card);border-color:var(--line2);color:var(--tx);width:100%;justify-content:center}.btn.clair:hover{background:var(--row)}
.btn.trait{background:transparent;border-color:var(--line2);color:var(--tx2);width:100%;justify-content:center;margin-top:8px}.btn.trait:hover{background:var(--row)}
/* cartes et tuiles */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;margin-bottom:16px;align-items:stretch}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3)}
.hello{padding:22px 24px;display:flex;flex-direction:column;justify-content:space-between}
.hello h2{margin:8px 0 8px;font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.hello h2 em{font-style:normal;color:var(--tx2)}
.lead{color:var(--tx2);margin:0 0 16px;font-size:14px;max-width:52ch}
.score{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:20px 22px}
.ring{width:112px;height:112px;position:relative}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .n{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center}
.ring .n b{font-weight:600;font-size:32px;letter-spacing:-.03em;line-height:1}
.ring .n small{font-family:var(--mono);font-size:12px;color:var(--tx3)}
.gaps{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:7px}
.gaps li{display:flex;gap:10px;align-items:flex-start;font-size:13px}
.gaps li i{flex:none;width:8px;height:8px;border-radius:50%;margin-top:6px;background:var(--warn)}
.gaps li i.bad{background:var(--down)}
.gaps b{font-weight:600}
/* minmax(0,…) : une colonne ne grandit jamais jusqu'à la largeur minimale de son contenu (un tableau large déborderait de l'écran). */
.grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;align-items:start}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.tile{padding:14px 16px 12px;min-height:108px;display:flex;flex-direction:column;justify-content:space-between;position:relative}
.tile .k{font-size:12.5px;color:var(--tx2);font-weight:500}
.tile .v{font-weight:600;font-size:28px;letter-spacing:-.03em;line-height:1;margin:10px 0 8px}
.tile .v small{font-family:var(--mono);font-size:12px;letter-spacing:0;color:var(--tx3);margin-left:4px}
.tile .d{font-size:12px;font-weight:600;padding:2px 7px;border-radius:6px;display:inline-block;max-width:calc(100% - 70px);background:var(--row);color:var(--tx2)}
.tile .d.up{background:var(--up-soft);color:var(--up-ink)}.tile .d.att{background:var(--warn-soft);color:var(--warn-ink)}.tile .d.dn{background:var(--down-soft);color:var(--down-ink)}
.spark{position:absolute;right:14px;bottom:14px;width:60px;height:22px}
.spark polyline{fill:none;stroke:#42C76C;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sec{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);margin:0 0 8px;display:flex;align-items:center;gap:10px}
.sec::after{content:"";flex:1;height:1px;background:var(--line)}
/* liste dense façon tableau */
.todo{overflow:hidden}
.row{display:grid;grid-template-columns:32px 1fr auto;gap:14px;align-items:center;padding:12px 16px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row:nth-child(even){background:#FAFAFA}
.row:hover{background:var(--row)}
.ico{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-weight:600;font-size:13px;border:1px solid var(--line);background:var(--card)}
.ico.a{color:var(--warn-ink);background:var(--warn-soft);border-color:transparent}.ico.b{color:var(--up-ink);background:var(--up-soft);border-color:transparent}.ico.c{color:var(--down-ink);background:var(--down-soft);border-color:transparent}.ico.d{color:var(--tx2)}
.row h3{margin:0;font-size:13.5px;font-weight:600;letter-spacing:-.005em}
.row p{margin:2px 0 0;font-size:12.5px;color:var(--tx2)}
.row p q{color:var(--tx);quotes:"« " " »"}
/* plan · reprise du tour 9 (T7-056, NF8-ecrans-a-3-1) : la carte d'abonnement est une carte CLAIRE du contenu, comme chaque panneau de
   l'app TrendTrack (reference/app_table.png, app_filters.png : fond blanc, bordure #EAEAEA, la période choisie en pastille noire comme
   « Shops ») ; ses boutons secondaires sont blancs à bordure, le seul lime reste le bouton principal. Accueil, Réglages, séance, résiliation. */
.plan{background:var(--card);color:var(--tx);border-radius:16px;padding:20px;border:1px solid var(--line)}
.plan .eyebrow{color:var(--tx2)}
.plan h2{margin:8px 0 8px;font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.plan h2 em{font-style:normal;color:var(--tx2)}
.plan p{font-size:12.5px;color:var(--tx2);margin:0 0 12px}
.tiers{display:grid;gap:6px;margin:0 0 12px}
.tier{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:13px;background:var(--row)}
.tier b{font-weight:600;font-size:16px;letter-spacing:-.02em;white-space:nowrap}
.tier b small{display:block;font-family:var(--mono);font-size:12px;color:var(--tx2);text-align:right}
.tier small.s{display:block;color:var(--tx2);font-size:12px}
.tier.hi{border-color:var(--tx)}
.plan .cta{width:100%;justify-content:center}
.fine{font-family:var(--mono);font-size:12px;color:#A5A5A5;margin:10px 0 0;text-align:center}.plan .fine,.card.paiement .fine{color:var(--tx2)}
.mini{padding:16px 18px;margin-top:12px}
.mini .k{font-size:12.5px;color:var(--tx2);display:flex;justify-content:space-between;font-weight:500}
.bars{display:flex;align-items:flex-end;gap:6px;height:64px;margin:14px 0 4px}
.bars i{flex:1;background:var(--row);border:1px solid var(--line);border-bottom:0;border-radius:4px 4px 0 0;position:relative}
.bars i.now{background:var(--up);border-color:var(--up)}
.bars i::after{content:attr(data-m);position:absolute;left:0;right:0;top:100%;margin-top:6px;text-align:center;font-family:var(--mono);font-size:12px;color:var(--tx3)}
.legend{font-family:var(--mono);font-size:12px;color:var(--tx3);margin-top:20px}
/* pages */
.page-head{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:end;margin-bottom:16px}
.page-head h1{margin:6px 0 6px;font-size:22px;font-weight:600;letter-spacing:-.02em}
.page-head .lead{margin-bottom:0}
.kpi{padding:14px 16px;min-width:180px}.kpi .k{font-size:12.5px;color:var(--tx2);font-weight:500}.kpi .v{font-weight:600;font-size:28px;letter-spacing:-.03em;line-height:1;margin:8px 0 6px}.kpi .v small{font-family:var(--mono);font-size:12px;color:var(--tx3);margin-left:4px}.kpi .d{font-family:var(--mono);font-size:12px;color:var(--tx3)}
.revs{display:grid;gap:10px}
.rev{padding:14px 16px}
.rev-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13.5px}
.stars{color:var(--warn);letter-spacing:.06em;font-size:12px;margin-left:6px}
.rev-text{margin:6px 0 10px;font-size:13.5px}
.reply{border-top:1px solid var(--line);padding-top:10px}
.reply.pub p{margin:4px 0 0;color:var(--tx2);font-size:13px}
textarea,input[type=text],input[type=email],input[type=tel],input[type=url],input:not([type]){width:100%;font:inherit;font-size:13.5px;color:var(--tx);background:var(--card);border:1px solid var(--line2);border-radius:8px;padding:9px 10px;margin:6px 0 8px;resize:vertical}
textarea:focus,input:focus{outline:none;border-color:#0F0F10}
.reply-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.hint{font-size:12px;color:var(--tx3)}
.lbl{display:block;font-size:12px;color:var(--tx2);margin-top:8px}
/* Photos (tour 8, T7-113) : des lignes denses dans un seul cadre, comme le tableau de reference/app_table.png : la vignette à gauche (96 × 72),
   puis l'état, ce qui a été fait et le geste ; au téléphone, la vignette reste à gauche et les champs passent dessous. */
.phs{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:18px}
.ph{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:start;padding:12px 16px;border-bottom:1px solid var(--line)}.ph:last-child{border-bottom:0}.ph:hover{background:var(--row)}
.ph-img{width:96px;height:72px;border-radius:8px;border:1px solid var(--line);background:#F1F1F3;display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:var(--tx3)}
.ph-body{min-width:0}.cap{margin:2px 0 0;font-size:13.5px;font-weight:600;overflow-wrap:anywhere}
.ph-form{display:grid;grid-template-columns:1fr 1fr auto;gap:0 12px;align-items:end}.ph-form input{margin-bottom:0}.ph-form .btn{margin-top:0}
.ph-body .flash.err{margin:6px 0 8px}
.report{padding:20px}
.rep-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.rep-grid .k{font-size:12.5px;color:var(--tx2);font-weight:500}.rep-grid .big{font-weight:600;font-size:32px;letter-spacing:-.03em;line-height:1;margin:8px 0 6px}.rep-grid .big small{font-family:var(--mono);font-size:12px;color:var(--tx3)}.rep-grid .d{font-family:var(--mono);font-size:12px;color:var(--tx3)}.rep-grid .d.up{color:#2B8A3E}
.rep-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-top:18px}
.plain{margin:0;padding:0 0 0 16px;font-size:13.5px;display:grid;gap:6px}
/* liste agence (table dense) */
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);text-align:left;font-weight:500;padding:10px 14px;border-bottom:1px solid var(--line)}
.table td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:hover td{background:var(--row)}
.table a{text-decoration:none;font-weight:600}
.badge{font-size:12px;font-weight:600;padding:3px 8px;border-radius:6px;background:var(--row);color:var(--tx2)}
.badge.warn{background:var(--warn-soft);color:var(--warn-ink)}.badge.ok{background:var(--up-soft);color:var(--up-ink)}.badge.bad{background:var(--down-soft);color:var(--down-ink)}
.row.done{opacity:.5}.row.done h3{text-decoration:line-through}
.flash{font-size:13px;color:#1F7330;margin:0 0 12px;font-weight:500}
/* connexion façon TrendTrack (capture signup.png, tour 8) : fond quasi noir #0F0F0F, logo centré AU-DESSUS de la carte #292929 de rayon 32 */
.login{min-height:100vh;display:grid;place-items:center;padding:24px;background:#0F0F0F}
.login-col{width:100%;max-width:920px;display:grid;gap:18px;justify-items:center}
.login-logo{padding:0;font-size:18px;color:#FBFBFB;max-width:100%;justify-content:center}
.login .card{background:var(--dark);color:#FBFBFB;border:0;border-radius:32px;padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:920px;width:100%}
.login .form{padding:36px 28px}
.login .eyebrow{color:#A5A5A5}
.login h1{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:8px 0 6px}
.login h1 em{font-style:normal;color:#A5A5A5}
.login p{color:#C9C9C9;margin:0 0 18px;font-size:13.5px}
.gbtn{display:inline-flex;width:100%;justify-content:center;align-items:center;gap:10px;font-weight:600;font-size:13px;color:#FBFBFB;background:#2E2E2E;border:0;border-radius:8px;padding:11px 16px;cursor:pointer;text-decoration:none}
.gbtn:hover{background:#3A3A3A}
.gbtn.lime{background:var(--lime);color:var(--lime-ink)}
.gbtn .g{flex:none;background:#FFFFFF;border-radius:50%;padding:2px;width:22px;height:22px}
.login .fine{text-align:left;margin-top:12px}
.login .fine a{color:#A5A5A5}
.welcome{background:#161616;border-radius:24px;padding:28px 26px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.welcome h2{margin:0 0 18px;font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.15;color:#FBFBFB}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:rgba(41,41,41,.7);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:14px}
.stat .k{font-size:12px;color:#A5A5A5}.stat .v{font-weight:600;font-size:22px;letter-spacing:-.02em;color:#FBFBFB;margin-top:4px}
/* motion */
.in{opacity:0;transform:translateY(4px);animation:in .3s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.02s}.d2{animation-delay:.06s}.d3{animation-delay:.1s}.d4{animation-delay:.14s}.d5{animation-delay:.18s}
@keyframes in{to{opacity:1;transform:none}}
@keyframes arc{from{stroke-dashoffset:326.7}}
.ring .arc{animation:arc .9s cubic-bezier(.2,.7,.2,1) .15s both}
@media (prefers-reduced-motion:reduce){.in,.ring .arc{animation:none;opacity:1;transform:none}}
/* mobile */
@media (max-width:900px){
  /* Téléphone et tablette : plus de barre latérale. Une fiche ouverte a ses 5 onglets en bas (.tabs) ; le reste (Mes clients, abonnement,
     réglages, déconnexion) est derrière l'avatar en haut à droite. Sans fiche (liste de l'agence), aucune barre d'onglets. */
  .shell{grid-template-columns:1fr;background:var(--bg)}.side{display:none}
  .main{padding:0 16px 40px;margin:0;border-radius:0;min-height:100vh}.topbar{flex-wrap:wrap;gap:8px 10px;position:relative;padding-right:52px}.topbar h1{font-size:20px}.topbar .pill{order:3;flex:0 1 auto;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hero{grid-template-columns:1fr}.grid{grid-template-columns:minmax(0,1fr)}.tiles{grid-template-columns:1fr 1fr}
  .row{grid-template-columns:32px 1fr;row-gap:8px}.row .btn,.row form{grid-column:2;justify-self:start}
  .page-head{grid-template-columns:1fr}.rep-grid{grid-template-columns:1fr 1fr}.rep-cols{grid-template-columns:1fr}
  .login .card{grid-template-columns:1fr;border-radius:24px}.welcome{display:none}
  .table th:nth-child(n+4),.table td:nth-child(n+4){display:none}
  .table.connect th:nth-child(2),.table.connect td:nth-child(2),.table.connect th:nth-child(3),.table.connect td:nth-child(3){display:none}.table.connect th:nth-child(4),.table.connect td:nth-child(4){display:table-cell}
}
@media (max-width:420px){.score{grid-template-columns:1fr;justify-items:start;padding:16px}.tile .v{font-size:24px}}
/* Demande d'avis (client, mobile, e-mail, bouton) et page publique du rapport */
.askgrid{display:grid;grid-template-columns:1.2fr 1fr 1.3fr auto;gap:8px;align-items:flex-end;margin-top:8px}
.askgrid input{width:100%;box-sizing:border-box}
.askgrid input:disabled{background:var(--row);color:var(--tx3)}
main.pub{max-width:980px;margin:0 auto;padding:28px 24px 60px}
main.pub .topbar{margin-bottom:18px}
@media (max-width:760px){.askgrid{grid-template-columns:1fr 1fr}.askgrid button{grid-column:1/-1}.two{grid-template-columns:1fr!important}main.pub{padding:16px 16px 40px}}
.askbtns{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:760px){.askbtns{grid-column:1/-1}.askbtns .btn{flex:1;justify-content:center}}
/* Page Position : lignes sur le moule TrendTrack (vignette, nom + méta, miniatures, grand chiffre + courbe) */
.fpills{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.fpill{font-size:13px;min-height:40px;padding:6px 14px;border-radius:999px;border:1px solid var(--line2);background:var(--card);color:var(--tx2);text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.fpill span{font-family:var(--mono);font-size:12px;color:var(--tx3)}
.fpill.on{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}.fpill.on span{color:var(--lime-ink)}
.kws{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.kw-head,.kw{display:grid;grid-template-columns:64px 1fr 230px 200px;gap:14px;align-items:center;padding:12px 16px}
.kw-head{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);font-family:var(--mono);border-bottom:1px solid var(--line);padding:10px 16px}
.kw{border-bottom:1px solid var(--line)}.kw:last-child{border-bottom:0}.kw:hover{background:var(--row)}
.ptile{width:64px;height:56px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:24px;letter-spacing:-.02em}
.ptile{position:relative}.ptile small{position:absolute;top:6px;right:7px;font-size:12px;font-weight:600;margin:0;opacity:.8}
.ptile.bloc{background:var(--lime);color:var(--lime-ink)}.ptile.portee{background:var(--warn-soft);color:var(--warn-ink)}.ptile.loin,.ptile.page2,.ptile.absent{background:var(--down-soft);color:var(--down-ink)}.ptile.wait{background:var(--row);color:var(--tx3)}
.kw-main strong{font-size:14px;font-weight:600}.kw-meta{display:flex;gap:12px;font-size:12.5px;color:var(--tx3);margin-top:3px;flex-wrap:wrap}
.kw-ahead{display:flex;gap:6px;align-items:center;min-width:0}
.rival{width:40px;height:40px;flex:none;border-radius:9px;background:var(--row);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--tx2)}
.rival.me{background:var(--lime);border-color:var(--lime);color:var(--lime-ink);font-size:12px}
.kw-ahead small{font-size:12px;color:var(--tx3);margin-left:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.kw-trend{display:flex;align-items:center;gap:8px}.kw-trend .v{font-size:20px;font-weight:600;min-width:48px;letter-spacing:-.02em;text-align:center}.kw-trend .v small{font-size:12px;color:var(--tx3);margin-left:2px;font-weight:500}
.kw-trend .d{font-size:12px;padding:2px 6px;border-radius:5px;white-space:nowrap}.kw-trend .d.up{background:var(--up-soft);color:var(--up-ink)}.kw-trend .d.dn{background:var(--down-soft);color:var(--down-ink)}.kw-trend .d.hint{color:var(--tx3)}
.kw-trend svg{width:100px;height:34px;flex:none;margin-left:auto}
@media (max-width:760px){.kw-head{display:none}.kw{grid-template-columns:56px 1fr;grid-template-rows:auto auto auto;row-gap:8px;padding:12px}.ptile{width:56px;height:50px;font-size:20px}.kw-ahead{grid-column:2}.kw-trend{grid-column:1/-1}}
/* Coup d'œil : trois cases avec un dessin et une phrase ; le bloc des 3 fiches dessiné ; lignes dépliables */
.glances{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 16px;align-items:start}.glances.two{grid-template-columns:1fr 1fr}
.glance{padding:16px 18px}.glance .pack{width:100%;max-width:400px;height:auto;display:block;margin:10px 0 8px;font-family:var(--sans)}
.glance .say,.kw-more .say{font-size:14px;line-height:1.55;margin:6px 0 0;color:var(--tx)}.glance .say b,.kw-more .say b{font-weight:600}
.glance .more{display:inline-flex;align-items:center;min-height:40px;margin-top:6px;font-size:13px;font-weight:600;color:var(--tx);text-decoration:none;border-bottom:2px solid var(--lime)}
.bigline{display:flex;align-items:flex-end;gap:12px;margin:10px 0 6px}.bigline .big{font-size:40px;font-weight:600;letter-spacing:-.03em;line-height:1}.bigline .unit{font-size:13px;color:var(--tx2);line-height:1.4;padding-bottom:4px}
.bars.small{height:56px;margin:8px 0 28px}
.dots{display:inline-flex;gap:6px}.dots i{width:14px;height:14px;border-radius:50%;background:var(--line2);display:inline-block}.dots i.on{background:var(--up)}
.kw-wrap{border-bottom:1px solid var(--line)}.kw-wrap:last-child{border-bottom:0}.kw-wrap>summary{list-style:none;cursor:pointer}.kw-wrap>summary::-webkit-details-marker{display:none}
.kw-wrap .kw{border-bottom:0}.kw-wrap[open]>summary{background:var(--row)}
.kw-more{display:grid;grid-template-columns:320px 1fr;gap:18px;padding:6px 16px 16px 96px;align-items:center}.kw-more .pack{width:320px;height:auto;font-family:var(--sans)}
@media (max-width:760px){.glances,.glances.two{grid-template-columns:1fr}.kw-more{grid-template-columns:1fr;padding:6px 12px 14px}.kw-more .pack{width:100%}}
/* Accueil en trois secondes */
.home{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;margin-bottom:18px;align-items:start}.home-main,.home-side{display:grid;gap:14px}
.verdict,.action,.done{padding:20px 22px}
.verdict h2,.action h2{font-size:24px;font-weight:600;letter-spacing:-.025em;line-height:1.2;margin:8px 0 12px}.verdict h2 em,.action h2 em{font-style:normal;color:var(--tx2)}
.verdict h2 em{color:var(--up-ink);background:var(--up-soft);padding:0 6px;border-radius:6px}
.squares{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}.squares i{width:26px;height:26px;border-radius:7px;background:var(--row);border:1px solid var(--line)}
.squares i.bloc{background:var(--up);border-color:var(--up)}.squares i.portee{background:#FFE08A;border-color:#FFE08A}.squares i.loin,.squares i.page2,.squares i.absent{background:#FFB3B1;border-color:#FFB3B1}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--tx2);align-items:center}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px;background:var(--row);border:1px solid var(--line)}
.legend i.bloc{background:var(--up);border-color:var(--up)}.legend i.portee{background:#FFE08A;border-color:#FFE08A}.legend i.loin,.legend i.page2,.legend i.absent{background:#FFB3B1;border-color:#FFB3B1}
.legend .delta{margin-left:auto;font-weight:600;padding:2px 8px;border-radius:6px;font-size:12px}.legend .delta.up{background:var(--up-soft);color:var(--up-ink)}.legend .delta.dn{background:var(--down-soft);color:var(--down-ink)}
.verdict .more,.action .more{display:inline-flex;align-items:center;min-height:40px;margin-top:6px;font-size:13.5px;font-weight:600;color:var(--tx);text-decoration:none;border-bottom:2px solid var(--lime)}
.action-row{display:flex;gap:14px;align-items:flex-start;margin-top:6px}.action-row .ico{flex:none;width:44px;height:44px;border-radius:12px;background:var(--lime);color:var(--lime-ink);display:grid;place-items:center;font-size:18px;font-weight:700}
.action-row h2{margin:2px 0 6px;font-size:20px}.action-row p{margin:0;font-size:14px;color:var(--tx2);line-height:1.5}
.cta.big,.btn.big{margin-top:14px;width:100%;justify-content:center;font-size:15px;padding:13px 18px;min-height:48px}
.then{margin-top:12px}.then summary{cursor:pointer;font-size:13px;color:var(--tx2);list-style:none;min-height:40px;display:flex;align-items:center;gap:4px}.then summary::-webkit-details-marker{display:none}.then summary::before{content:'▸ ';color:var(--tx3)}.then[open] summary::before{content:'▾ '}
.then .todo{margin-top:8px}.then .row{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line)}.then .row h3{margin:0 0 2px;font-size:14px}.then .row p{margin:0;font-size:13px;color:var(--tx2)}
.done ul.plain{margin:8px 0 0;font-size:13.5px;line-height:1.6}.done ul.plain small{font-family:var(--mono);color:var(--tx3);margin-right:6px}
/* « Fait pour vous » : lignes denses à la TrendTrack (date en mono, puis ce qui a été fait), séparées d'un filet */
.faites{list-style:none;margin:8px 0 0;padding:0}.faites li{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:9px 0;border-top:1px solid var(--row);font-size:13.5px;line-height:1.45}.faites li:first-child{border-top:0}
.faites time{font-family:var(--mono);font-size:12px;color:var(--tx3);padding-top:1px}
.eyebrow .count{margin-left:6px;vertical-align:1px}
/* Férié : deux réponses côte à côte, aucune n'est le choix par défaut (aucune en lime) */
.choix{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.choix .btn{min-height:48px;justify-content:center;font-size:15px}
.then .row .choix{margin-top:0;min-width:200px}
/* Ouvert depuis l'accueil (#avis-12, #photo-4, #demande, #appel-3) : la carte visée est marquée et ne se cache pas sous le haut de l'écran */
.rev:target,.ph:target,.kw.call:target,form:target{outline:2px solid var(--tx);outline-offset:2px}.rev,.ph,.kw.call,#demande{scroll-margin-top:16px}
/* Avatar (téléphone) : un clic ouvre Mes clients, Mon abonnement, Réglages et Me déconnecter ; chaque ligne fait 44 px. */
.me-menu{display:none}.me-menu>summary{list-style:none}.me-menu>summary::-webkit-details-marker{display:none}
.topbar .me{width:40px;height:40px;border-radius:10px;background:var(--dark);color:#FBFBFB;display:grid;place-items:center;font-weight:600;cursor:pointer}
.me-pop{position:absolute;right:0;top:56px;z-index:30;min-width:220px;max-width:calc(100vw - 32px);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 12px 32px rgba(0,0,0,.12)}
.me-pop a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;text-decoration:none;font-size:14px;font-weight:500;color:var(--tx)}.me-pop a:hover{background:var(--row)}
.me-pop a[href='/logout']{border-top:1px solid var(--line);border-radius:0 0 8px 8px;color:var(--tx2)}
/* Les cinq onglets du téléphone (Accueil, Avis, Appels, Photos, Mon mois) : barre noire en bas, 56 px, libellés de 12 px. */
.tabs{display:none}
@media (max-width:900px){
  .me-menu{display:block;position:absolute;right:0;top:12px}
  .tabs{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--side);border-top:1px solid #1E1E20;padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
  .tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;padding:4px 2px;border-radius:10px;color:var(--side-tx2);text-decoration:none;font-size:12px;font-weight:500;text-align:center}
  /* l'icône est un SVG au trait dans le lien (aria-hidden) : l'onglet se lit par son seul libellé */
  .tabs a svg{width:18px;height:18px;flex:none;color:var(--side-tx2)}.tabs a.on{color:var(--side-tx);background:var(--side-hi)}.tabs a.on svg{color:var(--lime-sur-noir)}
  /* le dernier bouton de la page reste au-dessus de la barre, même tout en bas */
  .avec-onglets .main{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
}
@media (max-width:760px){
  .home{grid-template-columns:1fr}.verdict h2,.action h2{font-size:22px}.squares i{width:24px;height:24px}
}
.home-side .plan{margin:0}

/* Mes appels */
.kw.call{grid-template-columns:64px 1fr auto}.call-actions{display:flex;gap:8px;align-items:center}
@media (max-width:760px){.kw.call{grid-template-columns:56px 1fr;grid-template-rows:auto auto}.call-actions{grid-column:1/-1}}
/* tour 3 (01.10.2026) · messages : un échec en rouge de baisse TrendTrack (#FB6461) en bordure, texte rouge foncé sur fond rouge pâle
   (contraste 9,1:1, au-dessus de 4,5:1) ; un succès en vert #1F7330 (5,8:1 sur #FDFDFD ; l'ancien #2B8A3E faisait 4,3:1). Près du geste, en haut de la carte : visible au téléphone sans défiler. */
.flash.err{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;color:var(--down-ink);background:var(--down-soft);border:1px solid #FB6461;border-left:4px solid #FB6461;border-radius:8px;padding:10px 12px;font-size:13.5px;font-weight:500;margin:10px 0 12px;line-height:1.4}
.flash.err span{flex:1 1 220px}.flash.err .btn{min-height:40px}
.login .flash{color:var(--up)}.login .flash.err{color:var(--down-ink)}
/* carte seule (lien reçu, page d'erreur, liste d'attente) et bouton principal de 44 px */
.login .card.solo{grid-template-columns:1fr;max-width:460px}
.gbtn{min-height:40px}.gbtn.lime{min-height:44px;font-size:14px}
.login .lbl{color:#A5A5A5}
/* tour 8 (T7-016) : la phrase d'aide en Inter, comme chez TrendTrack (le mono ne sert qu'aux libellés courts en capitales) ; « ou » entre
   Google et le lien par e-mail ; le bouton du lien par e-mail en gris #2E2E2E quand Google est l'action principale */
.login .aide{font-family:var(--sans);font-size:12.5px;color:#A5A5A5;margin:10px 0 0;line-height:1.45}.login .aide a{color:#C9C9C9}
.login .ou{display:flex;align-items:center;gap:10px;margin:16px 0 4px;color:#A5A5A5;font-size:12.5px}.login .ou::before,.login .ou::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.1)}
.lien-form{margin:0}.lienmail .btn.sombre{background:#2E2E2E;border-color:#2E2E2E;color:#FBFBFB}.lienmail .btn.sombre:hover{background:#3A3A3A}
/* tour 8 (T7-290, T7-326) : au téléphone, la marque de l'agence en haut de la page du client (logo ou initiale, puis le nom) */
.topmarque{display:none}
@media (max-width:900px){.topmarque{display:flex;align-items:center;gap:8px;max-width:100%;min-width:0;margin:0 0 6px;font-weight:600;font-size:14px;color:var(--tx)}.topmarque i{flex:none;width:24px;height:24px;border-radius:6px}.topmarque .marque-logo{height:24px!important;max-width:120px!important}}
.login input[type=email]{background:#212121;border:0;color:#FBFBFB;min-height:40px;border-radius:8px}
.lienmail{display:flex;gap:8px;align-items:center}.lienmail input{flex:1;margin:6px 0}.lienmail .btn{min-height:40px}
@media (max-width:420px){.lienmail{flex-direction:column;align-items:stretch}.lienmail .btn{justify-content:center}}
.card.vide{padding:24px 26px;max-width:560px}.card.vide h2{margin:6px 0 8px;font-size:20px;font-weight:600;letter-spacing:-.02em}.card.vide p{color:var(--tx2);margin:0 0 16px}
.card.vide .btn.go{min-height:40px}
/* écrans du tour 3 (connexion, Connecter) : textes de 12 px au moins et boutons de 40 px au moins (standard B7) */
.login .eyebrow,.login .stat .k{font-size:12px}
.table.connect th,.table.connect small,.table.connect .badge{font-size:12px}.table.connect .btn{min-height:40px}
.card.vide .eyebrow{font-size:12px}
.etat-tel{display:none}@media (max-width:900px){.table.connect .etat-tel{display:inline-block;margin-top:4px}}
/* Tour 8 (T7-040) : lignes denses, vignette (initiale) + nom + méta-lignes, comme reference/app_table.png ; la marche à suivre sur la ligne
   (T7-031, T7-030) ; un badge ne se coupe jamais sur deux lignes. */
.cx-fiche{display:flex;gap:12px;align-items:center;min-width:0}.cx-fiche .cl-ini{width:40px;height:40px;font-size:15px}
.cx-txt{display:grid;gap:2px;min-width:0;justify-items:start}.cx-txt strong{overflow-wrap:anywhere}.cx-txt small{color:var(--tx3)}
.cx-note{display:block;color:var(--tx2);font-size:12px;line-height:1.4;margin-top:2px;max-width:60ch}
.table.connect .badge{white-space:nowrap}.cx-geste{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
tr.cx-autre .cx-txt strong{color:var(--tx2)}.deja-branchee{padding:16px 18px}.deja-branchee .boutons{margin-top:0}
/* Au téléphone, une carte par fiche : la vignette, le nom, l'adresse et la marche à suivre, puis le bouton sur toute la largeur (le tableau
   débordait de sa carte : « Connecter cette fiche » coupé à 390 px). */
@media (max-width:900px){
  .table.connect thead{display:none}.table.connect tr{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .table.connect tr:last-child{border-bottom:0}.table.connect td,.table.connect td:nth-child(4){display:block;padding:0;border:0;text-align:left !important}
  .table.connect td:nth-child(2),.table.connect td:nth-child(3){display:none}
  .table.connect td:nth-child(4) form,.table.connect td:nth-child(4) .btn{width:100%}.table.connect td:nth-child(4) .btn{justify-content:center}.cx-geste{justify-content:flex-start}
}
/* tour 4, partie 2 (01.10.2026) · Avis : lignes denses sur le modèle de reference/app_table.png. Une vignette (la note : verte 4-5, jaune 3,
   rouge 1-2), le nom et la date en méta, l'avis, puis la réponse : 3 colonnes au plus ; au téléphone, la réponse passe dessous, pleine largeur,
   « Publier la réponse » en premier et sur toute la largeur. */
.avis-tete{margin:0 0 14px}.avis-tete .verdict{padding:16px 20px}.avis-tete .verdict h2{margin:6px 0 4px}.avis-tete .say{margin:0;font-size:14px;color:var(--tx2)}
.rev{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1.15fr);gap:12px 16px;align-items:start;padding:14px 16px}
.rev-tile{width:56px;height:56px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:600;font-size:22px;line-height:1;letter-spacing:-.02em;background:var(--row);color:var(--tx2)}
.rev-tile small{font-size:12px;margin-top:3px;letter-spacing:0}
.rev-tile.n4,.rev-tile.n5{background:var(--up-soft);color:var(--up-ink)}.rev-tile.n3{background:var(--warn-soft);color:var(--warn-ink)}.rev-tile.n1,.rev-tile.n2{background:var(--down-soft);color:var(--down-ink)}
.rev-main{min-width:0}.rev-head{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:4px 10px}.rev-head strong{font-size:14px;font-weight:600}
.rev-meta{font-family:var(--mono);font-size:12px;color:var(--tx3)}
.rev .rev-text{margin:6px 0 0;font-size:13.5px;overflow-wrap:anywhere}
.rev .reply{border-top:0;padding-top:0;min-width:0}.rev .reply.pub p{margin:4px 0 0;font-size:13.5px;color:var(--tx2);overflow-wrap:anywhere}
.rev textarea{margin:6px 0 8px;min-height:88px}
.rev .reply-actions{justify-content:flex-start;gap:8px}.rev .reply-actions .hint{margin-left:auto}
.flash[hidden]{display:none}
.avertir{margin:6px 0;padding:8px 10px;border-radius:8px;background:var(--warn-soft);color:var(--warn-ink);font-size:13px;line-height:1.4}
.revs+.sec,.sec+.revs{margin-top:8px}.revs{margin-bottom:16px}
/* Demande d'avis : 3 champs au plus, l'état de chaque demande toujours visible (aussi au téléphone), « Relancer » à côté */
.demande{padding:16px 18px;margin:0 0 16px}.demande .say{margin:6px 0 0;font-size:13.5px;color:var(--tx2)}
.askgrid.deux{grid-template-columns:1.2fr 1fr auto}
.wa-pret{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:10px 0 4px;padding:12px 14px;border-radius:10px;background:var(--up-soft);color:var(--up-ink)}.wa-pret p{margin:0;flex:1 1 240px;font-size:13.5px}
.copie textarea{margin:6px 0 4px}
.lien-actuel{margin:10px 0 0;font-size:13px;color:var(--tx2);overflow-wrap:anywhere}.lien-actuel a{font-weight:600;color:var(--tx)}
.changer summary{cursor:pointer;font-size:13px;color:var(--tx2);min-height:40px;display:flex;align-items:center;list-style:none}.changer summary::-webkit-details-marker{display:none}.changer summary::before{content:'▸ ';color:var(--tx3);margin-right:4px}.changer[open] summary::before{content:'▾ '}
.reqs{margin-top:12px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.req{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px;padding:10px 12px;border-top:1px solid var(--line)}.req:first-child{border-top:0}
.req-main{min-width:0}.req-main strong{font-size:13.5px}.req-main small{display:block;font-size:12px;color:var(--tx3);overflow-wrap:anywhere}
.req-etat{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
/* Photos : le gros bouton lime qui ouvre l'appareil (le champ fichier couvre le bouton, invisible), le geste et la commune, puis les vignettes */
.envoi{padding:16px 18px;margin:0 0 16px;display:grid;gap:10px}
.fichier{position:relative;overflow:hidden;cursor:pointer;margin-top:0}.fichier:focus-within{outline:2px solid var(--tx);outline-offset:2px}
.fichier input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0;padding:0;border:0}
.apercu{display:block;max-width:180px;max-height:180px;border-radius:10px;border:1px solid var(--line)}.apercu[hidden]{display:none}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.champs input{margin-bottom:0}
.envoi .btn.dark{justify-self:start}
.ph-img{position:relative;overflow:hidden}.ph-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph-etat{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
@media (max-width:760px){
  .rev{grid-template-columns:48px minmax(0,1fr);padding:12px}.rev-tile{width:48px;height:48px;font-size:19px}.rev .reply{grid-column:1/-1}.rev .reprise{grid-column:1/-1}
  .rev .reply-actions .btn.go{flex:1 1 100%;justify-content:center}.rev .reply-actions .btn{flex:1 1 auto;justify-content:center}.rev .reply-actions .hint{margin-left:0}
  .avis-tete .verdict{padding:14px 16px}.avis-tete .verdict h2{font-size:20px}
  .askgrid.deux{grid-template-columns:1fr 1fr}.champs{grid-template-columns:1fr}.envoi .btn.dark{justify-self:stretch;justify-content:center}
  .ph{grid-template-columns:72px minmax(0,1fr);gap:12px;padding:12px}.ph-img{width:72px;height:54px}.ph-form{grid-template-columns:1fr}.ph-form .btn{margin-top:8px;justify-content:center}
  .req-etat .btn{min-height:40px}
}
.rev .qui{margin:2px 0 0;font-size:12.5px}
/* tour 9 (T7-060) : réponse refusée par Google ou à relier : le message et le formulaire de correction dans UN bloc, colonne de la réponse (toute la
   largeur au téléphone), jamais deux enfants de la grille de la carte écrasés chacun dans une colonne étroite. */
.rev .reprise{min-width:0;display:grid;gap:8px}.rev .reprise .flash{margin:0}.rev .reprise .flash .btn{flex:0 0 auto}
.envoi{max-width:760px}
/* tour 4, partie 3 (01.10.2026) · Argent et comptes. Choix de formule : le basculeur de période en pastilles (Au mois · Trimestre · Année),
   comme celui des tarifs TrendTrack, piloté par des radios (aucun script) ; les prix ET le lien « Choisir » suivent la période choisie. */
.choix-formule{position:relative}
.per-r{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.periodes{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:10px;background:var(--row);border:1px solid var(--line);margin:0 0 10px}
.per-l{min-height:40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:4px;padding:2px 4px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--tx2);cursor:pointer;text-align:center;line-height:1.2}
.per-l i{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--up-ink)}
.per-m:checked~.periodes .l-m,.per-q:checked~.periodes .l-q,.per-y:checked~.periodes .l-y{background:var(--tx);color:#FBFBFB}
.per-m:checked~.periodes .l-m i,.per-q:checked~.periodes .l-q i,.per-y:checked~.periodes .l-y i{color:var(--up)}
.per-r:focus-visible~.periodes{outline:2px solid var(--tx);outline-offset:2px}
.choix-formule .p-q,.choix-formule .p-y,.per-q:checked~.tiers .p-m,.per-y:checked~.tiers .p-m{display:none}
.per-q:checked~.tiers span.p-q,.per-y:checked~.tiers span.p-y{display:inline}
.per-q:checked~.tiers small.p-q,.per-y:checked~.tiers small.p-y{display:block}
.per-q:checked~.tiers a.p-q,.per-y:checked~.tiers a.p-y{display:flex}
.mention{font-family:var(--mono);font-size:12px;color:var(--tx2);margin:0 0 10px;line-height:1.45}
.choix-formule .tier{display:grid;grid-template-columns:minmax(0,1fr);justify-content:stretch;gap:8px;align-items:stretch}
.tier-tete{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tier .paye{font-family:var(--mono);font-size:12px;color:var(--tx2)}
.choix-formule .tier .cta,.choix-formule .tier .btn{width:100%;justify-content:center;margin:0}
.tier.soon{border-style:dashed}.tier.soon form .btn.trait{margin-top:0}
/* Carte d'abonnement : les boutons empilés, pleine largeur, libellés longs sur deux lignes au téléphone ; la ligne de la séance en bas. */
.plan>.cta,.plan>.btn,.plan>form{margin-top:8px}.plan>.cta,.plan>.btn{width:100%;justify-content:center}.plan form .btn{width:100%;justify-content:center}
.plan .cta,.plan .btn{white-space:normal;text-align:center}
.seance-l{display:flex;align-items:center;min-height:40px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:13px;font-weight:500;color:var(--tx);text-decoration:none}
.seance-l::after{content:'→';margin-left:auto;color:var(--tx3)}
.flash.err.bandeau{margin:0 0 4px}
.card.paiement{max-width:620px}.card.paiement h2{font-size:22px}.card.paiement form{margin:0 0 10px}.card.paiement .cta,.card.paiement .btn{margin-top:4px}
/* Mes clients (agence) : lignes denses sur le moule de reference/app_table.png. Initiale, nom et méta-lignes, puis « Cette semaine » et
   le grand chiffre « X sur 100 », puis le bouton de la ligne ; au téléphone, une carte par client, toute la ligne du nom cliquable. */
.fpills.liste{margin:0 0 12px}
.lpill{font-size:13px;min-height:40px;padding:6px 14px;border-radius:999px;border:1px solid var(--line2);background:var(--card);color:var(--tx2);text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.lpill span{font-family:var(--mono);font-size:12px;color:var(--tx3)}.lpill.on{background:var(--tx);border-color:var(--tx);color:#FBFBFB}.lpill.on span{color:#C9C9C9}
.clients{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cl-head,.cl-row{display:grid;grid-template-columns:minmax(0,1fr) 130px 120px 96px 160px;gap:14px;align-items:center;padding:12px 16px}
.cl-head.lecture,.cl-row.lecture{grid-template-columns:minmax(0,1fr) 130px 96px}
.cl-head.sans-inv,.cl-row.sans-inv{grid-template-columns:minmax(0,1fr) 130px 120px 96px} /* collaborateur : pas de bouton d'invitation */
/* Tour 8 (T7-276) : toute la ligne ouvre la fiche (le lien du nom s'étend à la ligne) ; « Inviter le client » reste au-dessus, avec son lien. */
.cl-row{position:relative;cursor:pointer}.cl-main::after{content:'';position:absolute;inset:0;z-index:0}.cl-inv{position:relative;z-index:1}
/* Tour 8 (T7-282) : la colonne Appels, comme la courbe de chaque ligne TrendTrack : le grand chiffre, sa flèche, la courbe des mois. */
.cl-appels{display:grid;gap:2px;min-width:0}.cl-lib{display:none;font-size:12px;color:var(--tx3)}.cl-n{display:flex;align-items:baseline;gap:6px}.cl-n b{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1}
.cl-n .d{font-size:12px;font-weight:600}.cl-courbe{display:block;width:110px;height:30px;max-width:100%}
/* Tour 8 (T7-274) : recherche et pastilles Toutes / À faire / En baisse, en haut de la liste (reference/app_filters.png). */
.cl-outils{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 12px}.cl-outils .fpills.liste{margin:0}
.cl-cherche{display:flex;gap:8px;flex:1 1 300px;max-width:520px;min-width:0}.cl-cherche input{flex:1;min-width:0;min-height:40px;font:inherit;font-size:13.5px;padding:6px 12px;border:1px solid var(--line2);border-radius:8px;background:var(--card);color:var(--tx)}
.cl-cherche .btn{min-height:40px}
.cl-head{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);border-bottom:1px solid var(--line);padding:10px 16px}
.cl-row{border-bottom:1px solid var(--line)}.cl-row:last-child{border-bottom:0}.cl-row:hover{background:var(--row)}
.cl-main{display:flex;gap:12px;align-items:center;min-width:0;text-decoration:none;color:inherit}
.cl-ini{flex:none;width:52px;height:52px;border-radius:10px;background:var(--row);border:1px solid var(--line);display:grid;place-items:center;font-weight:600;font-size:18px;color:var(--tx2)}
.cl-txt{min-width:0;display:grid;gap:2px}.cl-txt strong{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.cl-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--tx3)}
.cl-score{display:flex;align-items:baseline;gap:6px}.cl-score b{font-size:26px;font-weight:600;letter-spacing:-.03em;line-height:1}.cl-score small{font-family:var(--mono);font-size:12px;color:var(--tx3)}
.cl-inv{justify-self:end}.cl-vide{padding:18px 16px;color:var(--tx2);font-size:13.5px}
.topbar .ajout{white-space:nowrap}
/* Réglages : chaque carte porte son message (ancre), boutons sombres sauf le lime de l'abonnement */
.card.reg{padding:16px 18px}.reg-msg{padding:12px 14px 0}.reg-msg .flash{margin:0}
.coches{display:grid;gap:6px;margin:10px 0;font-size:13.5px}.coches label,.coche{display:flex;gap:8px;align-items:center;min-height:32px}.coche{font-size:13px;margin-bottom:10px}
.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.boutons{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}.boutons .btn,.passage .btn{white-space:normal;text-align:left}
.passage{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}.passage p{margin:0 0 8px;font-size:13.5px;color:var(--tx2)}
.table small{font-size:12px}.table.acces td:first-child,.table.fiches td:first-child{overflow-wrap:anywhere}
select{font:inherit;font-size:13.5px;min-height:40px;padding:6px 10px;border:1px solid var(--line2);border-radius:8px;background:var(--card);color:var(--tx);max-width:100%}
.etapes .table td{vertical-align:top}
@media (max-width:900px){
  .cl-head{display:none}
  .cl-row,.cl-row.lecture,.cl-row.sans-inv{grid-template-columns:minmax(0,1fr) auto;row-gap:10px;padding:12px}
  .cl-main{grid-column:1/-1}.cl-faire{justify-self:start}.cl-score{justify-self:end}.cl-inv{grid-column:1/-1;justify-self:stretch;justify-content:center}
  .cl-appels{grid-column:1/-1;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:10px}.cl-lib{display:inline}.cl-courbe{width:90px;height:26px;justify-self:end}
  .cl-row.lecture .cl-score{grid-column:auto}
  .two-cols{grid-template-columns:1fr}
  /* Accès au téléphone : une personne par carte (adresse, accès, bouton à droite), plus de colonne écrasée */
  .table.acces thead{display:none}.table.acces tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:10px 0;border-bottom:1px solid var(--line)}
  .table.acces td{display:block;padding:0;border:0}.table.acces td:nth-child(2){grid-column:1}.table.acces td:last-child{grid-column:2;grid-row:1 / span 2;align-self:center}
  /* Fiches connectées au téléphone : la même carte par fiche (nom et commune, état dessous, « Retirer la fiche » à droite) ; le tableau
     à 3 colonnes faisait 356 px de large au moins, plus que l'écran de 360 ou 320 px. */
  .table.fiches thead{display:none}.table.fiches tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 14px;border-bottom:1px solid var(--line)}.table.fiches tr:last-child{border-bottom:0}
  .table.fiches td{display:block;padding:0;border:0}.table.fiches td:nth-child(2){grid-column:1}.table.fiches td:nth-child(3){grid-column:2;grid-row:1 / span 2;align-self:center}
  /* Séance : la carte du prix (ou du créneau à choisir) en premier au téléphone */
  .grid.seance>aside{order:-1}
  .topbar .ajout{order:3}
}

/* tour 4, partie 4 (01.10.2026) · Écrans de second niveau. Couleur de marque : l'onglet actif et l'élément actif de la barre prennent
   --lime-sur-noir (la couleur de l'agence si elle se lit sur #2A2A2C, sinon du blanc) ; le texte des boutons, --lime-ink (contraste maximal). */
/* Où je sors, sur reference/app_filters.png : le verdict et « + Ajouter une recherche » en tête, filtres en pastilles (l'active en noir, comme
   « Shops » chez TrendTrack : le seul lime reste le bouton d'ajout), puis des lignes de 3 colonnes (place, ce que le client tape, devant vous)
   et « Retirer » au bout. Tuiles : 1-3 lime, 4-10 jaune, 11-20 orange (page 2), au-delà rouge. */
.pos-tete{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:14px;margin:0 0 14px;align-items:stretch}
.pos-tete .verdict .say{margin:0 0 10px;font-size:14px;color:var(--tx2)}.pos-tete .verdict .say .badge{margin-right:4px}
.ajout-rech{padding:16px 18px;display:flex;flex-direction:column;justify-content:center;gap:2px}.ajout-rech .lienmail input{margin:6px 0}.ajout-rech .hint{margin:4px 0 0}
.fpill.on{background:var(--tx);border-color:var(--tx);color:#FBFBFB}.fpill.on span{color:#C9C9C9}
.kws .kw-head{grid-template-columns:72px minmax(0,1fr) minmax(0,220px) 110px}.kws .kw-head.lecture{grid-template-columns:72px minmax(0,1fr) minmax(0,220px)}
.kwl{display:grid;grid-template-columns:minmax(0,1fr) 110px;align-items:center;border-bottom:1px solid var(--line)}.kwl:last-child{border-bottom:0}.kwl.lecture{grid-template-columns:minmax(0,1fr)}
.kwl .kw-wrap{border-bottom:0;min-width:0}.kwl .kw{grid-template-columns:72px minmax(0,1fr) minmax(0,220px);border-bottom:0}
.kw-place{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.kw-place .d{font-size:12px;padding:1px 6px;border-radius:5px;white-space:nowrap}.kw-place .d.up{background:var(--up-soft);color:var(--up-ink)}.kw-place .d.dn{background:var(--down-soft);color:var(--down-ink)}.kw-place .d.hint{color:var(--tx3)}
.ptile.page2{background:#FFE8D1;color:#7A3B00}.ptile.absent{background:var(--down-soft);color:var(--down-ink)}
.devant{display:block;font-size:13.5px;font-weight:600;overflow-wrap:anywhere}.kw-ahead{flex-direction:column;align-items:flex-start;gap:0}.kw-ahead small{margin-left:0}
.kw-retirer{padding-right:16px;justify-self:end}.kw-more svg[viewBox="0 0 110 34"]{width:110px;height:34px;display:block;margin-top:6px}
.kws .cl-vide{padding:18px 16px}.card.cl-vide{padding:18px 16px;color:var(--tx2);font-size:13.5px;margin:14px 0 16px}
.verdict+.sec,.verdict+.kws{margin-top:16px}#reglages-appels{margin-top:4px}
/* Mes appels : le verdict, les appels, puis les réglages ; le code de renvoi seulement avec sa phrase. */
.code-renvoi{margin-top:14px;padding:12px 14px;background:var(--row);border-radius:10px}.code-renvoi p{margin:6px 0 0;font-size:14px}.code-renvoi b{font-family:var(--mono)}
.call-actions{flex-wrap:wrap;justify-content:flex-end}.call-actions form{margin:0}
/* Mon mois : la phrase, le message, le geste ; les 4 chiffres ; en bas, les gestes discrets (liens). */
.rep-tete{margin:0 0 14px;display:grid;gap:10px}.rep-tete .lead{margin:0;max-width:72ch}.rep-tete form{margin:0}.rep-tete .avertir{margin:0}
.envoi-client{max-width:520px}.envoi-client .lienmail input{margin:6px 0}
.rep-pied{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:10px}.rep-pied form{margin:0}
button.lien{font:inherit;font-size:13px;font-weight:500;color:var(--tx2);background:none;border:0;padding:0;min-height:40px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}button.lien:hover{color:var(--tx)}
/* Réglages : les courriels en interrupteurs qui s'enregistrent au toucher (44 px de haut), le pilote en tête de sa carte, l'invitation en pastilles. */
.bascules{display:grid;gap:2px;margin-top:10px}
.bascule{display:flex;gap:12px;align-items:center;min-height:44px;padding:4px 0;cursor:pointer}.bascule input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
/* Interrupteurs (tour 8, T7-168, T7-174) : les couleurs du relevé TrendTrack (texte foncé #0F0F10, et son gris secondaire à 73 %). Éteint : un
   contour et une pastille rgba(15,15,16,.73) sur la carte blanche (8:1, au-dessus des 3:1 d'un composant) ; allumé : plein #0F0F10, pastille
   blanche à droite. L'état se lit à la couleur ET à la place de la pastille. */
.bascule .piste{flex:none;width:40px;height:24px;border-radius:999px;background:var(--card);border:2px solid rgba(15,15,16,.73);position:relative;transition:background .15s}.bascule .piste::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:rgba(15,15,16,.73);transition:left .15s}
.bascule input:checked+.piste{background:#0F0F10;border-color:#0F0F10}.bascule input:checked+.piste::after{left:18px;background:#fff}.bascule input:focus-visible+.piste{outline:2px solid var(--tx);outline-offset:2px}
.hint.toujours{margin:8px 0 0}
.kw-main a.num{color:var(--tx);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}.kw-main .flash{margin:6px 0 0}
.kw.call.lu a.num{display:inline-flex;align-items:center;min-height:40px} /* client d'une agence : le numéro est son seul geste, assez grand pour le doigt */
.b-txt{display:grid;gap:1px;min-width:0}.b-txt b{font-size:13.5px;font-weight:600}.b-txt small{font-size:12px;color:var(--tx3)}
.pilote-tete{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between}.pilote-tete form{margin:0}
.etat-pilote{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:4px 8px;border-radius:6px;background:var(--row);color:var(--tx2)}
.etat-pilote.actif{background:var(--up-soft);color:var(--up-ink)}.etat-pilote.pause_abonnement{background:var(--warn-soft);color:var(--warn-ink)}
.card.pilote .say{margin:10px 0;font-size:14px}.coche.accord{align-items:flex-start;font-size:13.5px;line-height:1.45}.coche.accord input{margin-top:3px}
.qui-invite{position:relative;margin:4px 0 6px}.qi-r{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.qi-pills{display:flex;flex-wrap:wrap;gap:6px}.qi-pills label{min-height:40px;display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;border:1px solid var(--line2);background:var(--card);font-size:13px;color:var(--tx2);cursor:pointer}
.qi-client:checked~.qi-pills label[for=qi-client],.qi-membre:checked~.qi-pills label[for=qi-membre]{background:var(--tx);border-color:var(--tx);color:#FBFBFB}
.qi-r:focus-visible~.qi-pills{outline:2px solid var(--tx);outline-offset:2px;border-radius:999px}
.qi-dit{display:none;margin:8px 0 0;font-size:13px;color:var(--tx2)}.qi-client:checked~.qi-d-client,.qi-membre:checked~.qi-d-membre{display:block}.qi-membre:checked~.qi-fiches{display:none}
/* Aperçu de la marque : la barre (onglet actif), le haut d'un courriel et son bouton, à la couleur choisie. */
.apercu-marque{margin-top:14px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:10px;align-items:stretch}
.ap-barre{background:#000;border-radius:10px;padding:10px;display:grid;gap:6px;align-content:start}.ap-logo{display:flex;align-items:center;gap:8px;color:#FBFBFB;font-weight:600;font-size:13px;overflow-wrap:anywhere}
.ap-logo i{flex:none;width:22px;height:22px;border-radius:6px;background:var(--ap);color:var(--ap-ink);display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700}.ap-logo img{height:28px;width:auto;max-width:140px;object-fit:contain;border-radius:4px;display:block}.ap-signe{flex:none;display:flex}
.ap-onglet{background:#2A2A2C;color:#FBFBFB;border-radius:8px;padding:8px 10px;font-size:13px}.ap-onglet::first-letter{color:var(--ap-noir)}
.ap-mail{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff}.ap-tete{font-weight:600;font-size:13px;padding-bottom:6px;border-bottom:3px solid var(--ap)}.ap-mail p{margin:8px 0;font-size:13px;color:var(--tx2)}
.ap-bouton{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border-radius:8px;background:var(--ap);color:var(--ap-ink);font-weight:600;font-size:13px}
.ap-phrase{grid-column:1/-1;margin:0}.ap-phrase:empty{display:none}
/* Tour 5 : la marque lue par le collaborateur (le titulaire seul la change) : valeurs en texte, pastille de la couleur. */
.marque-lue{display:flex;align-items:center;gap:8px;min-height:24px;margin-top:4px;font-size:13.5px;overflow-wrap:anywhere}.marque-lue .pastille{flex:none;width:18px;height:18px;border-radius:5px;border:1px solid var(--line2)}
@media (max-width:900px){
  .pos-tete{grid-template-columns:1fr}
}
@media (max-width:760px){
  .kws .kw-head{display:none}
  .kwl,.kwl.lecture{grid-template-columns:minmax(0,1fr)}
  .kwl .kw{grid-template-columns:56px minmax(0,1fr);grid-template-rows:auto auto;row-gap:6px;padding:12px}
  .kwl .kw-ahead{grid-column:2}.kw-retirer{justify-self:end;padding:0 12px 12px}
  .rep-grid{grid-template-columns:1fr;gap:0;padding-bottom:6px}.rep-grid>div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:12px;padding:10px 0;border-top:1px solid var(--line)}.rep-grid>div:first-child{border-top:0}
  .rep-grid .k{grid-column:1}.rep-grid .d{grid-column:1}.rep-grid .big{grid-column:2;grid-row:1/span 2;font-size:26px;margin:0;text-align:right}.rep-grid .k{font-size:13px}
  .apercu-marque{grid-template-columns:1fr}
  .call-actions{justify-content:flex-start}
}
/* Mes clients (tour 4, reprise) : la carte « Activer mes N fiches » du titulaire d'une agence sans abonnement, un clic vers le paiement. */
.card.activer{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between;padding:14px 16px;margin:0 0 12px}.card.activer p{margin:0;flex:1 1 320px;font-size:13.5px;color:var(--tx2);line-height:1.5}.card.activer p b{color:var(--tx)}
@media (max-width:760px){.card.activer .btn{flex:1 1 100%;justify-content:center}}
/* Fériés pas encore sur la fiche Google (tour 5, reprise) : un seul bandeau rouge, une ligne courte par jour et ses deux gestes en boutons clairs
   (jamais lime : le lime reste celui de la seule chose à faire, qui doit rester au premier écran du téléphone). */
.flash.err.ferie-refus{display:block;padding:8px 12px}.ferie-refus .fr-tete{margin:0 0 6px}
.ferie-refus .fr-jours{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ferie-refus li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}.ferie-refus li>span{flex:1 1 260px}
.ferie-refus .fr-gestes{display:flex;flex-wrap:wrap;gap:6px}.ferie-refus .fr-gestes .btn{min-height:40px;background:#fff}
.flash.err.ferie-resume{display:none}.ferie-resume .btn{background:#fff}
@media (max-width:760px){.flash.err.ferie-resume{display:flex}.home-main>.ferie-refus{order:9}}
/* Tour 8 (T7-051, 052) : au téléphone, « La seule chose à faire » passe TOUJOURS avant le verdict, sous les bandeaux (paiement, panne Google et
   son bouton lime, résumé des fériés) : son bouton reste au premier écran, au-dessus des onglets (390 × 844 et 360 × 780). Sans effet à l'ordinateur. */
@media (max-width:760px){.home-main>.verdict{order:1}}
/* À l'ordinateur aussi, dès qu'un bandeau est en tête (paiement, panne Google, fériés, fiche non validée) : la chose à faire avant le verdict, sous
   les bandeaux, pour que son bouton reste au premier écran (T7-051 : à 1280, elle descendait sous le pli). */
.home-main>.bandeau~.verdict,.home-main>.panne-google~.verdict,.home-main>.ferie-refus~.verdict,.home-main>.avertir~.verdict{order:1}
.panne-google>.flash{margin:0}
/* T7-272 : « aucune » recherche n'est pas une bonne nouvelle : jamais dans la pastille verte ; « – » et « pour l'instant » sans couleur. */
.verdict h2 em.zero{color:var(--down-ink);background:var(--down-soft)}.verdict h2 em.neutre{color:var(--tx2);background:none;padding:0}
/* T7-100 : au téléphone, la demande d'avis sur UNE colonne : un champ par ligne, puis les boutons l'un sous l'autre, pleine largeur. */
@media (max-width:760px){.askgrid,.askgrid.deux{grid-template-columns:minmax(0,1fr)}.askgrid .askbtns{grid-column:1;flex-direction:column}.askgrid .askbtns .btn{width:100%;flex:none}}
.reqs-tete{margin:12px 0 0}
/* T7-128 : le champ « Une recherche que vos clients tapent » prend toute la largeur de sa carte (l'exemple se lit en entier), le bouton dessous ;
   chaque ligne porte sa courbe des 8 derniers lundis, comme chez TrendTrack. */
@media (min-width:421px){.ajout-rech .lienmail{flex-wrap:wrap}.ajout-rech .lienmail input{flex:1 1 100%;min-width:0}}
@media (min-width:761px){.kws .kw-head{grid-template-columns:72px minmax(0,1fr) minmax(0,200px) 116px 110px}.kws .kw-head.lecture{grid-template-columns:72px minmax(0,1fr) minmax(0,200px) 116px}
  .kwl .kw{grid-template-columns:72px minmax(0,1fr) minmax(0,200px) 116px}}
.kw-courbe{display:flex;align-items:center;min-width:0}.kw-courbe svg{width:110px;height:34px;display:block}
@media (max-width:760px){.kwl .kw-courbe{grid-column:2}}
/* T7-066 : les avis qui ont leur réponse en lignes fines dans un seul tableau (reference/app_table.png) ; filtres en pastilles en tête. */
.revs.dense{gap:0;border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden}
.revs.dense>.rev{border:0;border-radius:0;box-shadow:none;border-top:1px solid var(--line);padding:10px 16px;grid-template-columns:40px minmax(0,1fr) minmax(0,1.15fr);gap:4px 16px;align-items:center}
.revs.dense>.rev:first-child{border-top:0}.revs.dense>.rev:hover{background:var(--row)}
.revs.dense .rev-tile{width:40px;height:40px;font-size:16px;border-radius:8px}.revs.dense .rev-tile small{display:none}
.revs.dense .rev-text,.revs.dense .reply.pub p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px}
.revs.dense .reply.pub .eyebrow{display:none}
.avis-filtres{margin:0 0 12px}
@media (max-width:760px){.revs.dense>.rev{grid-template-columns:40px minmax(0,1fr);padding:10px 12px}.revs.dense .rev .reply{grid-column:2}}
/* Tour 9 (K29, DT8-1, DT8-5) : l'argent à l'écran. Le message d'un geste d'argent dans la carte d'abonnement (T7-228, T7-244), lisible sur le noir ;
   « Changer de formule » replié sous un bouton à trait (2 clics jusqu'à la confirmation) ; la formule en cours lue, sans lien ; un succès qui porte
   le geste suivant (« Résilier mon abonnement » après le retrait de la seule fiche). */
.flash.avec-geste{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}.flash.avec-geste span{flex:1 1 220px}.flash.avec-geste .btn{min-height:40px;flex:0 0 auto}
.plan>.flash{margin:0 0 12px}
.plan p.encours,.plan p.prevue{color:var(--tx)}.plan p.encours a,.plan p.prevue a{color:var(--tx)}
details.changer-formule{margin:8px 0 0}details.changer-formule>summary{list-style:none;display:flex;align-items:center;justify-content:center;min-height:40px;border-radius:8px;border:1px solid var(--line2);color:var(--tx);font-size:13px;font-weight:600;cursor:pointer}
details.changer-formule>summary::-webkit-details-marker{display:none}details.changer-formule>summary:hover{background:var(--row)}details.changer-formule[open]>summary{margin-bottom:10px}
.btn.actuelle{opacity:.55;cursor:default;pointer-events:none}
.plan .inscrit{font-family:var(--mono);font-size:12px;color:var(--up-ink);margin:0}
.plan .fine.doublon{text-align:left;color:var(--tx)}
.home-side .seance-accueil{text-align:left;margin:12px 0 0}.home-side .seance-accueil a{color:var(--tx2)}
.card.formule .boutons{margin:4px 0 10px}.card.formule .boutons .cta,.card.formule .boutons .btn{margin:0;min-height:40px}
.card.retrait .boutons form{margin:0}
/* Tour 9, écrans 2 partie 1 : panne Google d'une fiche dans la liste (T7-284), la chose « a changé son avis » et son « Vu » (K20). */
.cl-panne{grid-column:1/-1;position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0;color:var(--down-ink);background:var(--down-soft);border:1px solid #FB6461;border-left:4px solid #FB6461;border-radius:8px;padding:8px 12px;font-size:13px;font-weight:500;cursor:auto}
.cl-panne span{flex:1 1 220px;min-width:0}.cl-panne .btn{min-height:40px}
.boutons-tache{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.boutons-tache form{margin:0}.boutons-tache .btn{min-height:40px}
.then .row .boutons-tache{flex:none}
/* Tour 9, écrans 2 partie 3 (standard B2 : au téléphone, une seule colonne) : un tableau « libellé, valeur » (récapitulatif de la résiliation,
   étapes de la séance) met le libellé au-dessus de sa valeur. */
@media (max-width:760px){.table.recap tr{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:10px 0;border-bottom:1px solid var(--line)}.table.recap td{padding:0;border:0}.table.recap td:first-child{font-size:12px;color:var(--tx3)}.table.recap td:first-child b{font-weight:500}.table.recap tr:hover td{background:none}}
/* Tour 9, écrans 2 partie 3 : le champ du logo d'une agence (un champ de fichier) a l'allure d'un bouton de l'app (40 px, rayon 8), plus le gris
   du navigateur. Le bouton photo (.fichier) garde son champ invisible par-dessus le bouton lime. */
input[type=file]{font:inherit;font-size:13px;color:var(--tx2);max-width:100%}
input[type=file]::file-selector-button{font:inherit;font-size:13px;font-weight:600;min-height:40px;padding:0 14px;margin-right:10px;border:1px solid var(--line2);border-radius:8px;background:var(--card);color:var(--tx);cursor:pointer}