/* Composants des maquettes, limités au conteneur .mq.
   La première partie est tirée telle quelle de docs/maquettes/source/adherent.html (sélecteurs préfixés par .mq, liens rendus par des boutons) ;
   la seconde porte ce que les maquettes écrivaient en style en ligne, interdit ici par la politique de sécurité du contenu.
   Chaque écran repris d'après sa maquette est enveloppé dans <div class="mq"> ; les autres écrans gardent app.css. */
.mq { --pink: #f0457a; --pink2: #e8305a; --night: #17142b; --night2: #221e3d; --night3: #2d2850; --bg: #f4f4f9; --ink: #17142b; --ink2: #6b6884; --ink3: #9a97b0; --line: #ecebf3;
  display: flex; flex-direction: column; gap: 14px; font-size: 14px; line-height: 1.35; color: #17142b; }
.dark-page .mq { color: #fff; }
.mq button { border: 0; min-height: 0; box-shadow: none; background: none; padding: 0; margin: 0; font: inherit; color: inherit; text-align: inherit; width: auto; cursor: pointer; }
.mq p, .mq h1, .mq h2 { margin: 0; }
.mq small { font-size: 12px; }
.mq * { box-sizing:border-box;margin:0;padding:0; }
.mq .hdr { display:flex;align-items:center;gap:10px;padding:10px 20px 12px;flex:none; }
.mq .hdr h1 { font-size:23px;font-weight:700;flex:1;letter-spacing:-.3px; }
.mq .hb { display:flex; }
.mq .ha { display:flex;gap:8px;align-items:center; }
.mq .hbtn { width:40px;height:40px;border-radius:14px;background:#fff;display:grid;place-items:center;box-shadow:0 2px 8px rgba(23,20,43,.06);position:relative; }
.dark-page .mq .hbtn { background:var(--night2); }
.mq .hbtn em { position:absolute;top:8px;right:9px;width:9px;height:9px;border-radius:50%;background:var(--pink);border:2px solid #fff; }
.mq h2 { font-size:16px;font-weight:600;display:flex;justify-content:space-between;align-items:baseline;margin-top:4px; }
.mq h2 :is(a,button) { font-size:13px;font-weight:500;color:var(--pink); }
.mq .card { background:#fff;border-radius:18px;padding:14px;box-shadow:0 2px 10px rgba(23,20,43,.05); }
.dark-page .mq .card { background:var(--night2);box-shadow:none; }
.mq .nite { background:var(--night);color:#fff;border-radius:22px;padding:16px; }
.mq .nite2 { background:linear-gradient(140deg,#2f2757,#1b1736 60%);color:#fff;border-radius:22px;padding:16px;position:relative;overflow:hidden; }
.mq .btn { display:flex;align-items:center;justify-content:center;gap:10px;height:50px;border-radius:14px;background:linear-gradient(90deg,#ff5a8e,#e8305a);color:#fff;font-weight:600;font-size:15px;box-shadow:0 8px 18px rgba(232,48,90,.28); }
.mq .btn.ghost { background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(23,20,43,.06); }
.dark-page .mq .btn.ghost { background:var(--night2);color:#fff; }
.mq .btn.sm { height:38px;font-size:13px;border-radius:12px;padding:0 14px;box-shadow:none; }
.mq .btn.line { background:none;border:1.5px solid var(--pink);color:var(--pink);box-shadow:none; }
.mq .pills { display:flex;gap:8px;flex-wrap:nowrap;overflow:hidden; }
.mq .pills :is(a,button) { padding:8px 14px;border-radius:12px;background:#fff;font-size:12.5px;font-weight:500;color:var(--ink2);white-space:nowrap; }
.mq .pills :is(a,button).on { background:var(--pink);color:#fff; }
.dark-page .mq .pills :is(a,button) { background:var(--night2);color:#cfcbe6; }
.dark-page .mq .pills :is(a,button).on { background:var(--pink);color:#fff; }
.mq .pills.seg { background:#fff;border-radius:14px;padding:4px; }
.mq .pills.seg :is(a,button) { flex:1;text-align:center;background:none; }
.mq .pills.seg :is(a,button).on { background:var(--pink); }
.dark-page .mq .pills.seg { background:var(--night2); }
.mq .row { display:flex;align-items:center;gap:12px;padding:12px 14px;background:#fff;border-radius:16px;box-shadow:0 2px 10px rgba(23,20,43,.04); }
.dark-page .mq .row { background:var(--night2); }
.mq .rows { display:flex;flex-direction:column;gap:8px; }
.mq .ri { width:40px;height:40px;border-radius:12px;background:#f4f2fb;display:grid;place-items:center;flex:none;color:var(--ink); }
.dark-page .mq .ri { background:var(--night3);color:#fff; }
.mq .ri.p { background:#ffe7ef;color:var(--pink); }
.mq .ri.v { background:#ece7ff;color:#7c5ce0; }
.mq .ri.o { background:#fff1dc;color:#f08a1c; }
.mq .ri.g { background:#dff7f2;color:#12a08c; }
.mq .rt { flex:1;display:flex;flex-direction:column;min-width:0; }
.mq .rt b { font-weight:600;font-size:14px; }
.mq .rt small { color:var(--ink3);font-size:12px; }
.dark-page .mq .rt small { color:#a09cbd; }
.mq .rr { display:flex;align-items:center;gap:6px;color:var(--ink3);font-size:12px; }
.mq .bar { display:block;height:7px;border-radius:4px;background:#ecebf3;overflow:hidden; }
.mq .bar i { display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#ff5a8e,#e8305a); }
.dark-page .mq .bar, .mq .nite .bar, .mq .nite2 .bar { background:rgba(255,255,255,.14); }
.mq .grid2 { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.mq .grid3 { display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }
.mq .grid4 { display:grid;grid-template-columns:repeat(4,1fr);gap:8px; }
.mq .stat { background:#fff;border-radius:16px;padding:14px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 2px 10px rgba(23,20,43,.04); }
.mq .stat b { font-size:17px;font-weight:700; }
.mq .stat small { font-size:11.5px;color:var(--ink3); }
.dark-page .mq .stat, .mq .nite .stat { background:var(--night2);box-shadow:none; }
.dark-page .mq .stat small, .mq .nite .stat small { color:#a09cbd; }
.mq .av { display:inline-block;flex:none; }
.mq .av svg { display:block;width:100%;height:100%; }
.mq .ini { display:inline-grid;place-items:center;border-radius:50%;color:#fff;font-weight:600;flex:none; }
.mq .chip { display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:9px;font-size:11.5px;font-weight:600;background:#ffe7ef;color:var(--pink); }
.mq .chip.v { background:#ece7ff;color:#7c5ce0; }
.mq .chip.g { background:#dff7f2;color:#12a08c; }
.mq .chip.o { background:#fff1dc;color:#e07f12; }
.mq .chip.n { background:#f1f0f7;color:var(--ink2); }
.mq .chip.d { background:rgba(255,255,255,.12);color:#fff; }
.mq .muted { color:var(--ink3);font-size:12.5px; }
.dark-page .mq .muted, .mq .nite .muted, .mq .nite2 .muted { color:#b3afcf; }
.mq .xl { font-size:26px;font-weight:700;letter-spacing:-.4px;line-height:1.15; }
.mq .lg { font-size:18px;font-weight:700; }
.mq .fx { display:flex;align-items:center;gap:10px; }
.mq .fxb { display:flex;align-items:center;justify-content:space-between;gap:10px; }
.mq .col { display:flex;flex-direction:column;gap:8px; }
.mq .grow { flex:1;min-width:0; }
.mq .anim { display:block;width:100%;border-radius:18px;background:#17142b; }
.mq .media { position:relative; }
.mq .media .pl { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center; }
.mq .photo { border-radius:16px;min-height:90px;position:relative;overflow:hidden;background:linear-gradient(135deg,#3b2f6b,#17142b); }
.mq .photo:before { content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 26px),radial-gradient(circle at 80% 10%,rgba(240,69,122,.45),transparent 55%); }
.mq .photo.p1 { background:linear-gradient(135deg,#472450,#1b1736); }
.mq .photo.p2 { background:linear-gradient(135deg,#253a66,#17142b); }
.mq .photo.p3 { background:linear-gradient(135deg,#4b2a3c,#1d1936); }
.mq .photo i { position:absolute;left:10px;bottom:8px;font-style:normal;font-size:11px;color:#fff;opacity:.8; }
.mq table.sets { width:100%;border-collapse:separate;border-spacing:0 8px;font-size:14px; }
.mq table.sets th { font-weight:500;color:var(--ink3);font-size:12px;text-align:center; }
.mq table.sets td { text-align:center;padding:0; }
.mq table.sets td span { display:block;background:#f4f2fb;border-radius:10px;padding:9px 0;margin:0 4px;font-weight:600; }
.mq table.sets td.n { font-weight:600;width:34px; }
.mq table.sets td.l { color:var(--ink3);font-size:12px;width:76px; }
.mq table.sets tr.cur td span { background:#fff;box-shadow:inset 0 0 0 1.5px var(--pink); }
.mq .ck { width:22px;height:22px;border-radius:50%;border:2px solid #cfcce0;display:inline-grid;place-items:center; }
.mq .ck.on { background:var(--pink);border-color:var(--pink); }
.mq .tg { width:44px;height:26px;border-radius:13px;background:#d9d6e6;display:block;position:relative;flex:none; }
.mq .tg i { position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff; }
.mq .tg.on { background:var(--pink); }
.mq .tg.on i { left:21px; }
.mq .inp { background:#fff;border-radius:14px;height:50px;display:flex;align-items:center;gap:10px;padding:0 14px;color:var(--ink3);box-shadow:0 2px 8px rgba(23,20,43,.05);font-size:14px; }
.dark-page .mq .inp { background:var(--night2);color:#a09cbd; }
.mq .inp b { color:var(--ink);font-weight:500; }
.dark-page .mq .inp b { color:#fff; }
.mq .day { display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11.5px;color:var(--ink3);padding:7px 0;border-radius:12px;flex:1; }
.mq .day b { font-size:14px;color:var(--ink);font-weight:600; }
.mq .day.on { background:var(--pink);color:#fff; }
.mq .day.on b { color:#fff; }
.mq .dot { width:7px;height:7px;border-radius:50%;background:var(--pink);display:block; }
.mq .dot.x { background:transparent; }
.mq .badge { display:block; }
.mq .hero { background:var(--night);color:#fff;border-radius:0 0 26px 26px;margin:-58px -16px 0;padding:62px 16px 18px; }
.mq .spark { display:block;width:100%; }
.mq .center { text-align:center;align-items:center; }
.mq .fab { position:absolute;right:20px;bottom:98px;width:56px;height:56px;border-radius:18px;background:linear-gradient(135deg,#ff5a8e,#e8305a);display:grid;place-items:center;box-shadow:0 10px 22px rgba(232,48,90,.4); }
.mq .bubble { padding:11px 14px;border-radius:16px;max-width:82%;font-size:13.5px; }
.mq .bubble.ai { background:#fff;border-bottom-left-radius:5px;box-shadow:0 2px 8px rgba(23,20,43,.05); }
.mq .bubble.me { background:var(--pink);color:#fff;align-self:flex-end;border-bottom-right-radius:5px; }
.mq .foot { padding:10px 16px 22px;flex:none; }
.mq .hero .stat { background:var(--night2);box-shadow:none; }
.mq .hero .stat small { color:#a09cbd; }
.mq table.sets th { font-size:11px;white-space:nowrap; }

/* ---------- Ajouts propres à l'application ---------- */
.mq .hdr { padding: 0 4px; }
.mq .hb { padding: 4px; margin-left: -4px; }
.mq .hb svg { width: 22px; height: 22px; }
.mq .hbtn svg { width: 20px; height: 20px; }
.mq .ri svg { width: 20px; height: 20px; }
.mq .card { border: 0; margin: 0; }
.mq .card.fx, .mq .card.fxb { display: flex; }
.mq .card.col { display: flex; }
.mq .tiny { font-size: 11px; }
.mq .pills button[aria-pressed="true"] { background: var(--pink); color: #fff; }
.mq .pills.seg button[aria-pressed="true"] { background: var(--pink); }
.mq .bar { margin-top: 6px; }
.mq .row { width: 100%; }
.mq .btn { width: 100%; }
.mq .btn.sm { width: auto; }
.mq .btn svg { width: 20px; height: 20px; }
/* Trois états de récupération : au repos, presque prêt, prêt. */
.mq .s-rest { color: #f0457a; } .mq .s-soon { color: #f5a623; } .mq .s-ready { color: #2bb8a6; }
.mq .ri.s-rest { background: #f0457a22; } .mq .ri.s-soon { background: #f5a62322; } .mq .ri.s-ready { background: #2bb8a622; }
.mq .bar i.s-rest { background: #f0457a; } .mq .bar i.s-soon { background: #f5a623; } .mq .bar i.s-ready { background: #2bb8a6; }
.mq .dot.s-soon { background: #f5a623; } .mq .dot.s-ready { background: #2bb8a6; }
.mq .fig.carte .m.r2 { fill: #f0457a; } .mq .fig.carte .m.r1 { fill: #f5a623; } .mq .fig.carte .m.r0 { fill: #2bb8a6; }
/* Écran 15, Récupération */
.mq .recup-map { justify-content: center; gap: 24px; }
.mq .recup-map svg.carte { height: 270px; width: auto; display: block; }
.mq .recup-map .legend-col { gap: 12px; font-size: 12.5px; }
.mq .tip { align-items: flex-end; }
.mq .tip .who { width: 70px; flex: none; }
.mq .tip .who svg { width: 100%; height: auto; display: block; }
.mq .tip .card { border-bottom-left-radius: 6px; }
.mq .w0 { width: 4%; } .mq .w1 { width: 10%; } .mq .w2 { width: 20%; } .mq .w3 { width: 30%; } .mq .w4 { width: 40%; } .mq .w5 { width: 50%; }
.mq .w6 { width: 60%; } .mq .w7 { width: 70%; } .mq .w8 { width: 80%; } .mq .w9 { width: 90%; } .mq .w10 { width: 100%; }
/* Écran 06, Séances */
.mq .nite2 .title { margin: 6px 0 2px; }
.mq .nite2 .side { width: 76px; flex: none; }
.mq .nite2 .side svg, .mq .thumb svg { width: 100%; height: auto; display: block; }
.mq .pick { gap: 6px; text-align: center; }
.mq h2 .count { font-size: 13px; font-weight: 500; color: var(--pink); }
.mq .thumb { width: 58px; flex: none; }
.mq .row button.rt { text-align: left; }
.mq .hbtn.go { width: 36px; height: 36px; background: #f0457a; box-shadow: none; flex: none; }
.mq .hbtn.go svg { width: 16px; height: 16px; }
.mq .ini.coach { width: 44px; height: 44px; background: #7c5ce0; font-size: 17.6px; }
/* Écran 07, Nouvelle routine */
.mq .fx.wrap { flex-wrap: wrap; gap: 8px; }
.mq .chip.big { padding: 7px 12px; font-size: 12.5px; }
.mq label.inp { cursor: text; }
.mq .inp svg { width: 20px; height: 20px; flex: none; }
.mq .inp input { flex: 1; min-width: 0; border: 0; background: none; box-shadow: none; outline: 0; padding: 0; margin: 0; min-height: 0; height: 100%; font: inherit; font-weight: 500; color: var(--ink); }
.mq .inp:focus-within { box-shadow: inset 0 0 0 1.5px var(--pink); }
.mq .inp.search { height: 44px; }
.mq #chosen, .mq #reco { display: flex; flex-direction: column; gap: 14px; }
.mq #reco:empty { display: none; }
.mq .muted.up { margin-top: -8px; }
.mq .thumb.sm { width: 52px; height: 52px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: #17142b; }
.mq .vthumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.mq .row.wrap { flex-wrap: wrap; }
.mq .mini { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: var(--ink3); background: #f4f2fb; }
.mq .mini svg { width: 16px; height: 16px; }
.mq .hbtn.add { width: 34px; height: 34px; background: #ffe7ef; color: var(--pink); box-shadow: none; flex: none; }
.mq .fields { flex-basis: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mq .fields label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink3); margin: 0; }
.mq .fields input { height: 40px; border-radius: 10px; border: 0; background: #f4f2fb; text-align: center; font: inherit; font-weight: 600; color: var(--ink); min-height: 0; padding: 0; box-shadow: none; }
/* Sur téléphone, la barre d'onglets est fixée en bas : le bouton reste au-dessus d'elle. */
.mq .foot { padding: 0; position: sticky; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 2; }
@media (min-width: 1024px) { .mq .foot { bottom: 8px; } }
.mq .btn:disabled { opacity: .5; box-shadow: none; }
.mq .rt small.note { color: var(--ink2); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Rangs : couleurs des neuf rangs (Fonte … Légende), badges ---------- */
.mq .bar i.rk0, .mq .dot.rk0 { background: #6f7482; } .mq .bar i.rk1, .mq .dot.rk1 { background: #c67a2b; } .mq .bar i.rk2, .mq .dot.rk2 { background: #93a3b8; }
.mq .bar i.rk3, .mq .dot.rk3 { background: #e6b63c; } .mq .bar i.rk4, .mq .dot.rk4 { background: #4fc9bd; } .mq .bar i.rk5, .mq .dot.rk5 { background: #4f8dff; }
.mq .bar i.rk6, .mq .dot.rk6 { background: #e8305a; } .mq .bar i.rk7, .mq .dot.rk7 { background: #a66bf0; } .mq .bar i.rk8, .mq .dot.rk8 { background: linear-gradient(90deg, #ff9a3c, #ff3d9a, #9b5cff); }
.mq .bar i.rkn { background: #b9b6c9; } .mq .bar i.w-none { width: 0; }
.fig.carte .m.rk0 { fill: #6f7482; } .fig.carte .m.rk1 { fill: #c67a2b; } .fig.carte .m.rk2 { fill: #93a3b8; } .fig.carte .m.rk3 { fill: #e6b63c; } .fig.carte .m.rk4 { fill: #4fc9bd; }
.fig.carte .m.rk5 { fill: #4f8dff; } .fig.carte .m.rk6 { fill: #e8305a; } .fig.carte .m.rk7 { fill: #a66bf0; } .fig.carte .m.rk8 { fill: #ff3d9a; }
.mq .badge { display: block; flex: none; font-family: inherit; }
.mq .badge.b36 { width: 36px; height: 36px; } .mq .badge.b46 { width: 46px; height: 46px; } .mq .badge.b56 { width: 56px; height: 56px; }
.mq .badge.b76 { width: 76px; height: 76px; } .mq .badge.b96 { width: 96px; height: 96px; }
/* Écrans 14, 16, 17, 18 */
.mq .gapy { margin: 6px 0 4px; } .mq .mt4 { margin-top: 4px; } .mq .full { width: 100%; }
.mq .ic20, .mq .ic28 { display: grid; place-items: center; flex: none; } .mq .ic20 svg { width: 20px; height: 20px; } .mq .ic28 svg { width: 28px; height: 28px; }
.mq .ic20.hot { color: #ff6a3d; }
.mq .n20 { font-size: 20px; } .mq .n17 { font-size: 17px; }
.mq .bars { display: flex; align-items: flex-end; gap: 8px; height: 90px; margin: 12px 0 6px; }
.mq .bars span { flex: 1; border-radius: 7px; background: #d9d6e6; }
.dark-page .mq .bars span { background: #3a3560; }
.mq .bars span.on, .dark-page .mq .bars span.on { background: #f0457a; }
.mq .bars .h1 { height: 10%; } .mq .bars .h2 { height: 20%; } .mq .bars .h3 { height: 30%; } .mq .bars .h4 { height: 40%; } .mq .bars .h5 { height: 50%; }
.mq .bars .h6 { height: 60%; } .mq .bars .h7 { height: 70%; } .mq .bars .h8 { height: 80%; } .mq .bars .h9 { height: 90%; } .mq .bars .h10 { height: 100%; }
.mq .maps { justify-content: center; gap: 10px; }
.mq .maps svg.carte { height: 210px; width: auto; display: block; filter: none; }
.mq .maps .legend-col { gap: 8px; font-size: 12px; }
.mq .w120 { width: 120px; } .mq .w80 { width: 80px; flex: none; font-size: 12.5px; } .mq .w24 { width: 24px; text-align: right; }
.mq .bcard { gap: 3px; padding: 12px 6px; } .mq .bcard b { font-size: 12.5px; } .mq .bcard small { font-size: 11px; line-height: 1.25; }
.mq .rankhero { gap: 4px; background: linear-gradient(160deg, #2f3a55, #221e3d); color: #fff; }
.mq .rankhero .full { margin-top: 8px; }
.mq .ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 6px; }
.mq .ladder .col { gap: 2px; } .mq .ladder small { font-size: 11.5px; color: #a09cbd; }
.mq .ladder .dim { opacity: .45; } .mq .ladder .cur small { color: inherit; font-weight: 600; }
.mq .pills { overflow-x: auto; scrollbar-width: none; }
.mq .pickrow select { border: 0; background: none; font: inherit; font-weight: 600; font-size: 14px; color: inherit; padding: 0; min-height: 0; width: 100%; box-shadow: none; }
.mq .hbtn.soft { background: #f4f2fb; box-shadow: none; font-size: 20px; } .mq .hbtn.pinky { background: #ffe7ef; color: var(--pink); box-shadow: none; }
.mq .xl small { font-size: 14px; font-weight: 500; }
.mq .result { gap: 4px; padding: 22px 16px; } .mq .result .chip { margin-top: 6px; }
.mq .who60 { width: 60px; flex: none; } .mq .who60 svg { width: 100%; height: auto; display: block; }
.mq .muted b { color: var(--ink); }
@keyframes rank-pop { 0% { transform: scale(.3) rotate(-18deg); opacity: 0; } 60% { transform: scale(1.15) rotate(4deg); opacity: 1; } 100% { transform: none; } }
.mq .pop { animation: rank-pop .6s cubic-bezier(.2, .9, .3, 1.2) both; }
@media (prefers-reduced-motion: reduce) { .mq .pop { animation: none; } }
.mq .xl { white-space: nowrap; }
.mq .stat { border: 0; }
.mq .hbtn { flex: none; }
.mq .grid2 > *, .mq .grid3 > * { min-width: 0; }
.mq .chip { border: 0; }

/* Écran 30, Profil */
.mq .hero.flat { margin: -12px -16px 0; padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.mq .hero h1 { font-size: 23px; font-weight: 700; }
.mq .hbtn.dk { background: var(--night2); color: #fff; box-shadow: none; }
.mq .av.big { width: 68px; height: 68px; border-radius: 50%; overflow: hidden; }
.mq .rankline { margin-top: 6px; gap: 8px; }
.mq .badge.b24 { width: 24px; height: 24px; }
.mq .rr svg { width: 18px; height: 18px; }
.mq .btn.ghost.soft, .mq .btn.soft { background: #f4f2fb; color: var(--ink); box-shadow: none; }
/* Écrans 31 (Mon corps) et 20 (Calendrier) */
.mq .fields.four { grid-template-columns: repeat(2, 1fr); }
.mq form.card { display: flex; }
.mq .cap { text-transform: capitalize; }
.mq .hbtn.flip svg { transform: scaleX(-1); }
.mq .hbtn:disabled { opacity: .35; }
.mq .cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px 0; margin-top: 12px; text-align: center; font-size: 13px; }
.mq .cal span { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; border-radius: 12px; }
.mq .cal span.done { font-weight: 600; }
.mq .cal span.today { background: var(--pink); color: #fff; }
.mq .cal span.today .dot { background: #fff; }
.mq .cal span.today .dot.x { background: transparent; }
.mq .home-recup .mini-map svg.carte { height: 130px; width: auto; display: block; filter: none; }
.mq .home-recup .dot.s-rest { background: #f0457a; }
.mq .more { color: var(--pink); font-size: 13px; font-weight: 500; }
.mq .bilan-top { gap: 4px; }
.mq .who120 { width: 120px; display: block; } .mq .who120 svg { width: 100%; height: auto; display: block; }
.mq .foot.static { position: static; }
.mq .chip.n { white-space: nowrap; }
/* Écran 33, Notifications */
.mq .rr.col { align-items: flex-end; gap: 6px; }
.mq .switchrow { font-size: 13.5px; cursor: pointer; }
.mq .tgl { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: 13px; background: #d9d6e6; position: relative; flex: none; margin: 0; padding: 0; min-height: 0; border: 0; cursor: pointer; }
.mq .tgl::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; }
.mq .tgl:checked { background: var(--pink); } .mq .tgl:checked::after { left: 21px; }
/* Coach : mon coach, trouver un coach, réserver, espace coach */
.mq .ini.coach.big { width: 56px; height: 56px; font-size: 22px; }
.mq form.inp { display: flex; }
.mq .inp select { flex: 1; border: 0; background: none; font: inherit; color: var(--ink); min-height: 0; padding: 0; box-shadow: none; }
.mq .inp input[type="datetime-local"] { color: var(--ink); }
.mq .row.wrap .btn.sm { height: 34px; }
/* Social : fil, classement, amis, événements, bureau du Club Manager */
.mq .ini.gym { width: 44px; height: 44px; background: #17142b; font-size: 17.6px; }
.mq .post { gap: 10px; }
.mq .ptext { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.mq .pphoto { width: 100%; border-radius: 14px; display: block; max-height: 420px; object-fit: cover; }
.mq .inp.tall { height: auto; padding: 10px 14px; align-items: flex-start; }
.mq .inp textarea { flex: 1; border: 0; background: none; box-shadow: none; outline: 0; padding: 0; margin: 0; min-height: 0; font: inherit; color: var(--ink); resize: vertical; width: 100%; }
.mq .inp.slim { height: 38px; }
.mq .filebtn { cursor: pointer; }
.mq .place { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; background: #f4f2fb; flex: none; }
.mq .place.p1 { background: #e6b63c; color: #fff; } .mq .place.p2 { background: #93a3b8; color: #fff; } .mq .place.p3 { background: #c67a2b; color: #fff; }
.mq .row.me { box-shadow: inset 0 0 0 1.5px var(--pink); }
.mq .rr b { color: var(--ink); font-size: 14px; }
/* Écran 13, Coach IA */
.mq .bubbles { gap: 10px; }
.mq .bubble { white-space: pre-wrap; overflow-wrap: anywhere; }
.mq .bubble.ai { align-self: flex-start; }
.mq .proposal { gap: 8px; font-size: 13px; }
.mq form.foot { display: flex; }
.mq form.foot { background: var(--bg, #f4f4f9); padding: 8px 0; border-radius: 14px; }
.mq .nowrap { white-space: nowrap; }
/* Écrans 01 à 03 : bienvenue, création de compte, profil rapide */
.mq.welcome { min-height: calc(100vh - 80px); justify-content: center; gap: 18px; }
.mq .wlogo { align-self: center; width: 172px; height: auto; }
.mq .whero { align-self: center; width: 230px; max-width: 70%; }
.mq .whero svg { width: 100%; height: auto; display: block; }
.mq .btn:disabled { opacity: .55; box-shadow: none; }
.mq .soon { font-size: 11px; font-weight: 500; opacity: .8; }
.mq button.inline { display: inline; font-weight: 700; color: inherit; text-decoration: underline; }
.mq .more.center { align-self: center; }
.mq .inp input[type="date"] { color: var(--ink); }
.mq .days { gap: 6px; }
.mq .days .day { background: #fff; box-shadow: 0 2px 8px rgba(23, 20, 43, .05); }
.mq .days .day.on { background: var(--pink); }
.mq .row[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--pink); }
.mq .ck svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 3; }
.mq .fx.muted > svg { width: 16px; height: 16px; flex: none; }
/* Écrans 10 à 12 : catalogue, fiche d'exercice, fiche de machine */
.mq .thumb.sm img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mq .thumb.sm > svg { width: 22px; height: 22px; color: #fff; }
.mq .media video { display: block; width: 100%; border-radius: 18px; background: #17142b; }
.mq .small-maps { align-items: center; }
.mq .small-maps svg.carte { height: 150px; }
.mq .dot.soft { background: #f7a8bd; }
.mq .ini.num { width: 26px; height: 26px; font-size: 13px; background: var(--pink); }
.mq .step { align-items: flex-start; }
.mq .xmark { font-style: normal; font-weight: 700; color: var(--pink); width: 16px; text-align: center; flex: none; }
.mq .mphoto.wide, .mq .photo.wide { display: block; width: 100%; height: 190px; object-fit: cover; border-radius: 18px; }
.mq .fig.carte .m.hit { fill: #f0457a; } .mq .fig.carte .m.hit2 { fill: #f7a8bd; }
/* Écran 21, Ma salle */
.mq .gymtop { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.mq .gphoto { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: 16px; min-height: 0; }
.mq .glogo { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; flex: none; background: var(--pink); font-size: 18px; }
.mq .nite .stat b { color: #fff; }
.mq .pre { white-space: pre-wrap; }
.mq .rt a { color: inherit; text-decoration: none; }
.mq details.hoursrow { display: block; }
.mq details.hoursrow summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.mq details.hoursrow summary::-webkit-details-marker { display: none; }
.mq .hours { width: 100%; margin-top: 10px; font-size: 13px; border-collapse: collapse; }
.mq .hours th { text-align: left; font-weight: 500; color: var(--ink3); padding: 4px 0; }
.mq .hours td { text-align: right; padding: 4px 0; }
.mq .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mq .gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; }
.mq .gcard { display: flex; flex-direction: column; gap: 10px; text-align: left; width: 100%; padding: 10px; }
.mq .gcard .gphoto { height: 110px; }

/* ---------- Version ordinateur (maquettes desktop) ---------- */
@media (min-width: 1024px) {
  /* Les écrans des maquettes passent sur deux colonnes : les titres et les onglets restent sur toute la largeur. */
  .mq { display: block; column-count: 2; column-gap: 20px; font-size: 13.5px; }
  .mq > * { break-inside: avoid; margin-bottom: 16px; }
  .mq > .hdr, .mq > .pills, .mq > .foot, .mq > .tiny, .mq > .hero, .mq > header { column-span: all; }
  .mq > h2 { break-after: avoid; margin-top: 0; }
  .mq > .rows, .mq > .grid2, .mq > .grid3 { break-inside: avoid; }
  .mq .hdr h1 { font-size: 24px; letter-spacing: -.4px; }
  .mq .card { padding: 18px; }
  .mq .row { background: #f8f7fc; box-shadow: none; }
  .mq .rows > .row, .mq > .row { background: #fff; box-shadow: 0 2px 10px rgba(23, 20, 43, .04); }
  .mq .stat { box-shadow: none; }
  .mq .btn { height: 44px; padding: 0 18px; font-size: 14px; width: auto; }
  .mq .foot .btn, .mq .btn.wide { width: 100%; }
  /* Écrans à une seule colonne : formulaires d'arrivée, discussion, bilan. */
  form.mq, .mq.welcome, .mq.chat, .mq.single { column-count: 1; max-width: 520px; margin: 0 auto; }
  .mq.welcome { min-height: 80vh; }
  .mq .hero.flat { margin: 0 0 16px; border-radius: 22px; padding: 22px; }
}

/* Téléphone : les bandeaux pleine largeur s'arrêtent au bord de l'écran (main a 14 px de marge), et un champ ne déclenche pas le zoom d'iOS (16 px au moins). */
@media (max-width: 1023px) {
  main .mq .hero, main .mq .hero.flat { margin-left: -14px; margin-right: -14px; }
  input, select, textarea { font-size: 16px !important; }
}

/* Coach IA : barre de la conversation ouverte et liste des conversations. */
.mq .convbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 2px 8px rgba(23,20,43,.05); font-size: 13px; }
.mq .convbar b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq .convbar .grow { min-width: 0; }
.mq .convbar small { color: #8b879c; }
.mq .convbar button.chip, .mq .hdr .ha { cursor: pointer; }
.mq .convbar button.chip { border: 0; font: inherit; font-size: 12px; font-weight: 600; }
.mq .hdr .ha { display: flex; gap: 6px; }
.mq .row.conv .rt { min-width: 0; }
.mq .row.conv .rt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Inscription : choix du type de compte (Adhérent, Coach, Club Manager). */
.mq .actype { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mq .actype legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.mq .actype label { position: relative; display: block; cursor: pointer; }
.mq .actype input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.mq .actype span { display: grid; place-items: center; min-height: 46px; padding: 6px; border-radius: 14px; background: #fff; border: 2px solid transparent; font-size: 13px; font-weight: 600; text-align: center; box-shadow: 0 2px 8px rgba(23,20,43,.05); }
.mq .actype input:checked + span { border-color: var(--pink); color: var(--pink); }
.mq .actype input:focus-visible + span { outline: 2px solid var(--pink); outline-offset: 2px; }
.mq .inp.area { align-items: flex-start; height: auto; padding-top: 10px; padding-bottom: 10px; }
.mq .inp.area textarea { flex: 1; border: 0; background: none; font: inherit; resize: vertical; min-height: 64px; outline: 0; padding: 0; box-shadow: none; }
.mq [hidden] { display: none !important; }

/* ---------- Partenaires et parrainage (cahier des charges, § 6 bis ; maquettes partenaires/mobile p01 à p08, p17, p18) ---------- */
.pbadge { width: 16px; height: 16px; flex: none; vertical-align: -2px; display: inline-block; }
.pbadge .pb-bg { fill: #7c5ce0; } .pbadge.ege .pb-bg { fill: #f08a1c; }
.pbadge .pb-ok { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mq .chip .pbadge { width: 14px; height: 14px; vertical-align: -3px; }
.mq .nite2 .side.wide { width: 104px; }
.mq .xl.wrap { white-space: normal; margin: 8px 0 6px; }
.mq .codecard { border: 2px dashed #f7b9cc; text-align: center; padding: 16px; }
.mq .bigcode { font-size: 28px; font-weight: 700; letter-spacing: 3px; margin: 4px 0 10px; overflow-wrap: anywhere; }
.mq .btn.sm svg { width: 16px; height: 16px; }
.mq .row.note { align-items: flex-start; box-shadow: none; background: #ece7ff; }
.mq .row.note.o { background: #fff1dc; }
.mq .row.note .ni { color: #7c5ce0; margin-top: 1px; display: flex; } .mq .row.note.o .ni { color: #e07f12; }
.mq .row.note .ni svg { width: 18px; height: 18px; }
.mq .row.note .nt { font-size: 12.5px; line-height: 1.45; }
.mq .row.top, .mq .fx.top { align-items: flex-start; } .mq .row.top small { line-height: 1.45; }
.mq .okmark { color: #12a08c; display: flex; } .mq .okmark svg { width: 18px; height: 18px; stroke-width: 2.4; }
.mq .tiers .stat b { font-size: 20px; } .mq .tiers .stat.on { box-shadow: inset 0 0 0 2px var(--pink); } .mq .tiers .stat.on b { color: var(--pink); }
.mq button.row { border: 0; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.mq button.row:disabled { opacity: .55; cursor: default; }
.mq .row.dk { background: var(--night); color: #fff; } .mq .row.dk .ri { background: rgba(255,255,255,.12); color: #fff; } .mq .row.dk small { color: #b3afcf; }
.mq .row.dk > svg { width: 18px; height: 18px; stroke: #fff; flex: none; }
.mq .ini.pin { width: 40px; height: 40px; font-size: 16px; } .mq .ini.pin.big { width: 48px; height: 48px; font-size: 19px; }
.mq .ini.c0 { background: #2bb8a6; } .mq .ini.c1 { background: #4f8dff; } .mq .ini.c2 { background: #a66bf0; } .mq .ini.c3 { background: #f08a1c; } .mq .ini.c4 { background: #e8305a; } .mq .ini.cx { background: #c9c6d8; }
.mq .lab { gap: 5px; } .mq .lab .inp input { color: var(--ink); }
.mq .motiv { display: flex; flex-direction: column; gap: 6px; }
.mq .motiv textarea { border: 0; background: none; box-shadow: none; outline: 0; padding: 0; margin: 0; font: inherit; font-size: 13.5px; line-height: 1.5; color: var(--ink); resize: vertical; min-height: 84px; width: 100%; }
.mq .motiv .muted { text-align: right; }
.mq .ckbox { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; min-height: 0; padding: 0; margin: 0; border-radius: 50%; border: 2px solid #cfcce0; background: #fff; flex: none; box-shadow: none; cursor: pointer; }
.mq .ckbox:checked { background: #fff; border-color: var(--pink); box-shadow: inset 0 0 0 5px var(--pink); }
.mq button.chip { cursor: pointer; font-family: inherit; }
.mq .sentcard { padding: 22px 16px; gap: 6px; } .mq .sentart { width: 130px; display: block; } .mq .sentart svg { width: 100%; height: auto; display: block; }
.mq .steps { gap: 14px; } .mq .steps .ck svg { width: 13px; height: 13px; stroke: #fff; stroke-width: 3; } .mq .steps .ck.cur { border-color: var(--pink); } .mq .steps .off { color: var(--ink3); }
.mq .phero .hb { color: #fff; background: none; border: 0; padding: 0; display: flex; } .mq .phero .stat svg { width: 18px; height: 18px; color: #a09cbd; } .mq .phero .muted { color: #b3afcf; }
.mq progress.pbar { width: 100%; height: 7px; border: 0; border-radius: 4px; overflow: hidden; background: #ecebf3; appearance: none; -webkit-appearance: none; }
.mq progress.pbar::-webkit-progress-bar { background: #ecebf3; } .mq progress.pbar::-webkit-progress-value { background: linear-gradient(90deg,#ff5a8e,#e8305a); border-radius: 4px; } .mq progress.pbar::-moz-progress-bar { background: #e8305a; }
.mq .spark { display: block; width: 100%; height: 60px; margin: 8px 0 4px; } .mq .spark .sp-line { fill: none; stroke: var(--pink); stroke-width: 2; vector-effect: non-scaling-stroke; } .mq .spark .sp-area { fill: #ffe7ef; }
.mq .tiles .row { padding: 12px 10px; gap: 10px; } .mq .tiles .rt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq .pills.scroll { overflow-x: auto; scrollbar-width: none; } .mq .pills.scroll::-webkit-scrollbar { display: none; }
.mq .solde { font-size: 34px; margin: 2px 0 8px; }
.mq .months { padding: 6px 14px; } .mq .months > .fxb { padding: 11px 0; } .mq .months > .fxb + .fxb { border-top: 1px solid #ecebf3; } .mq .months .amt { min-width: 66px; text-align: right; }
.mq .reflink { overflow-wrap: anywhere; }
.mq .kit a.card { padding: 10px; gap: 8px; text-decoration: none; color: inherit; }
.mq .kthumb { height: 92px; border-radius: 12px; background: var(--night); display: grid; place-items: center; overflow: hidden; padding: 10px; } .mq .kthumb.light { background: #f4f2fb; }
.mq .kthumb img { max-width: 100%; max-height: 72px; display: block; } .mq .kdl { color: var(--pink); display: flex; } .mq .kdl svg { width: 18px; height: 18px; }
.mq .inp.ok { box-shadow: inset 0 0 0 2px #2bb8a6; } .mq .inp.ko { box-shadow: inset 0 0 0 2px #f5a623; }
.mq .applied { gap: 10px; background: linear-gradient(140deg,#3b2f6b,#221e3d); color: #fff; } .mq .applied .chip { align-self: flex-start; } .mq .applied .muted { color: #b3afcf; } .mq .applied .xl { white-space: normal; }

/* ---------- Créateurs (maquettes partenaires/mobile p09 à p16) ---------- */
.mq .chip.gold { background: linear-gradient(90deg, #ff9a3c, #f0457a); color: #fff; align-self: flex-start; }
.mq .chip svg { width: 13px; height: 13px; }
.mq .chip.gold svg { fill: #fff; stroke: none; }
.mq .ini.pin.huge { width: 64px; height: 64px; font-size: 26px; } .mq .ini.pin.mini { width: 28px; height: 28px; font-size: 12px; }
.mq button.nite2 { border: 0; font: inherit; text-align: left; cursor: pointer; width: 100%; }
.mq .egcard .col { gap: 6px; align-items: flex-start; } .mq .egcard .chip.d svg { width: 12px; height: 12px; stroke: #fff; }
.mq form.inp.search svg { width: 18px; height: 18px; flex: none; }
.mq .row > svg.chev, .mq .drow summary > svg.chev { width: 18px; height: 18px; color: var(--ink3); flex: none; }
.mq .thumbtn { border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex: none; }
.mq .row button.rt { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.mq .chero { align-items: stretch; } .mq .chero .hb { color: #fff; background: none; border: 0; padding: 0; display: flex; cursor: pointer; }
.mq .chero .hb svg { width: 22px; height: 22px; } .mq .chero .muted { color: #b3afcf; } .mq .chero .bio { font-size: 13px; text-align: center; line-height: 1.45; }
.mq .chero .fx.wrap { flex-wrap: wrap; justify-content: center; } .mq .chero a.chip { text-decoration: none; }
.mq .media.dark { background: linear-gradient(140deg, #2f2757, #17142b 70%); border-radius: 18px; min-height: 150px; display: grid; place-items: center; overflow: hidden; }
.mq .progart .art { width: 120px; display: block; } .mq .progart .art svg { width: 100%; height: auto; display: block; }
.mq .progart .hb { position: absolute; left: 12px; top: 12px; color: #fff; background: rgba(255,255,255,.14); border: 0; border-radius: 12px; width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer; }
.mq .progart .chip { position: absolute; left: 12px; bottom: 12px; }
.mq details.drow { display: block; padding: 0; } .mq details.drow summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; }
.mq details.drow summary::-webkit-details-marker { display: none; } .mq details.drow[open] summary > svg.chev { transform: rotate(90deg); }
.mq .exlist { list-style: none; margin: 0; padding: 0 14px 12px; display: flex; flex-direction: column; gap: 6px; }
.mq .exlist li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; } .mq .exlist li b { font-weight: 500; } .mq .exlist li span { color: var(--ink3); white-space: nowrap; }
.mq .ds .stat { background: rgba(255,255,255,.1); box-shadow: none; margin-top: 12px; } .mq .ds .stat small { color: #b3afcf; }
.mq .stack .ini + .ini { margin-left: -8px; box-shadow: 0 0 0 2px #fff; }
.mq .podium { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; align-items: end; text-align: center; }
.mq .podium .pod { gap: 4px; font-size: 12.5px; } .mq .podium .pod b { overflow-wrap: anywhere; }
.mq .podium .step { display: grid; place-items: center; width: 100%; border-radius: 12px 12px 0 0; background: rgba(255,255,255,.1); font-weight: 700; font-size: 18px; height: 44px; margin-top: 4px; }
.mq .podium .p1 .step { height: 64px; background: linear-gradient(180deg, rgba(240,69,122,.55), rgba(240,69,122,.15)); } .mq .podium .p3 .step { height: 34px; }
.mq .row .rk { width: 18px; text-align: center; flex: none; }
.mq h2 .count { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }

/* ---------- Kit du partenaire : QR code, stories et bannières (maquette p08) ---------- */
.mq .qrcard { gap: 14px; align-items: flex-start; }
.mq .qrbox { width: 112px; flex: none; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px #ecebf3; } .mq .qrbox svg { display: block; width: 100%; height: auto; }
.mq .qrcard .btn.sm { width: 100%; }
.mq .kit button.card { border: 0; font: inherit; text-align: left; color: inherit; cursor: pointer; padding: 10px; gap: 8px; }
.mq .kthumb.story { height: 150px; padding: 6px; } .mq .kthumb.story img, .mq .kthumb.banniere img { max-height: 100%; border-radius: 6px; }
.mq .kthumb.banniere { padding: 6px; }

/* ---------- Page de l'Égérie (maquette p14), sur fond sombre ---------- */
.mq .ini.pin.giant { width: 84px; height: 84px; font-size: 34px; background: linear-gradient(135deg, #ff9a3c, #f0457a 55%, #9b5cff); }
.mq .egbar .hb { color: #fff; background: none; border: 0; padding: 0; display: flex; cursor: pointer; } .mq .egbar .hb svg { width: 22px; height: 22px; }
.mq .eghead { gap: 14px; } .mq .eghead .col { gap: 4px; align-items: flex-start; min-width: 0; }
.mq .egpage .bio { font-size: 13.5px; line-height: 1.5; color: #d9d6ea; }
.mq .egpage a.chip { text-decoration: none; }
.mq .sigcard { gap: 10px; } .mq .sigcard .progart { width: 100%; border: 0; cursor: pointer; min-height: 170px; }
.mq .sigcard button.rt, .mq .card button.rt { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.mq .datebadge { flex-direction: column; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; gap: 0; }
.mq .datebadge b { font-size: 16px; line-height: 1; } .mq .datebadge small { font-size: 9.5px; font-weight: 600; letter-spacing: .04em; }
.dark-page .mq .more { color: #ff8fb0; } .dark-page .mq button.row, .dark-page .mq .row button.rt { color: #fff; }
.dark-page .mq .row > svg.chev { color: #a09cbd; }
/* Mode maison : matériel coché, avec sa précision (charges, résistance, type de banc) repliée sous la ligne. */
.mq .eq { display: flex; flex-direction: column; gap: 8px; }
.mq .eqd { display: flex; flex-direction: column; gap: 8px; padding: 0 4px 6px; }
.mq .eqd .pills { flex-wrap: wrap; }

/* Encouragements du fil d'actualité (A-84) : un bouton « Bravo » et le nombre reçu. */
.mq .cheer { display: flex; align-items: center; gap: 10px; color: var(--ink2); font-size: 13px; }
.mq .cheer > svg { width: 16px; height: 16px; }
.mq .cheer-b { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); font-weight: 600; }
.mq .cheer-b svg { width: 16px; height: 16px; }
.mq .cheer-b[aria-pressed="true"] { border-color: var(--pink); color: var(--pink2); background: rgba(240, 69, 122, .12); }
.mq .cheer-b:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

/* Écrans d'arrivée (A-92) : connexion, création de compte, mot de passe. Mêmes codes que le reste de l'application : fond clair,
   carte blanche à coins de 18 px, champs et boutons de 50 px à coins de 14 px, bouton rond de retour. Le contenu est centré dans la hauteur. */
.mq.authp { display: flex; flex-direction: column; width: 100%; max-width: 440px; margin: 0 auto; min-height: calc(100vh - 80px); min-height: calc(100dvh - 80px); justify-content: center; gap: 16px; padding: 12px 0 24px; column-count: 1; }
.mq.authp .atop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mq.authp .atop .aside { width: 40px; height: 40px; flex: none; }
.mq.authp .atop .wlogo { width: 140px; }
.mq.authp .ahead { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.mq.authp .ahead h1 { margin: 0; }
.mq.authp .ahead p { margin: 0; max-width: 34ch; }
.mq.authp .amasc { width: 128px; }
.mq.authp .amasc svg { width: 100%; height: auto; display: block; }
.mq.authp .apanel { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
/* Dans la carte blanche, les champs prennent le gris clair des surfaces secondaires de l'application. */
.mq.authp .apanel .inp, .mq.authp .apanel .actype span { background: #f4f2fb; box-shadow: none; }
.mq.authp .inp { border: 1.5px solid transparent; }
.mq.authp .inp:focus-within { border-color: var(--pink); background: #fff; }
.mq.authp .inp.area { height: auto; padding: 12px 14px; align-items: flex-start; }
.mq.authp .inp input::placeholder, .mq.authp .inp textarea::placeholder { color: var(--ink2); opacity: 1; }
.mq.authp .apanel .card { background: #f4f2fb; box-shadow: none; border-radius: 14px; }
.mq.authp .fx.muted svg { width: 16px; height: 16px; flex: none; }
.mq.authp .bar { align-self: center; width: 120px; }
/* Le texte secondaire est un cran plus foncé qu'ailleurs : il porte ici des consignes et le lien vers l'autre écran. */
.mq.authp .muted { color: var(--ink2); }
.mq.authp button.inline { color: var(--ink); }
@media (min-width: 1024px) { .mq.authp { min-height: calc(100vh - 40px); } }
/* Sans menu latéral (membre non connecté), l'écran d'arrivée est centré dans la fenêtre. */
main:has(> .mq.authp), main:has(> .mq.welcome) { margin-left: auto; margin-right: auto; }
/* Le fond sombre de l'écran de bienvenue vaut aussi sur les pages qui ne colorent pas le corps toutes seules. */
body:has(main > .mq.welcome) { background: #17142b; }
/* Un choix indisponible dans un sélecteur se voit (duels : la progression sans historique). */
.mq .pills button:disabled { opacity: .45; cursor: default; }

/* Minuteur guidé (A-67, § 6 ter.6) : réglages, puis affichage en grand pendant la séance. */
.mq .tfields { gap: 10px; }
.mq .tfield { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--ink2); font-weight: 600; }
.mq .tfield input { height: 50px; border-radius: 14px; border: 0; background: #fff; box-shadow: 0 2px 8px rgba(23, 20, 43, .05); text-align: center; font: inherit; font-size: 18px; font-weight: 700; color: var(--ink); min-height: 0; padding: 0 6px; width: 100%; }
.mq .ri.v, .mq .ri.o { font-weight: 700; }
.mq.timerun { min-height: calc(100vh - 220px); min-height: calc(100dvh - 220px); justify-content: center; gap: 16px; text-align: center; }
.mq.timerun .trtop { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mq.timerun .trname { font-size: 30px; font-weight: 800; letter-spacing: -.4px; line-height: 1.15; overflow-wrap: anywhere; }
.mq.timerun .trclock { font-size: 96px; font-weight: 800; letter-spacing: -2px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--pink); }
.mq.timerun.repos .trclock { color: var(--ink2); }
.mq.timerun .pbar { width: 100%; height: 10px; }
.mq.timerun .trbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mq.timerun .btn.ghost { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(23, 20, 43, .06); }
.mq.timerun .btn.soft { background: #f4f2fb; color: var(--ink2); box-shadow: none; }

/* Messagerie coach–adhérent (A-67, § 6 ter.10) : l'heure sous chaque message. */
.mq .bubble .btime { display: block; margin-top: 4px; font-size: 10.5px; opacity: .7; }

/* Photos de progression (A-83) : grille de vignettes et comparaison côte à côte. */
.mq .plist { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--ink2); font-size: 13px; }
.mq .ppcheck { gap: 10px; align-items: flex-start; font-size: 13px; }
.mq .ppcheck input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--pink); }
.mq .ppgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mq .ppitem { display: flex; flex-direction: column; gap: 6px; }
.mq .ppitem small { font-size: 11px; color: var(--ink2); line-height: 1.3; }
.mq .ppthumb { display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: #ecebf3; border: 3px solid transparent; }
.mq .ppitem.on .ppthumb { border-color: var(--pink); }
.mq .ppthumb:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.mq .ppthumb img, .mq .ppduo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mq .ppduo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mq .ppduo figure { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.mq .ppduo img { aspect-ratio: 3 / 4; border-radius: 14px; background: #ecebf3; }
.mq .ppduo figcaption { font-size: 13px; font-weight: 600; text-align: center; }
.mq .ppduo figcaption small { display: block; font-weight: 400; color: var(--ink2); }
.mq details.card summary { cursor: pointer; }
@media (min-width: 700px) { .mq .ppgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Le champ de fichier est masqué à l'œil mais reste atteignable au clavier : c'est son libellé qui sert de bouton. */
.mq .ppfile { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.mq .filebtn:focus-within { outline: 2px solid var(--pink); outline-offset: 2px; }