rickub
judu/ex-egopublic Fork
⑂ dbea23f
Branches
main
Tags
v0.3.1 v0.3.2 v0.4.0 v0.5.0 v0.5.1 View all branches → View all tags →
Commits
⬇ Clone ▾
git clone https://git.rickub.com/judu/ex-ego.git
git clone ssh://git@rickub.com/judu/ex-ego.git

Host key fingerprint (ed25519): SHA256:iycHnxEyq0Q7uyVpB7JlznP0G7JrTPXLYRcAU5CSLhc — verify it before your first connect.

Download ZIP

refactor(css): font-size en rem — la taille de police du navigateur est respectéeUnverified

Toutes les tailles de texte de style.css passent de px en rem (÷16, base
100 % inchangée) : le réglage « taille de police par défaut » du
navigateur s'applique enfin. Les px restent légitimes pour bordures,
ombres et cibles tactiles (min-height 44px, WCAG 2.5.8 en px CSS).
Julien Durillon committed 2026-09-01T17:38:27+02:00 Browse files
dbea23f parent: aa1bb1f
modified assets/style.css +90 -90
@@ -116,7 +116,7 @@ body {
116116 background: var(--color-surface);
117117 color: var(--color-text);
118118 font-family: var(--font-body);
119- font-size: 15px; line-height: 1.55;
119+ font-size: 0.9375rem; line-height: 1.55;
120120 /* Le body ne scrolle jamais : le scroll vit dans .app-main. Sans ça, iOS
121121 (PWA) fait rebondir les éléments flottants avec la page. */
122122 overflow: hidden;
@@ -143,7 +143,7 @@ input[type=number] { -moz-appearance: textfield; appearance: textfield; }
143143 display: inline-flex; align-items: center; justify-content: center; gap: 6px;
144144 cursor: pointer; text-decoration: none;
145145 font-family: var(--font-heading); font-weight: var(--font-heading-weight);
146- font-size: 14px; line-height: 1.2; color: var(--color-text);
146+ font-size: 0.875rem; line-height: 1.2; color: var(--color-text);
147147 background: transparent; border: 1px solid transparent;
148148 padding: var(--space-2) calc(var(--space-3) * 1.2);
149149 border-radius: 999px;
@@ -164,12 +164,12 @@ input[type=number] { -moz-appearance: textfield; appearance: textfield; }
164164
165165 /* — formulaires — */
166166 .field > label {
167- display: block; font-size: 12px; margin-bottom: 5px;
167+ display: block; font-size: 0.75rem; margin-bottom: 5px;
168168 color: color-mix(in srgb, var(--color-text) 70%, transparent);
169169 }
170170 .input {
171171 width: 100%; min-height: 36px; padding: 6px 14px; font: inherit;
172- font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
172+ font-size: 0.875rem; color: var(--color-text); caret-color: var(--color-accent);
173173 background: var(--color-surface);
174174 border: 1px solid var(--color-divider); border-radius: 999px;
175175 }
@@ -182,12 +182,12 @@ input[type=number] { -moz-appearance: textfield; appearance: textfield; }
182182 padding: var(--space-3); border-radius: calc(var(--radius-lg) * 1.15);
183183 background: var(--color-surface);
184184 }
185-.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); }
186-.card-body { margin: 0; font-size: 13px; opacity: 0.8; }
185+.card-kicker { font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); }
186+.card-body { margin: 0; font-size: 0.8125rem; opacity: 0.8; }
187187
188188 /* — tags — */
189189 .tag {
190- display: inline-flex; align-items: center; font-size: 11px;
190+ display: inline-flex; align-items: center; font-size: 0.6875rem;
191191 letter-spacing: 0.02em; padding: 3px 10px; border-radius: 999px;
192192 }
193193 .tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
@@ -210,7 +210,7 @@ input[type=number] { -moz-appearance: textfield; appearance: textfield; }
210210 pour garantir ≥ 4.5:1 avec l'encre quelle que soit la teinte, pastille en
211211 couleur pleine pour l'identification. */
212212 .team-pill {
213- display: inline-flex; align-items: center; gap: 8px; font-size: 14px;
213+ display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem;
214214 padding: 9px 15px 9px 12px; border-radius: 999px;
215215 background: color-mix(in srgb, var(--team-color, var(--color-accent-2)) 25%, var(--color-bg));
216216 color: var(--color-text);
@@ -220,8 +220,8 @@ input[type=number] { -moz-appearance: textfield; appearance: textfield; }
220220 /* Pill-sélecteur (plusieurs équipes) : ouvre la sheet #equipes. */
221221 a.team-pill { text-decoration: none; cursor: pointer; }
222222 a.team-pill:hover { filter: brightness(.96); }
223-.app-topline .who { margin-left: auto; font-size: 12px; opacity: .7; }
224-.app-header h1 { margin: 0; font-size: 29px; letter-spacing: -0.02em; }
223+.app-topline .who { margin-left: auto; font-size: 0.75rem; opacity: .7; }
224+.app-header h1 { margin: 0; font-size: 1.8125rem; letter-spacing: -0.02em; }
225225
226226 /* Dégagement bas = tab bar + marge, safe area comprise (le dock du minuteur
227227 est passé au-dessus du contenu, il ne mange plus le bas).
@@ -250,24 +250,24 @@ a.team-pill:hover { filter: brightness(.96); }
250250 }
251251 .timer-btn .t-elapsed {
252252 font-family: var(--font-heading); font-weight: var(--font-heading-weight);
253- font-size: 15px; letter-spacing: -0.01em;
253+ font-size: 0.9375rem; letter-spacing: -0.01em;
254254 /* La durée ne se coupe jamais : c'est la note (min-width:0) qui passe à la
255255 ligne quand elle nomme une équipe au nom long. */
256256 flex: none; white-space: nowrap;
257257 }
258258 /* .88 et pas le .8 du design : sur l'olive accent-2-700, la crème à 80 %
259259 tombe à 4.15:1 — sous le plancher AA pour du 12px. */
260-.timer-btn .t-note { font-size: 12px; opacity: .88; line-height: 1.25; min-width: 0; }
260+.timer-btn .t-note { font-size: 0.75rem; opacity: .88; line-height: 1.25; min-width: 0; }
261261 /* Écart assumé vs le design (pastille crème à 24 % sur l'olive) : ce voile
262262 ne tient que 3.35:1 avec le texte crème. Aplat crème plein + encre olive
263263 foncée → 12:1, et l'action se lit comme un bouton. */
264264 .timer-btn .t-cta {
265- margin-left: auto; flex: none; font-size: 13px; font-weight: 700;
265+ margin-left: auto; flex: none; font-size: 0.8125rem; font-weight: 700;
266266 padding: 4px 12px; border-radius: 999px;
267267 background: var(--color-bg); color: var(--color-accent-2-900);
268268 }
269269 /* Atterrissage de l'onglet Ajouter : minuteur ou saisie manuelle. */
270-.choice-hint { font-size: 15px; opacity: .7; margin: 0 0 var(--space-6); text-wrap: pretty; }
270+.choice-hint { font-size: 0.9375rem; opacity: .7; margin: 0 0 var(--space-6); text-wrap: pretty; }
271271 .choice-stack { display: grid; gap: var(--space-3); }
272272 .choice-card {
273273 display: flex; align-items: center; gap: var(--space-4); width: 100%;
@@ -278,9 +278,9 @@ a.team-pill:hover { filter: brightness(.96); }
278278 .choice-card svg { flex: none; }
279279 .choice-title {
280280 display: block; font-family: var(--font-heading);
281- font-weight: var(--font-heading-weight); font-size: 21px; letter-spacing: -0.01em;
281+ font-weight: var(--font-heading-weight); font-size: 1.3125rem; letter-spacing: -0.01em;
282282 }
283-.choice-sub { display: block; font-size: 14px; opacity: .9; margin-top: 2px; }
283+.choice-sub { display: block; font-size: 0.875rem; opacity: .9; margin-top: 2px; }
284284 /* accent-deep est calibré pour 4.5:1 avec la crème — sans marge pour une
285285 estompe : sous-titre en pleine opacité sur la carte foncée. */
286286 .choice-timer .choice-sub { opacity: 1; }
@@ -297,7 +297,7 @@ a.team-pill:hover { filter: brightness(.96); }
297297 .choice-card:disabled:hover { background: var(--color-neutral-200); }
298298 .choice-card:disabled .choice-sub { opacity: .7; }
299299 .choice-busy {
300- margin: calc(-1 * var(--space-1)) var(--space-2) 0; font-size: 13px;
300+ margin: calc(-1 * var(--space-1)) var(--space-2) 0; font-size: 0.8125rem;
301301 color: var(--color-accent-900); opacity: .8; text-wrap: pretty;
302302 }
303303 .choice-manage { justify-self: center; margin-top: var(--space-2); }
@@ -308,24 +308,24 @@ a.team-pill:hover { filter: brightness(.96); }
308308 padding: var(--space-6) var(--space-4); text-align: center;
309309 }
310310 .chrono-kicker {
311- margin: 0 0 var(--space-2); font-size: 13px; font-weight: 700;
311+ margin: 0 0 var(--space-2); font-size: 0.8125rem; font-weight: 700;
312312 letter-spacing: .06em; text-transform: uppercase;
313313 color: var(--color-accent-900); opacity: .7;
314314 }
315315 .chrono-time {
316316 margin: 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
317- font-size: 44px; line-height: 1.1; color: var(--color-accent-900);
317+ font-size: 2.75rem; line-height: 1.1; color: var(--color-accent-900);
318318 }
319-.chrono-start { margin: var(--space-2) 0 0; font-size: 14px; color: var(--color-accent-900); opacity: .7; }
320-.chrono-hint { margin: var(--space-4) 0 var(--space-6); font-size: 14px; opacity: .7; text-align: center; text-wrap: pretty; }
319+.chrono-start { margin: var(--space-2) 0 0; font-size: 0.875rem; color: var(--color-accent-900); opacity: .7; }
320+.chrono-hint { margin: var(--space-4) 0 var(--space-6); font-size: 0.875rem; opacity: .7; text-align: center; text-wrap: pretty; }
321321
322322 /* Bandeau « X min mesurées » (étape 1). */
323323 .measure-card {
324324 background: var(--color-accent-200); border-radius: var(--radius-lg);
325325 padding: var(--space-4); margin-bottom: var(--space-4);
326326 }
327-.measure-card p { margin: 0; font-size: 16px; color: var(--color-accent-900); text-wrap: pretty; }
328-.measure-card .warn { margin-top: var(--space-2); font-size: 13px; opacity: .75; }
327+.measure-card p { margin: 0; font-size: 1rem; color: var(--color-accent-900); text-wrap: pretty; }
328+.measure-card .warn { margin-top: var(--space-2); font-size: 0.8125rem; opacity: .75; }
329329
330330 /* — tab bar — */
331331 /* max(), pas une somme : quand le viewport s'arrête déjà au-dessus de la
@@ -356,7 +356,7 @@ a.team-pill:hover { filter: brightness(.96); }
356356 flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
357357 padding: 8px 2px; border-radius: 999px; text-decoration: none;
358358 color: color-mix(in srgb, var(--color-text) 70%, transparent);
359- font-size: 11px;
359+ font-size: 0.6875rem;
360360 }
361361 .tab[aria-current="page"] { color: var(--color-accent-700); font-weight: 700; }
362362 .tab-ico { position: relative; display: inline-flex; }
@@ -364,7 +364,7 @@ a.team-pill:hover { filter: brightness(.96); }
364364 position: absolute; top: -4px; right: -6px;
365365 min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
366366 background: var(--color-accent-deep); color: var(--color-bg);
367- font-size: 10px; font-weight: 700;
367+ font-size: 0.625rem; font-weight: 700;
368368 display: flex; align-items: center; justify-content: center;
369369 box-shadow: 0 0 0 2px var(--color-surface);
370370 }
@@ -391,11 +391,11 @@ a.team-pill:hover { filter: brightness(.96); }
391391 }
392392 .invite-kicker {
393393 display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-2);
394- font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
394+ font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .09em;
395395 color: var(--color-accent-900);
396396 }
397397 .invite-kicker .idot { width: 8px; height: 8px; border-radius: 999px; background: var(--color-accent); }
398-.invite-card p { margin: 0 0 var(--space-4); font-size: 15px; color: var(--color-accent-900); text-wrap: pretty; }
398+.invite-card p { margin: 0 0 var(--space-4); font-size: 0.9375rem; color: var(--color-accent-900); text-wrap: pretty; }
399399
400400 .sent-row {
401401 display: flex; align-items: center; gap: var(--space-3);
@@ -413,17 +413,17 @@ a.team-pill:hover { filter: brightness(.96); }
413413 }
414414 /* Logo, titre et tagline centrés — le formulaire reste pleine largeur. */
415415 .login-logo { display: block; flex: none; margin: 0 auto var(--space-6); width: 128px; height: 128px; }
416-.login h1 { font-size: 48px; margin: 0 0 var(--space-2); letter-spacing: -0.02em; text-align: center; }
417-.login .tagline { font-size: 20px; opacity: .7; margin: 0 auto var(--space-8); max-width: 20em; text-align: center; }
418-.form-error { font-size: 13px; color: var(--color-accent-700); margin: 0 0 var(--space-3); }
416+.login h1 { font-size: 3rem; margin: 0 0 var(--space-2); letter-spacing: -0.02em; text-align: center; }
417+.login .tagline { font-size: 1.25rem; opacity: .7; margin: 0 auto var(--space-8); max-width: 20em; text-align: center; }
418+.form-error { font-size: 0.8125rem; color: var(--color-accent-700); margin: 0 0 var(--space-3); }
419419 /* Aide sous un champ (inscription) — .7 est le plancher AA du projet. */
420-.field-hint { font-size: 13px; opacity: .7; margin: 0 0 var(--space-4); text-wrap: pretty; }
420+.field-hint { font-size: 0.8125rem; opacity: .7; margin: 0 0 var(--space-4); text-wrap: pretty; }
421421 /* L'inscription porte trois champs et deux aides là où la connexion en a
422422 deux : logo et titre rétrécissent pour que le formulaire reste visible sans
423423 défiler sur un petit écran. */
424424 .signup .login-logo { width: 88px; height: 88px; margin-bottom: var(--space-4); }
425-.signup h1 { font-size: 34px; }
426-.signup .tagline { font-size: 16px; margin-bottom: var(--space-6); }
425+.signup h1 { font-size: 2.125rem; }
426+.signup .tagline { font-size: 1rem; margin-bottom: var(--space-6); }
427427
428428 /* — annonces (changelog) : page interstitielle hors shell —
429429 Variante de .login (même squelette épuré), mais le contenu peut être long :
@@ -438,27 +438,27 @@ a.team-pill:hover { filter: brightness(.96); }
438438 display: flex; align-items: baseline; gap: var(--space-3);
439439 margin: 0 0 var(--space-4);
440440 }
441-.announce-head h1 { font-size: 34px; margin: 0; text-align: left; }
441+.announce-head h1 { font-size: 2.125rem; margin: 0; text-align: left; }
442442 .announce-head .btn-ghost { margin-left: auto; }
443443 .announce-list { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
444444 .announce-card { padding: var(--space-4); box-shadow: var(--shadow-md); }
445-.announce-card h2 { margin: 0; font-size: 21px; letter-spacing: -0.01em; }
446-.announce-date { margin: 0 0 var(--space-1); font-size: 13px; color: var(--color-accent-700); }
447-.announce-text { margin: 0; font-size: 15px; line-height: 1.5; }
448-.announce-ok { min-height: 48px; font-size: 16px; }
445+.announce-card h2 { margin: 0; font-size: 1.3125rem; letter-spacing: -0.01em; }
446+.announce-date { margin: 0 0 var(--space-1); font-size: 0.8125rem; color: var(--color-accent-700); }
447+.announce-text { margin: 0; font-size: 0.9375rem; line-height: 1.5; }
448+.announce-ok { min-height: 48px; font-size: 1rem; }
449449
450450 /* — ajout étape 1 : liste de catégories — */
451-.step-hint { font-size: 13px; opacity: .7; margin: 0 0 var(--space-4); }
451+.step-hint { font-size: 0.8125rem; opacity: .7; margin: 0 0 var(--space-4); }
452452 .category-pick { display: grid; gap: var(--space-2); }
453453 .category-pick a {
454454 display: flex; align-items: center; gap: var(--space-3);
455455 padding: var(--space-3) var(--space-4); background: var(--color-surface);
456456 border: 1px solid transparent; border-radius: 999px;
457- font-size: 16px; color: var(--color-text); text-decoration: none;
457+ font-size: 1rem; color: var(--color-text); text-decoration: none;
458458 }
459459 .category-pick a:hover { border-color: var(--color-accent); }
460460 .category-pick .tname { flex: 1; }
461-.category-pick .tweek { font-size: 12px; opacity: .7; }
461+.category-pick .tweek { font-size: 0.75rem; opacity: .7; }
462462 .dot { border-radius: 999px; flex: none; display: inline-block; }
463463 .dot-14 { width: 14px; height: 14px; }
464464 .dot-12 { width: 12px; height: 12px; }
@@ -466,11 +466,11 @@ a.team-pill:hover { filter: brightness(.96); }
466466
467467 /* — ajout étape 2 — */
468468 .picked { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
469-.picked .pname { font-size: 20px; font-family: var(--font-heading); }
469+.picked .pname { font-size: 1.25rem; font-family: var(--font-heading); }
470470 .picked>div { display: flex; align-items: center; gap: var(--space-2); margin:0; padding:0; }
471471 .step2_hr { border: none; border-bottom: solid 1px var(--color-divider); }
472472 h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-2); }
473-.mini-label { display: block; font-size: 12px; opacity: .7; margin: 0 0 var(--space-2); }
473+.mini-label { display: block; font-size: 0.75rem; opacity: .7; margin: 0 0 var(--space-2); }
474474 .duration-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
475475 .stepper {
476476 display: flex; align-items: center; gap: var(--space-1);
@@ -486,41 +486,41 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d
486486 .stepper-btn:hover { background: var(--color-accent-200); }
487487 .stepper-btn:active { background: var(--color-accent-300); }
488488 .stepper .minutes-input {
489- width: 92px; font-size: 32px; font-family: var(--font-heading);
489+ width: 92px; font-size: 2rem; font-family: var(--font-heading);
490490 min-height: 44px; text-align: center; padding: 0;
491491 background: transparent; border-color: transparent;
492492 }
493-.duration-row .unit { font-size: 15px; opacity: .7; }
494-.duration-row .pretty { font-size: 13px; opacity: .7; }
493+.duration-row .unit { font-size: 0.9375rem; opacity: .7; }
494+.duration-row .pretty { font-size: 0.8125rem; opacity: .7; }
495495 .presets { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-6); }
496496 .preset {
497- padding: 9px 16px; border-radius: 999px; font-size: 14px;
497+ padding: 9px 16px; border-radius: 999px; font-size: 0.875rem;
498498 font-family: var(--font-heading); text-decoration: none;
499499 border: 1px solid var(--color-divider); color: var(--color-text);
500500 }
501501 .preset[aria-current="true"] { background: var(--color-accent-deep); color: var(--color-bg); border-color: transparent; }
502502 .date-row { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-3); }
503503 .date-row .input { flex: 1; min-height: 44px; text-align: center; }
504-.date-label { font-size: 13px; opacity: .7; margin: 0 0 var(--space-6); }
504+.date-label { font-size: 0.8125rem; opacity: .7; margin: 0 0 var(--space-6); }
505505
506506 /* — stats — */
507507 .legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-6); padding: 0; list-style: none; }
508-.legend li { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
508+.legend li { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; }
509509 .legend .dot { width: 10px; height: 10px; }
510510 .chart-section { margin-bottom: var(--space-8); }
511511 .chart-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); }
512-.chart-head h2 { margin: 0; font-size: 21px; }
512+.chart-head h2 { margin: 0; font-size: 1.3125rem; }
513513 .chart-nav { margin-left: auto; display: flex; gap: 6px; }
514-.chart-range { font-size: 12px; opacity: .7; margin: 0 0 var(--space-4); }
515-.chart-empty { font-size: 14px; opacity: .7; margin: 0; padding: var(--space-6) 0; }
514+.chart-range { font-size: 0.75rem; opacity: .7; margin: 0 0 var(--space-4); }
515+.chart-empty { font-size: 0.875rem; opacity: .7; margin: 0; padding: var(--space-6) 0; }
516516 .cols { display: flex; align-items: flex-end; gap: var(--space-4); height: 190px; padding-top: var(--space-2); }
517517 .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
518518 /* Étiquettes à hauteur FIXE et barre en % de l'espace restant (--h posé en
519519 inline par le template) : avec height:% direct, flexbox comprimait les
520520 colonnes proches du max (barre + étiquettes > 190 px) et les grosses
521521 journées s'égalisaient — 9 h rendu à la hauteur de 6 h 30. */
522-.col .total { font-size: 12px; opacity: .7; height: 15px; line-height: 15px; }
523-.col .user { font-size: 13px; font-weight: 600; height: 18px; line-height: 18px; white-space: nowrap; }
522+.col .total { font-size: 0.75rem; opacity: .7; height: 15px; line-height: 15px; }
523+.col .user { font-size: 0.8125rem; font-weight: 600; height: 18px; line-height: 18px; white-space: nowrap; }
524524 .col-bar {
525525 width: 100%; max-width: 64px; display: flex; flex-direction: column;
526526 flex: none; height: calc((100% - 45px) * var(--h, 2) / 100);
@@ -533,7 +533,7 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d
533533 /* — activité de la semaine (7 colonnes, segments par personne) — */
534534 .cols-7 { gap: var(--space-2); }
535535 .cols-7 .col-bar { max-width: 40px; }
536-.cols-7 .col .user { font-size: 12px; font-weight: 500; }
536+.cols-7 .col .user { font-size: 0.75rem; font-weight: 500; }
537537 /* Compromis 2.5.8 assumé : 24px × N personnes déborderait les petites
538538 barres (overflow:hidden les tronquerait) ; le détail complet reste
539539 accessible via la bottom sheet. */
@@ -559,11 +559,11 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d
559559 align-items: baseline; gap: 5px var(--space-2);
560560 }
561561 .cols-rows .col .user {
562- grid-area: user; height: auto; font-size: 14px; font-weight: 600;
562+ grid-area: user; height: auto; font-size: 0.875rem; font-weight: 600;
563563 text-align: left; white-space: normal;
564564 }
565565 .cols-rows .col .total {
566- grid-area: total; height: auto; font-size: 13px; text-align: right;
566+ grid-area: total; height: auto; font-size: 0.8125rem; text-align: right;
567567 }
568568 .cols-rows .col-bar {
569569 grid-area: bar; flex-direction: row; align-self: stretch;
@@ -589,7 +589,7 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d
589589 .scope-pill {
590590 flex: none; display: inline-flex; align-items: center;
591591 padding: 8px 15px; min-height: 34px; border-radius: 999px;
592- font-size: 14px; text-decoration: none; color: var(--color-text);
592+ font-size: 0.875rem; text-decoration: none; color: var(--color-text);
593593 border: 1px solid var(--color-divider);
594594 }
595595 /* Teinte à 25 % comme la pill d'équipe : l'accent-2 plein ne tient pas
@@ -614,23 +614,23 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d
614614 }
615615 .scope-title {
616616 margin: 0 0 var(--space-3); font-family: var(--font-heading);
617- font-size: 15px; letter-spacing: -0.01em; color: var(--color-accent-700);
617+ font-size: 0.9375rem; letter-spacing: -0.01em; color: var(--color-accent-700);
618618 }
619619 @media (prefers-reduced-motion: no-preference) {
620620 .scopes { scroll-behavior: smooth; }
621621 }
622622
623623 /* — groupes de catégories : section de l'écran Catégories — */
624-.groups-title { font-size: 15px; margin: var(--space-8) 0 var(--space-2); }
625-.groups-hint { font-size: 13px; opacity: .7; margin: 0 0 var(--space-4); text-wrap: pretty; }
624+.groups-title { font-size: 0.9375rem; margin: var(--space-8) 0 var(--space-2); }
625+.groups-hint { font-size: 0.8125rem; opacity: .7; margin: 0 0 var(--space-4); text-wrap: pretty; }
626626 .group-card {
627627 background: var(--color-surface); border-radius: var(--radius-lg);
628628 padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2);
629629 }
630-.group-name { font-size: 15px; font-weight: 600; margin-bottom: var(--space-2); }
630+.group-name { font-size: 0.9375rem; font-weight: 600; margin-bottom: var(--space-2); }
631631 .group-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
632632 .group-chip {
633- display: inline-flex; align-items: center; gap: 7px; font-size: 13px;
633+ display: inline-flex; align-items: center; gap: 7px; font-size: 0.8125rem;
634634 padding: 5px 6px 5px 11px; border-radius: 999px; background: var(--color-bg);
635635 }
636636 .group-chip .dot { width: 9px; height: 9px; }
@@ -662,12 +662,12 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d
662662 animation: tt-rise-sheet .18s ease-out;
663663 }
664664 .sheet-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
665-.sheet-head .pname { font-family: var(--font-heading); font-size: 20px; }
665+.sheet-head .pname { font-family: var(--font-heading); font-size: 1.25rem; }
666666 .sheet-head .close { margin-left: auto; }
667667 .sheet-figures { display: flex; gap: var(--space-6); }
668-.sheet-figures .k { font-size: 11px; opacity: .7; text-transform: uppercase; letter-spacing: .08em; }
669-.sheet-figures .v { font-size: 30px; font-family: var(--font-heading); }
670-.sheet-note { font-size: 13px; opacity: .7; margin: var(--space-4) 0 0; }
668+.sheet-figures .k { font-size: 0.6875rem; opacity: .7; text-transform: uppercase; letter-spacing: .08em; }
669+.sheet-figures .v { font-size: 1.875rem; font-family: var(--font-heading); }
670+.sheet-note { font-size: 0.8125rem; opacity: .7; margin: var(--space-4) 0 0; }
671671
672672 /* — mes temps — */
673673 .times { list-style: none; margin: 0; padding: 0; }
@@ -676,9 +676,9 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d
676676 border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
677677 }
678678 .times .tinfo { flex: 1; min-width: 0; }
679-.times .tcat { font-size: 15px; }
680-.times .tdate { font-size: 12px; opacity: .7; }
681-.times .tdur { font-size: 16px; font-family: var(--font-heading); }
679+.times .tcat { font-size: 0.9375rem; }
680+.times .tdate { font-size: 0.75rem; opacity: .7; }
681+.times .tdur { font-size: 1rem; font-family: var(--font-heading); }
682682
683683 /* — catégories — */
684684 .category-row {
@@ -688,7 +688,7 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d
688688 .category-row form.rename { flex: 1; }
689689 .category-row .rename .input {
690690 border-color: transparent; background: transparent; padding-left: 0;
691- font-size: 15px; border-radius: 0;
691+ font-size: 0.9375rem; border-radius: 0;
692692 }
693693 .category-row .rename .input:hover { border-color: var(--color-divider); }
694694 /* Archivée = grisée, mais le nom reste éditable (restauration) : .45 donnait
@@ -707,14 +707,14 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d
707707 background: var(--color-surface); border-radius: var(--radius-lg);
708708 padding: var(--space-8) var(--space-4); text-align: center;
709709 }
710-.todo-empty .te-title { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: 21px; }
711-.todo-empty .te-body { margin: 0; font-size: 14px; opacity: .7; text-wrap: pretty; }
710+.todo-empty .te-title { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: 1.3125rem; }
711+.todo-empty .te-body { margin: 0; font-size: 0.875rem; opacity: .7; text-wrap: pretty; }
712712 .blk-head { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); }
713-.blk-head h2 { margin: 0; font-size: 15px; }
714-.blk-empty { font-size: 14px; opacity: .7; margin: 0 0 var(--space-8); }
713+.blk-head h2 { margin: 0; font-size: 0.9375rem; }
714+.blk-empty { font-size: 0.875rem; opacity: .7; margin: 0 0 var(--space-8); }
715715 .blk-toggle {
716716 margin-left: auto; display: flex; align-items: center; gap: 8px;
717- font-size: 13px; color: var(--color-text); text-decoration: none;
717+ font-size: 0.8125rem; color: var(--color-text); text-decoration: none;
718718 }
719719 /* Interrupteur (rendu serveur : .on ; variante checkbox via .swt-check). */
720720 .swt {
@@ -744,13 +744,13 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d
744744 .prio-pill {
745745 flex: none; align-self: flex-start;
746746 background: var(--color-prio); color: var(--color-bg);
747- font-size: 11px; font-weight: 700; line-height: 1;
747+ font-size: 0.6875rem; font-weight: 700; line-height: 1;
748748 letter-spacing: .05em; text-transform: uppercase;
749749 padding: 5px 10px; border-radius: 999px;
750750 }
751751 .todo-main { display: flex; align-items: center; gap: var(--space-3); }
752-.todo-name { font-size: 16px; }
753-.todo-meta { font-size: 13px; opacity: .7; }
752+.todo-name { font-size: 1rem; }
753+.todo-meta { font-size: 0.8125rem; opacity: .7; }
754754 .todo-meta.late { opacity: 1; color: var(--color-accent-700); font-weight: 600; }
755755 /* Pastilles nominatives des assignés — « moi » en foncé. Couleurs ajustées
756756 vs le design (accent-2 plein ne fait que 3.1:1 avec la crème à 12 px). */
@@ -758,7 +758,7 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d
758758 .asg-chip {
759759 height: 26px; border-radius: 999px; flex: none; padding: 0 11px;
760760 display: inline-flex; align-items: center; justify-content: center;
761- font-size: 12px; font-weight: 600;
761+ font-size: 0.75rem; font-weight: 600;
762762 background: var(--color-accent-2-200); color: var(--color-accent-2-900);
763763 }
764764 .asg-chip.me { background: var(--color-accent-2-900); color: var(--color-bg); }
@@ -769,7 +769,7 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d
769769 background: var(--color-surface); border-radius: var(--radius-lg);
770770 padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
771771 }
772-.later summary { cursor: pointer; font-size: 15px; font-weight: 700; list-style: none; }
772+.later summary { cursor: pointer; font-size: 0.9375rem; font-weight: 700; list-style: none; }
773773 .later-row {
774774 display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0;
775775 border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
@@ -778,7 +778,7 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d
778778 .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); position: relative; }
779779 .chip {
780780 display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
781- border-radius: 999px; cursor: pointer; font-size: 14px;
781+ border-radius: 999px; cursor: pointer; font-size: 0.875rem;
782782 border: 1px solid var(--color-divider);
783783 }
784784 .chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
@@ -795,18 +795,18 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d
795795 background: var(--color-accent-700); color: var(--color-bg);
796796 display: flex; align-items: center; justify-content: center;
797797 }
798-.done-name { font-family: var(--font-heading); font-size: 21px; text-wrap: pretty; }
798+.done-name { font-family: var(--font-heading); font-size: 1.3125rem; text-wrap: pretty; }
799799 .done-head { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); }
800-.done-head h2 { margin: 0; font-size: 15px; }
800+.done-head h2 { margin: 0; font-size: 0.9375rem; }
801801 .swt-check {
802802 margin-left: auto; display: flex; align-items: center; gap: 8px;
803- font-size: 13px; cursor: pointer; position: relative;
803+ font-size: 0.8125rem; cursor: pointer; position: relative;
804804 }
805805 .swt-check input { position: absolute; width: 1px; height: 1px; opacity: 0; }
806806 .swt-check:has(input:checked) .swt { background: var(--color-accent-700); }
807807 .swt-check:has(input:checked) .swt .knob { transform: translateX(18px); }
808808 .swt-check:has(input:focus-visible) .swt { outline: 2px solid var(--color-accent); outline-offset: 2px; }
809-.done-note { font-size: 13px; opacity: .7; }
809+.done-note { font-size: 0.8125rem; opacity: .7; }
810810 .done-sec .done-body { transition: opacity .15s ease; }
811811 /* Section désactivée : atténuée, mais elle reste lisible et focusable — donc
812812 soumise à l'AA. .35 tombait à 2:1, et à 1,6:1 pour les textes déjà à .7.
@@ -860,7 +860,7 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d
860860 /* Sélecteur de langue (Réglages). */
861861 .lang-pill {
862862 display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px;
863- border-radius: 999px; cursor: pointer; font: inherit; font-size: 14px;
863+ border-radius: 999px; cursor: pointer; font: inherit; font-size: 0.875rem;
864864 border: 1px solid var(--color-divider); background: transparent;
865865 color: var(--color-text); min-height: 40px;
866866 }
@@ -878,7 +878,7 @@ a.times-link { flex-direction: row; align-items: center; text-decoration: none;
878878 left: var(--space-4); right: var(--space-4);
879879 background: var(--color-neutral-900); color: var(--color-neutral-100);
880880 padding: var(--space-3) var(--space-4); border-radius: 999px;
881- font-size: 14px; text-align: center; box-shadow: var(--shadow-md);
881+ font-size: 0.875rem; text-align: center; box-shadow: var(--shadow-md);
882882 /* Apparition, puis fondu automatique après 5 s — zéro JS. */
883883 animation: tt-drop .18s ease-out, tt-fade .4s ease-in 1.5s forwards; z-index: 5;
884884 }
@@ -918,12 +918,12 @@ a.times-link { flex-direction: row; align-items: center; text-decoration: none;
918918 .rail-brand {
919919 display: flex; align-items: center; gap: 10px;
920920 padding: 0 var(--space-3); margin-bottom: var(--space-6);
921- font-family: var(--font-heading); font-size: 22px; letter-spacing: -0.02em;
921+ font-family: var(--font-heading); font-size: 1.375rem; letter-spacing: -0.02em;
922922 }
923923 .rail-brand svg { display: block; flex: none; }
924924 .tab {
925925 flex: 0 0 auto; flex-direction: row; justify-content: flex-start;
926- gap: var(--space-3); padding: 11px var(--space-3); font-size: 15px;
926+ gap: var(--space-3); padding: 11px var(--space-3); font-size: 0.9375rem;
927927 color: color-mix(in srgb, var(--color-text) 70%, transparent);
928928 }
929929 .tab[aria-current="page"] { background: var(--color-accent-2-200); color: var(--color-accent-700); }
@@ -116,7 +116,7 @@ body {
116 background: var(--color-surface);116 background: var(--color-surface);
117 color: var(--color-text);117 color: var(--color-text);
118 font-family: var(--font-body);118 font-family: var(--font-body);
119- font-size: 15px; line-height: 1.55;119+ font-size: 0.9375rem; line-height: 1.55;
120 /* Le body ne scrolle jamais : le scroll vit dans .app-main. Sans ça, iOS120 /* Le body ne scrolle jamais : le scroll vit dans .app-main. Sans ça, iOS
121 (PWA) fait rebondir les éléments flottants avec la page. */121 (PWA) fait rebondir les éléments flottants avec la page. */
122 overflow: hidden;122 overflow: hidden;
@@ -143,7 +143,7 @@ input[type=number] { -moz-appearance: textfield; appearance: textfield; }
143 display: inline-flex; align-items: center; justify-content: center; gap: 6px;143 display: inline-flex; align-items: center; justify-content: center; gap: 6px;
144 cursor: pointer; text-decoration: none;144 cursor: pointer; text-decoration: none;
145 font-family: var(--font-heading); font-weight: var(--font-heading-weight);145 font-family: var(--font-heading); font-weight: var(--font-heading-weight);
146- font-size: 14px; line-height: 1.2; color: var(--color-text);146+ font-size: 0.875rem; line-height: 1.2; color: var(--color-text);
147 background: transparent; border: 1px solid transparent;147 background: transparent; border: 1px solid transparent;
148 padding: var(--space-2) calc(var(--space-3) * 1.2);148 padding: var(--space-2) calc(var(--space-3) * 1.2);
149 border-radius: 999px;149 border-radius: 999px;
@@ -164,12 +164,12 @@ input[type=number] { -moz-appearance: textfield; appearance: textfield; }
164 164
165 /* — formulaires — */165 /* — formulaires — */
166 .field > label {166 .field > label {
167- display: block; font-size: 12px; margin-bottom: 5px;167+ display: block; font-size: 0.75rem; margin-bottom: 5px;
168 color: color-mix(in srgb, var(--color-text) 70%, transparent);168 color: color-mix(in srgb, var(--color-text) 70%, transparent);
169 }169 }
170 .input {170 .input {
171 width: 100%; min-height: 36px; padding: 6px 14px; font: inherit;171 width: 100%; min-height: 36px; padding: 6px 14px; font: inherit;
172- font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);172+ font-size: 0.875rem; color: var(--color-text); caret-color: var(--color-accent);
173 background: var(--color-surface);173 background: var(--color-surface);
174 border: 1px solid var(--color-divider); border-radius: 999px;174 border: 1px solid var(--color-divider); border-radius: 999px;
175 }175 }
@@ -182,12 +182,12 @@ input[type=number] { -moz-appearance: textfield; appearance: textfield; }
182 padding: var(--space-3); border-radius: calc(var(--radius-lg) * 1.15);182 padding: var(--space-3); border-radius: calc(var(--radius-lg) * 1.15);
183 background: var(--color-surface);183 background: var(--color-surface);
184 }184 }
185-.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); }185+.card-kicker { font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); }
186-.card-body { margin: 0; font-size: 13px; opacity: 0.8; }186+.card-body { margin: 0; font-size: 0.8125rem; opacity: 0.8; }
187 187
188 /* — tags — */188 /* — tags — */
189 .tag {189 .tag {
190- display: inline-flex; align-items: center; font-size: 11px;190+ display: inline-flex; align-items: center; font-size: 0.6875rem;
191 letter-spacing: 0.02em; padding: 3px 10px; border-radius: 999px;191 letter-spacing: 0.02em; padding: 3px 10px; border-radius: 999px;
192 }192 }
193 .tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }193 .tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
@@ -210,7 +210,7 @@ input[type=number] { -moz-appearance: textfield; appearance: textfield; }
210 pour garantir ≥ 4.5:1 avec l'encre quelle que soit la teinte, pastille en210 pour garantir ≥ 4.5:1 avec l'encre quelle que soit la teinte, pastille en
211 couleur pleine pour l'identification. */211 couleur pleine pour l'identification. */
212 .team-pill {212 .team-pill {
213- display: inline-flex; align-items: center; gap: 8px; font-size: 14px;213+ display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem;
214 padding: 9px 15px 9px 12px; border-radius: 999px;214 padding: 9px 15px 9px 12px; border-radius: 999px;
215 background: color-mix(in srgb, var(--team-color, var(--color-accent-2)) 25%, var(--color-bg));215 background: color-mix(in srgb, var(--team-color, var(--color-accent-2)) 25%, var(--color-bg));
216 color: var(--color-text);216 color: var(--color-text);
@@ -220,8 +220,8 @@ input[type=number] { -moz-appearance: textfield; appearance: textfield; }
220 /* Pill-sélecteur (plusieurs équipes) : ouvre la sheet #equipes. */220 /* Pill-sélecteur (plusieurs équipes) : ouvre la sheet #equipes. */
221 a.team-pill { text-decoration: none; cursor: pointer; }221 a.team-pill { text-decoration: none; cursor: pointer; }
222 a.team-pill:hover { filter: brightness(.96); }222 a.team-pill:hover { filter: brightness(.96); }
223-.app-topline .who { margin-left: auto; font-size: 12px; opacity: .7; }223+.app-topline .who { margin-left: auto; font-size: 0.75rem; opacity: .7; }
224-.app-header h1 { margin: 0; font-size: 29px; letter-spacing: -0.02em; }224+.app-header h1 { margin: 0; font-size: 1.8125rem; letter-spacing: -0.02em; }
225 225
226 /* Dégagement bas = tab bar + marge, safe area comprise (le dock du minuteur226 /* Dégagement bas = tab bar + marge, safe area comprise (le dock du minuteur
227 est passé au-dessus du contenu, il ne mange plus le bas).227 est passé au-dessus du contenu, il ne mange plus le bas).
@@ -250,24 +250,24 @@ a.team-pill:hover { filter: brightness(.96); }
250 }250 }
251 .timer-btn .t-elapsed {251 .timer-btn .t-elapsed {
252 font-family: var(--font-heading); font-weight: var(--font-heading-weight);252 font-family: var(--font-heading); font-weight: var(--font-heading-weight);
253- font-size: 15px; letter-spacing: -0.01em;253+ font-size: 0.9375rem; letter-spacing: -0.01em;
254 /* La durée ne se coupe jamais : c'est la note (min-width:0) qui passe à la254 /* La durée ne se coupe jamais : c'est la note (min-width:0) qui passe à la
255 ligne quand elle nomme une équipe au nom long. */255 ligne quand elle nomme une équipe au nom long. */
256 flex: none; white-space: nowrap;256 flex: none; white-space: nowrap;
257 }257 }
258 /* .88 et pas le .8 du design : sur l'olive accent-2-700, la crème à 80 %258 /* .88 et pas le .8 du design : sur l'olive accent-2-700, la crème à 80 %
259 tombe à 4.15:1 — sous le plancher AA pour du 12px. */259 tombe à 4.15:1 — sous le plancher AA pour du 12px. */
260-.timer-btn .t-note { font-size: 12px; opacity: .88; line-height: 1.25; min-width: 0; }260+.timer-btn .t-note { font-size: 0.75rem; opacity: .88; line-height: 1.25; min-width: 0; }
261 /* Écart assumé vs le design (pastille crème à 24 % sur l'olive) : ce voile261 /* Écart assumé vs le design (pastille crème à 24 % sur l'olive) : ce voile
262 ne tient que 3.35:1 avec le texte crème. Aplat crème plein + encre olive262 ne tient que 3.35:1 avec le texte crème. Aplat crème plein + encre olive
263 foncée → 12:1, et l'action se lit comme un bouton. */263 foncée → 12:1, et l'action se lit comme un bouton. */
264 .timer-btn .t-cta {264 .timer-btn .t-cta {
265- margin-left: auto; flex: none; font-size: 13px; font-weight: 700;265+ margin-left: auto; flex: none; font-size: 0.8125rem; font-weight: 700;
266 padding: 4px 12px; border-radius: 999px;266 padding: 4px 12px; border-radius: 999px;
267 background: var(--color-bg); color: var(--color-accent-2-900);267 background: var(--color-bg); color: var(--color-accent-2-900);
268 }268 }
269 /* Atterrissage de l'onglet Ajouter : minuteur ou saisie manuelle. */269 /* Atterrissage de l'onglet Ajouter : minuteur ou saisie manuelle. */
270-.choice-hint { font-size: 15px; opacity: .7; margin: 0 0 var(--space-6); text-wrap: pretty; }270+.choice-hint { font-size: 0.9375rem; opacity: .7; margin: 0 0 var(--space-6); text-wrap: pretty; }
271 .choice-stack { display: grid; gap: var(--space-3); }271 .choice-stack { display: grid; gap: var(--space-3); }
272 .choice-card {272 .choice-card {
273 display: flex; align-items: center; gap: var(--space-4); width: 100%;273 display: flex; align-items: center; gap: var(--space-4); width: 100%;
@@ -278,9 +278,9 @@ a.team-pill:hover { filter: brightness(.96); }
278 .choice-card svg { flex: none; }278 .choice-card svg { flex: none; }
279 .choice-title {279 .choice-title {
280 display: block; font-family: var(--font-heading);280 display: block; font-family: var(--font-heading);
281- font-weight: var(--font-heading-weight); font-size: 21px; letter-spacing: -0.01em;281+ font-weight: var(--font-heading-weight); font-size: 1.3125rem; letter-spacing: -0.01em;
282 }282 }
283-.choice-sub { display: block; font-size: 14px; opacity: .9; margin-top: 2px; }283+.choice-sub { display: block; font-size: 0.875rem; opacity: .9; margin-top: 2px; }
284 /* accent-deep est calibré pour 4.5:1 avec la crème — sans marge pour une284 /* accent-deep est calibré pour 4.5:1 avec la crème — sans marge pour une
285 estompe : sous-titre en pleine opacité sur la carte foncée. */285 estompe : sous-titre en pleine opacité sur la carte foncée. */
286 .choice-timer .choice-sub { opacity: 1; }286 .choice-timer .choice-sub { opacity: 1; }
@@ -297,7 +297,7 @@ a.team-pill:hover { filter: brightness(.96); }
297 .choice-card:disabled:hover { background: var(--color-neutral-200); }297 .choice-card:disabled:hover { background: var(--color-neutral-200); }
298 .choice-card:disabled .choice-sub { opacity: .7; }298 .choice-card:disabled .choice-sub { opacity: .7; }
299 .choice-busy {299 .choice-busy {
300- margin: calc(-1 * var(--space-1)) var(--space-2) 0; font-size: 13px;300+ margin: calc(-1 * var(--space-1)) var(--space-2) 0; font-size: 0.8125rem;
301 color: var(--color-accent-900); opacity: .8; text-wrap: pretty;301 color: var(--color-accent-900); opacity: .8; text-wrap: pretty;
302 }302 }
303 .choice-manage { justify-self: center; margin-top: var(--space-2); }303 .choice-manage { justify-self: center; margin-top: var(--space-2); }
@@ -308,24 +308,24 @@ a.team-pill:hover { filter: brightness(.96); }
308 padding: var(--space-6) var(--space-4); text-align: center;308 padding: var(--space-6) var(--space-4); text-align: center;
309 }309 }
310 .chrono-kicker {310 .chrono-kicker {
311- margin: 0 0 var(--space-2); font-size: 13px; font-weight: 700;311+ margin: 0 0 var(--space-2); font-size: 0.8125rem; font-weight: 700;
312 letter-spacing: .06em; text-transform: uppercase;312 letter-spacing: .06em; text-transform: uppercase;
313 color: var(--color-accent-900); opacity: .7;313 color: var(--color-accent-900); opacity: .7;
314 }314 }
315 .chrono-time {315 .chrono-time {
316 margin: 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight);316 margin: 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
317- font-size: 44px; line-height: 1.1; color: var(--color-accent-900);317+ font-size: 2.75rem; line-height: 1.1; color: var(--color-accent-900);
318 }318 }
319-.chrono-start { margin: var(--space-2) 0 0; font-size: 14px; color: var(--color-accent-900); opacity: .7; }319+.chrono-start { margin: var(--space-2) 0 0; font-size: 0.875rem; color: var(--color-accent-900); opacity: .7; }
320-.chrono-hint { margin: var(--space-4) 0 var(--space-6); font-size: 14px; opacity: .7; text-align: center; text-wrap: pretty; }320+.chrono-hint { margin: var(--space-4) 0 var(--space-6); font-size: 0.875rem; opacity: .7; text-align: center; text-wrap: pretty; }
321 321
322 /* Bandeau « X min mesurées » (étape 1). */322 /* Bandeau « X min mesurées » (étape 1). */
323 .measure-card {323 .measure-card {
324 background: var(--color-accent-200); border-radius: var(--radius-lg);324 background: var(--color-accent-200); border-radius: var(--radius-lg);
325 padding: var(--space-4); margin-bottom: var(--space-4);325 padding: var(--space-4); margin-bottom: var(--space-4);
326 }326 }
327-.measure-card p { margin: 0; font-size: 16px; color: var(--color-accent-900); text-wrap: pretty; }327+.measure-card p { margin: 0; font-size: 1rem; color: var(--color-accent-900); text-wrap: pretty; }
328-.measure-card .warn { margin-top: var(--space-2); font-size: 13px; opacity: .75; }328+.measure-card .warn { margin-top: var(--space-2); font-size: 0.8125rem; opacity: .75; }
329 329
330 /* — tab bar — */330 /* — tab bar — */
331 /* max(), pas une somme : quand le viewport s'arrête déjà au-dessus de la331 /* max(), pas une somme : quand le viewport s'arrête déjà au-dessus de la
@@ -356,7 +356,7 @@ a.team-pill:hover { filter: brightness(.96); }
356 flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;356 flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
357 padding: 8px 2px; border-radius: 999px; text-decoration: none;357 padding: 8px 2px; border-radius: 999px; text-decoration: none;
358 color: color-mix(in srgb, var(--color-text) 70%, transparent);358 color: color-mix(in srgb, var(--color-text) 70%, transparent);
359- font-size: 11px;359+ font-size: 0.6875rem;
360 }360 }
361 .tab[aria-current="page"] { color: var(--color-accent-700); font-weight: 700; }361 .tab[aria-current="page"] { color: var(--color-accent-700); font-weight: 700; }
362 .tab-ico { position: relative; display: inline-flex; }362 .tab-ico { position: relative; display: inline-flex; }
@@ -364,7 +364,7 @@ a.team-pill:hover { filter: brightness(.96); }
364 position: absolute; top: -4px; right: -6px;364 position: absolute; top: -4px; right: -6px;
365 min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;365 min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
366 background: var(--color-accent-deep); color: var(--color-bg);366 background: var(--color-accent-deep); color: var(--color-bg);
367- font-size: 10px; font-weight: 700;367+ font-size: 0.625rem; font-weight: 700;
368 display: flex; align-items: center; justify-content: center;368 display: flex; align-items: center; justify-content: center;
369 box-shadow: 0 0 0 2px var(--color-surface);369 box-shadow: 0 0 0 2px var(--color-surface);
370 }370 }
@@ -391,11 +391,11 @@ a.team-pill:hover { filter: brightness(.96); }
391 }391 }
392 .invite-kicker {392 .invite-kicker {
393 display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-2);393 display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-2);
394- font-size: 11px; text-transform: uppercase; letter-spacing: .09em;394+ font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .09em;
395 color: var(--color-accent-900);395 color: var(--color-accent-900);
396 }396 }
397 .invite-kicker .idot { width: 8px; height: 8px; border-radius: 999px; background: var(--color-accent); }397 .invite-kicker .idot { width: 8px; height: 8px; border-radius: 999px; background: var(--color-accent); }
398-.invite-card p { margin: 0 0 var(--space-4); font-size: 15px; color: var(--color-accent-900); text-wrap: pretty; }398+.invite-card p { margin: 0 0 var(--space-4); font-size: 0.9375rem; color: var(--color-accent-900); text-wrap: pretty; }
399 399
400 .sent-row {400 .sent-row {
401 display: flex; align-items: center; gap: var(--space-3);401 display: flex; align-items: center; gap: var(--space-3);
@@ -413,17 +413,17 @@ a.team-pill:hover { filter: brightness(.96); }
413 }413 }
414 /* Logo, titre et tagline centrés — le formulaire reste pleine largeur. */414 /* Logo, titre et tagline centrés — le formulaire reste pleine largeur. */
415 .login-logo { display: block; flex: none; margin: 0 auto var(--space-6); width: 128px; height: 128px; }415 .login-logo { display: block; flex: none; margin: 0 auto var(--space-6); width: 128px; height: 128px; }
416-.login h1 { font-size: 48px; margin: 0 0 var(--space-2); letter-spacing: -0.02em; text-align: center; }416+.login h1 { font-size: 3rem; margin: 0 0 var(--space-2); letter-spacing: -0.02em; text-align: center; }
417-.login .tagline { font-size: 20px; opacity: .7; margin: 0 auto var(--space-8); max-width: 20em; text-align: center; }417+.login .tagline { font-size: 1.25rem; opacity: .7; margin: 0 auto var(--space-8); max-width: 20em; text-align: center; }
418-.form-error { font-size: 13px; color: var(--color-accent-700); margin: 0 0 var(--space-3); }418+.form-error { font-size: 0.8125rem; color: var(--color-accent-700); margin: 0 0 var(--space-3); }
419 /* Aide sous un champ (inscription) — .7 est le plancher AA du projet. */419 /* Aide sous un champ (inscription) — .7 est le plancher AA du projet. */
420-.field-hint { font-size: 13px; opacity: .7; margin: 0 0 var(--space-4); text-wrap: pretty; }420+.field-hint { font-size: 0.8125rem; opacity: .7; margin: 0 0 var(--space-4); text-wrap: pretty; }
421 /* L'inscription porte trois champs et deux aides là où la connexion en a421 /* L'inscription porte trois champs et deux aides là où la connexion en a
422 deux : logo et titre rétrécissent pour que le formulaire reste visible sans422 deux : logo et titre rétrécissent pour que le formulaire reste visible sans
423 défiler sur un petit écran. */423 défiler sur un petit écran. */
424 .signup .login-logo { width: 88px; height: 88px; margin-bottom: var(--space-4); }424 .signup .login-logo { width: 88px; height: 88px; margin-bottom: var(--space-4); }
425-.signup h1 { font-size: 34px; }425+.signup h1 { font-size: 2.125rem; }
426-.signup .tagline { font-size: 16px; margin-bottom: var(--space-6); }426+.signup .tagline { font-size: 1rem; margin-bottom: var(--space-6); }
427 427
428 /* — annonces (changelog) : page interstitielle hors shell —428 /* — annonces (changelog) : page interstitielle hors shell —
429 Variante de .login (même squelette épuré), mais le contenu peut être long :429 Variante de .login (même squelette épuré), mais le contenu peut être long :
@@ -438,27 +438,27 @@ a.team-pill:hover { filter: brightness(.96); }
438 display: flex; align-items: baseline; gap: var(--space-3);438 display: flex; align-items: baseline; gap: var(--space-3);
439 margin: 0 0 var(--space-4);439 margin: 0 0 var(--space-4);
440 }440 }
441-.announce-head h1 { font-size: 34px; margin: 0; text-align: left; }441+.announce-head h1 { font-size: 2.125rem; margin: 0; text-align: left; }
442 .announce-head .btn-ghost { margin-left: auto; }442 .announce-head .btn-ghost { margin-left: auto; }
443 .announce-list { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }443 .announce-list { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
444 .announce-card { padding: var(--space-4); box-shadow: var(--shadow-md); }444 .announce-card { padding: var(--space-4); box-shadow: var(--shadow-md); }
445-.announce-card h2 { margin: 0; font-size: 21px; letter-spacing: -0.01em; }445+.announce-card h2 { margin: 0; font-size: 1.3125rem; letter-spacing: -0.01em; }
446-.announce-date { margin: 0 0 var(--space-1); font-size: 13px; color: var(--color-accent-700); }446+.announce-date { margin: 0 0 var(--space-1); font-size: 0.8125rem; color: var(--color-accent-700); }
447-.announce-text { margin: 0; font-size: 15px; line-height: 1.5; }447+.announce-text { margin: 0; font-size: 0.9375rem; line-height: 1.5; }
448-.announce-ok { min-height: 48px; font-size: 16px; }448+.announce-ok { min-height: 48px; font-size: 1rem; }
449 449
450 /* — ajout étape 1 : liste de catégories — */450 /* — ajout étape 1 : liste de catégories — */
451-.step-hint { font-size: 13px; opacity: .7; margin: 0 0 var(--space-4); }451+.step-hint { font-size: 0.8125rem; opacity: .7; margin: 0 0 var(--space-4); }
452 .category-pick { display: grid; gap: var(--space-2); }452 .category-pick { display: grid; gap: var(--space-2); }
453 .category-pick a {453 .category-pick a {
454 display: flex; align-items: center; gap: var(--space-3);454 display: flex; align-items: center; gap: var(--space-3);
455 padding: var(--space-3) var(--space-4); background: var(--color-surface);455 padding: var(--space-3) var(--space-4); background: var(--color-surface);
456 border: 1px solid transparent; border-radius: 999px;456 border: 1px solid transparent; border-radius: 999px;
457- font-size: 16px; color: var(--color-text); text-decoration: none;457+ font-size: 1rem; color: var(--color-text); text-decoration: none;
458 }458 }
459 .category-pick a:hover { border-color: var(--color-accent); }459 .category-pick a:hover { border-color: var(--color-accent); }
460 .category-pick .tname { flex: 1; }460 .category-pick .tname { flex: 1; }
461-.category-pick .tweek { font-size: 12px; opacity: .7; }461+.category-pick .tweek { font-size: 0.75rem; opacity: .7; }
462 .dot { border-radius: 999px; flex: none; display: inline-block; }462 .dot { border-radius: 999px; flex: none; display: inline-block; }
463 .dot-14 { width: 14px; height: 14px; }463 .dot-14 { width: 14px; height: 14px; }
464 .dot-12 { width: 12px; height: 12px; }464 .dot-12 { width: 12px; height: 12px; }
@@ -466,11 +466,11 @@ a.team-pill:hover { filter: brightness(.96); }
466 466
467 /* — ajout étape 2 — */467 /* — ajout étape 2 — */
468 .picked { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }468 .picked { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
469-.picked .pname { font-size: 20px; font-family: var(--font-heading); }469+.picked .pname { font-size: 1.25rem; font-family: var(--font-heading); }
470 .picked>div { display: flex; align-items: center; gap: var(--space-2); margin:0; padding:0; }470 .picked>div { display: flex; align-items: center; gap: var(--space-2); margin:0; padding:0; }
471 .step2_hr { border: none; border-bottom: solid 1px var(--color-divider); }471 .step2_hr { border: none; border-bottom: solid 1px var(--color-divider); }
472 h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-2); }472 h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-2); }
473-.mini-label { display: block; font-size: 12px; opacity: .7; margin: 0 0 var(--space-2); }473+.mini-label { display: block; font-size: 0.75rem; opacity: .7; margin: 0 0 var(--space-2); }
474 .duration-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }474 .duration-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
475 .stepper {475 .stepper {
476 display: flex; align-items: center; gap: var(--space-1);476 display: flex; align-items: center; gap: var(--space-1);
@@ -486,41 +486,41 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d
486 .stepper-btn:hover { background: var(--color-accent-200); }486 .stepper-btn:hover { background: var(--color-accent-200); }
487 .stepper-btn:active { background: var(--color-accent-300); }487 .stepper-btn:active { background: var(--color-accent-300); }
488 .stepper .minutes-input {488 .stepper .minutes-input {
489- width: 92px; font-size: 32px; font-family: var(--font-heading);489+ width: 92px; font-size: 2rem; font-family: var(--font-heading);
490 min-height: 44px; text-align: center; padding: 0;490 min-height: 44px; text-align: center; padding: 0;
491 background: transparent; border-color: transparent;491 background: transparent; border-color: transparent;
492 }492 }
493-.duration-row .unit { font-size: 15px; opacity: .7; }493+.duration-row .unit { font-size: 0.9375rem; opacity: .7; }
494-.duration-row .pretty { font-size: 13px; opacity: .7; }494+.duration-row .pretty { font-size: 0.8125rem; opacity: .7; }
495 .presets { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-6); }495 .presets { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-6); }
496 .preset {496 .preset {
497- padding: 9px 16px; border-radius: 999px; font-size: 14px;497+ padding: 9px 16px; border-radius: 999px; font-size: 0.875rem;
498 font-family: var(--font-heading); text-decoration: none;498 font-family: var(--font-heading); text-decoration: none;
499 border: 1px solid var(--color-divider); color: var(--color-text);499 border: 1px solid var(--color-divider); color: var(--color-text);
500 }500 }
501 .preset[aria-current="true"] { background: var(--color-accent-deep); color: var(--color-bg); border-color: transparent; }501 .preset[aria-current="true"] { background: var(--color-accent-deep); color: var(--color-bg); border-color: transparent; }
502 .date-row { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-3); }502 .date-row { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-3); }
503 .date-row .input { flex: 1; min-height: 44px; text-align: center; }503 .date-row .input { flex: 1; min-height: 44px; text-align: center; }
504-.date-label { font-size: 13px; opacity: .7; margin: 0 0 var(--space-6); }504+.date-label { font-size: 0.8125rem; opacity: .7; margin: 0 0 var(--space-6); }
505 505
506 /* — stats — */506 /* — stats — */
507 .legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-6); padding: 0; list-style: none; }507 .legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-6); padding: 0; list-style: none; }
508-.legend li { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }508+.legend li { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; }
509 .legend .dot { width: 10px; height: 10px; }509 .legend .dot { width: 10px; height: 10px; }
510 .chart-section { margin-bottom: var(--space-8); }510 .chart-section { margin-bottom: var(--space-8); }
511 .chart-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); }511 .chart-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); }
512-.chart-head h2 { margin: 0; font-size: 21px; }512+.chart-head h2 { margin: 0; font-size: 1.3125rem; }
513 .chart-nav { margin-left: auto; display: flex; gap: 6px; }513 .chart-nav { margin-left: auto; display: flex; gap: 6px; }
514-.chart-range { font-size: 12px; opacity: .7; margin: 0 0 var(--space-4); }514+.chart-range { font-size: 0.75rem; opacity: .7; margin: 0 0 var(--space-4); }
515-.chart-empty { font-size: 14px; opacity: .7; margin: 0; padding: var(--space-6) 0; }515+.chart-empty { font-size: 0.875rem; opacity: .7; margin: 0; padding: var(--space-6) 0; }
516 .cols { display: flex; align-items: flex-end; gap: var(--space-4); height: 190px; padding-top: var(--space-2); }516 .cols { display: flex; align-items: flex-end; gap: var(--space-4); height: 190px; padding-top: var(--space-2); }
517 .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }517 .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
518 /* Étiquettes à hauteur FIXE et barre en % de l'espace restant (--h posé en518 /* Étiquettes à hauteur FIXE et barre en % de l'espace restant (--h posé en
519 inline par le template) : avec height:% direct, flexbox comprimait les519 inline par le template) : avec height:% direct, flexbox comprimait les
520 colonnes proches du max (barre + étiquettes > 190 px) et les grosses520 colonnes proches du max (barre + étiquettes > 190 px) et les grosses
521 journées s'égalisaient — 9 h rendu à la hauteur de 6 h 30. */521 journées s'égalisaient — 9 h rendu à la hauteur de 6 h 30. */
522-.col .total { font-size: 12px; opacity: .7; height: 15px; line-height: 15px; }522+.col .total { font-size: 0.75rem; opacity: .7; height: 15px; line-height: 15px; }
523-.col .user { font-size: 13px; font-weight: 600; height: 18px; line-height: 18px; white-space: nowrap; }523+.col .user { font-size: 0.8125rem; font-weight: 600; height: 18px; line-height: 18px; white-space: nowrap; }
524 .col-bar {524 .col-bar {
525 width: 100%; max-width: 64px; display: flex; flex-direction: column;525 width: 100%; max-width: 64px; display: flex; flex-direction: column;
526 flex: none; height: calc((100% - 45px) * var(--h, 2) / 100);526 flex: none; height: calc((100% - 45px) * var(--h, 2) / 100);
@@ -533,7 +533,7 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d
533 /* — activité de la semaine (7 colonnes, segments par personne) — */533 /* — activité de la semaine (7 colonnes, segments par personne) — */
534 .cols-7 { gap: var(--space-2); }534 .cols-7 { gap: var(--space-2); }
535 .cols-7 .col-bar { max-width: 40px; }535 .cols-7 .col-bar { max-width: 40px; }
536-.cols-7 .col .user { font-size: 12px; font-weight: 500; }536+.cols-7 .col .user { font-size: 0.75rem; font-weight: 500; }
537 /* Compromis 2.5.8 assumé : 24px × N personnes déborderait les petites537 /* Compromis 2.5.8 assumé : 24px × N personnes déborderait les petites
538 barres (overflow:hidden les tronquerait) ; le détail complet reste538 barres (overflow:hidden les tronquerait) ; le détail complet reste
539 accessible via la bottom sheet. */539 accessible via la bottom sheet. */
@@ -559,11 +559,11 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d
559 align-items: baseline; gap: 5px var(--space-2);559 align-items: baseline; gap: 5px var(--space-2);
560 }560 }
561 .cols-rows .col .user {561 .cols-rows .col .user {
562- grid-area: user; height: auto; font-size: 14px; font-weight: 600;562+ grid-area: user; height: auto; font-size: 0.875rem; font-weight: 600;
563 text-align: left; white-space: normal;563 text-align: left; white-space: normal;
564 }564 }
565 .cols-rows .col .total {565 .cols-rows .col .total {
566- grid-area: total; height: auto; font-size: 13px; text-align: right;566+ grid-area: total; height: auto; font-size: 0.8125rem; text-align: right;
567 }567 }
568 .cols-rows .col-bar {568 .cols-rows .col-bar {
569 grid-area: bar; flex-direction: row; align-self: stretch;569 grid-area: bar; flex-direction: row; align-self: stretch;
@@ -589,7 +589,7 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d
589 .scope-pill {589 .scope-pill {
590 flex: none; display: inline-flex; align-items: center;590 flex: none; display: inline-flex; align-items: center;
591 padding: 8px 15px; min-height: 34px; border-radius: 999px;591 padding: 8px 15px; min-height: 34px; border-radius: 999px;
592- font-size: 14px; text-decoration: none; color: var(--color-text);592+ font-size: 0.875rem; text-decoration: none; color: var(--color-text);
593 border: 1px solid var(--color-divider);593 border: 1px solid var(--color-divider);
594 }594 }
595 /* Teinte à 25 % comme la pill d'équipe : l'accent-2 plein ne tient pas595 /* Teinte à 25 % comme la pill d'équipe : l'accent-2 plein ne tient pas
@@ -614,23 +614,23 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d
614 }614 }
615 .scope-title {615 .scope-title {
616 margin: 0 0 var(--space-3); font-family: var(--font-heading);616 margin: 0 0 var(--space-3); font-family: var(--font-heading);
617- font-size: 15px; letter-spacing: -0.01em; color: var(--color-accent-700);617+ font-size: 0.9375rem; letter-spacing: -0.01em; color: var(--color-accent-700);
618 }618 }
619 @media (prefers-reduced-motion: no-preference) {619 @media (prefers-reduced-motion: no-preference) {
620 .scopes { scroll-behavior: smooth; }620 .scopes { scroll-behavior: smooth; }
621 }621 }
622 622
623 /* — groupes de catégories : section de l'écran Catégories — */623 /* — groupes de catégories : section de l'écran Catégories — */
624-.groups-title { font-size: 15px; margin: var(--space-8) 0 var(--space-2); }624+.groups-title { font-size: 0.9375rem; margin: var(--space-8) 0 var(--space-2); }
625-.groups-hint { font-size: 13px; opacity: .7; margin: 0 0 var(--space-4); text-wrap: pretty; }625+.groups-hint { font-size: 0.8125rem; opacity: .7; margin: 0 0 var(--space-4); text-wrap: pretty; }
626 .group-card {626 .group-card {
627 background: var(--color-surface); border-radius: var(--radius-lg);627 background: var(--color-surface); border-radius: var(--radius-lg);
628 padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2);628 padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2);
629 }629 }
630-.group-name { font-size: 15px; font-weight: 600; margin-bottom: var(--space-2); }630+.group-name { font-size: 0.9375rem; font-weight: 600; margin-bottom: var(--space-2); }
631 .group-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }631 .group-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
632 .group-chip {632 .group-chip {
633- display: inline-flex; align-items: center; gap: 7px; font-size: 13px;633+ display: inline-flex; align-items: center; gap: 7px; font-size: 0.8125rem;
634 padding: 5px 6px 5px 11px; border-radius: 999px; background: var(--color-bg);634 padding: 5px 6px 5px 11px; border-radius: 999px; background: var(--color-bg);
635 }635 }
636 .group-chip .dot { width: 9px; height: 9px; }636 .group-chip .dot { width: 9px; height: 9px; }
@@ -662,12 +662,12 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d
662 animation: tt-rise-sheet .18s ease-out;662 animation: tt-rise-sheet .18s ease-out;
663 }663 }
664 .sheet-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }664 .sheet-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
665-.sheet-head .pname { font-family: var(--font-heading); font-size: 20px; }665+.sheet-head .pname { font-family: var(--font-heading); font-size: 1.25rem; }
666 .sheet-head .close { margin-left: auto; }666 .sheet-head .close { margin-left: auto; }
667 .sheet-figures { display: flex; gap: var(--space-6); }667 .sheet-figures { display: flex; gap: var(--space-6); }
668-.sheet-figures .k { font-size: 11px; opacity: .7; text-transform: uppercase; letter-spacing: .08em; }668+.sheet-figures .k { font-size: 0.6875rem; opacity: .7; text-transform: uppercase; letter-spacing: .08em; }
669-.sheet-figures .v { font-size: 30px; font-family: var(--font-heading); }669+.sheet-figures .v { font-size: 1.875rem; font-family: var(--font-heading); }
670-.sheet-note { font-size: 13px; opacity: .7; margin: var(--space-4) 0 0; }670+.sheet-note { font-size: 0.8125rem; opacity: .7; margin: var(--space-4) 0 0; }
671 671
672 /* — mes temps — */672 /* — mes temps — */
673 .times { list-style: none; margin: 0; padding: 0; }673 .times { list-style: none; margin: 0; padding: 0; }
@@ -676,9 +676,9 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d
676 border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);676 border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
677 }677 }
678 .times .tinfo { flex: 1; min-width: 0; }678 .times .tinfo { flex: 1; min-width: 0; }
679-.times .tcat { font-size: 15px; }679+.times .tcat { font-size: 0.9375rem; }
680-.times .tdate { font-size: 12px; opacity: .7; }680+.times .tdate { font-size: 0.75rem; opacity: .7; }
681-.times .tdur { font-size: 16px; font-family: var(--font-heading); }681+.times .tdur { font-size: 1rem; font-family: var(--font-heading); }
682 682
683 /* — catégories — */683 /* — catégories — */
684 .category-row {684 .category-row {
@@ -688,7 +688,7 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d
688 .category-row form.rename { flex: 1; }688 .category-row form.rename { flex: 1; }
689 .category-row .rename .input {689 .category-row .rename .input {
690 border-color: transparent; background: transparent; padding-left: 0;690 border-color: transparent; background: transparent; padding-left: 0;
691- font-size: 15px; border-radius: 0;691+ font-size: 0.9375rem; border-radius: 0;
692 }692 }
693 .category-row .rename .input:hover { border-color: var(--color-divider); }693 .category-row .rename .input:hover { border-color: var(--color-divider); }
694 /* Archivée = grisée, mais le nom reste éditable (restauration) : .45 donnait694 /* Archivée = grisée, mais le nom reste éditable (restauration) : .45 donnait
@@ -707,14 +707,14 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d
707 background: var(--color-surface); border-radius: var(--radius-lg);707 background: var(--color-surface); border-radius: var(--radius-lg);
708 padding: var(--space-8) var(--space-4); text-align: center;708 padding: var(--space-8) var(--space-4); text-align: center;
709 }709 }
710-.todo-empty .te-title { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: 21px; }710+.todo-empty .te-title { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: 1.3125rem; }
711-.todo-empty .te-body { margin: 0; font-size: 14px; opacity: .7; text-wrap: pretty; }711+.todo-empty .te-body { margin: 0; font-size: 0.875rem; opacity: .7; text-wrap: pretty; }
712 .blk-head { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); }712 .blk-head { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); }
713-.blk-head h2 { margin: 0; font-size: 15px; }713+.blk-head h2 { margin: 0; font-size: 0.9375rem; }
714-.blk-empty { font-size: 14px; opacity: .7; margin: 0 0 var(--space-8); }714+.blk-empty { font-size: 0.875rem; opacity: .7; margin: 0 0 var(--space-8); }
715 .blk-toggle {715 .blk-toggle {
716 margin-left: auto; display: flex; align-items: center; gap: 8px;716 margin-left: auto; display: flex; align-items: center; gap: 8px;
717- font-size: 13px; color: var(--color-text); text-decoration: none;717+ font-size: 0.8125rem; color: var(--color-text); text-decoration: none;
718 }718 }
719 /* Interrupteur (rendu serveur : .on ; variante checkbox via .swt-check). */719 /* Interrupteur (rendu serveur : .on ; variante checkbox via .swt-check). */
720 .swt {720 .swt {
@@ -744,13 +744,13 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d
744 .prio-pill {744 .prio-pill {
745 flex: none; align-self: flex-start;745 flex: none; align-self: flex-start;
746 background: var(--color-prio); color: var(--color-bg);746 background: var(--color-prio); color: var(--color-bg);
747- font-size: 11px; font-weight: 700; line-height: 1;747+ font-size: 0.6875rem; font-weight: 700; line-height: 1;
748 letter-spacing: .05em; text-transform: uppercase;748 letter-spacing: .05em; text-transform: uppercase;
749 padding: 5px 10px; border-radius: 999px;749 padding: 5px 10px; border-radius: 999px;
750 }750 }
751 .todo-main { display: flex; align-items: center; gap: var(--space-3); }751 .todo-main { display: flex; align-items: center; gap: var(--space-3); }
752-.todo-name { font-size: 16px; }752+.todo-name { font-size: 1rem; }
753-.todo-meta { font-size: 13px; opacity: .7; }753+.todo-meta { font-size: 0.8125rem; opacity: .7; }
754 .todo-meta.late { opacity: 1; color: var(--color-accent-700); font-weight: 600; }754 .todo-meta.late { opacity: 1; color: var(--color-accent-700); font-weight: 600; }
755 /* Pastilles nominatives des assignés — « moi » en foncé. Couleurs ajustées755 /* Pastilles nominatives des assignés — « moi » en foncé. Couleurs ajustées
756 vs le design (accent-2 plein ne fait que 3.1:1 avec la crème à 12 px). */756 vs le design (accent-2 plein ne fait que 3.1:1 avec la crème à 12 px). */
@@ -758,7 +758,7 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d
758 .asg-chip {758 .asg-chip {
759 height: 26px; border-radius: 999px; flex: none; padding: 0 11px;759 height: 26px; border-radius: 999px; flex: none; padding: 0 11px;
760 display: inline-flex; align-items: center; justify-content: center;760 display: inline-flex; align-items: center; justify-content: center;
761- font-size: 12px; font-weight: 600;761+ font-size: 0.75rem; font-weight: 600;
762 background: var(--color-accent-2-200); color: var(--color-accent-2-900);762 background: var(--color-accent-2-200); color: var(--color-accent-2-900);
763 }763 }
764 .asg-chip.me { background: var(--color-accent-2-900); color: var(--color-bg); }764 .asg-chip.me { background: var(--color-accent-2-900); color: var(--color-bg); }
@@ -769,7 +769,7 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d
769 background: var(--color-surface); border-radius: var(--radius-lg);769 background: var(--color-surface); border-radius: var(--radius-lg);
770 padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);770 padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
771 }771 }
772-.later summary { cursor: pointer; font-size: 15px; font-weight: 700; list-style: none; }772+.later summary { cursor: pointer; font-size: 0.9375rem; font-weight: 700; list-style: none; }
773 .later-row {773 .later-row {
774 display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0;774 display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0;
775 border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);775 border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
@@ -778,7 +778,7 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d
778 .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); position: relative; }778 .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); position: relative; }
779 .chip {779 .chip {
780 display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;780 display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
781- border-radius: 999px; cursor: pointer; font-size: 14px;781+ border-radius: 999px; cursor: pointer; font-size: 0.875rem;
782 border: 1px solid var(--color-divider);782 border: 1px solid var(--color-divider);
783 }783 }
784 .chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }784 .chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
@@ -795,18 +795,18 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d
795 background: var(--color-accent-700); color: var(--color-bg);795 background: var(--color-accent-700); color: var(--color-bg);
796 display: flex; align-items: center; justify-content: center;796 display: flex; align-items: center; justify-content: center;
797 }797 }
798-.done-name { font-family: var(--font-heading); font-size: 21px; text-wrap: pretty; }798+.done-name { font-family: var(--font-heading); font-size: 1.3125rem; text-wrap: pretty; }
799 .done-head { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); }799 .done-head { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); }
800-.done-head h2 { margin: 0; font-size: 15px; }800+.done-head h2 { margin: 0; font-size: 0.9375rem; }
801 .swt-check {801 .swt-check {
802 margin-left: auto; display: flex; align-items: center; gap: 8px;802 margin-left: auto; display: flex; align-items: center; gap: 8px;
803- font-size: 13px; cursor: pointer; position: relative;803+ font-size: 0.8125rem; cursor: pointer; position: relative;
804 }804 }
805 .swt-check input { position: absolute; width: 1px; height: 1px; opacity: 0; }805 .swt-check input { position: absolute; width: 1px; height: 1px; opacity: 0; }
806 .swt-check:has(input:checked) .swt { background: var(--color-accent-700); }806 .swt-check:has(input:checked) .swt { background: var(--color-accent-700); }
807 .swt-check:has(input:checked) .swt .knob { transform: translateX(18px); }807 .swt-check:has(input:checked) .swt .knob { transform: translateX(18px); }
808 .swt-check:has(input:focus-visible) .swt { outline: 2px solid var(--color-accent); outline-offset: 2px; }808 .swt-check:has(input:focus-visible) .swt { outline: 2px solid var(--color-accent); outline-offset: 2px; }
809-.done-note { font-size: 13px; opacity: .7; }809+.done-note { font-size: 0.8125rem; opacity: .7; }
810 .done-sec .done-body { transition: opacity .15s ease; }810 .done-sec .done-body { transition: opacity .15s ease; }
811 /* Section désactivée : atténuée, mais elle reste lisible et focusable — donc811 /* Section désactivée : atténuée, mais elle reste lisible et focusable — donc
812 soumise à l'AA. .35 tombait à 2:1, et à 1,6:1 pour les textes déjà à .7.812 soumise à l'AA. .35 tombait à 2:1, et à 1,6:1 pour les textes déjà à .7.
@@ -860,7 +860,7 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d
860 /* Sélecteur de langue (Réglages). */860 /* Sélecteur de langue (Réglages). */
861 .lang-pill {861 .lang-pill {
862 display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px;862 display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px;
863- border-radius: 999px; cursor: pointer; font: inherit; font-size: 14px;863+ border-radius: 999px; cursor: pointer; font: inherit; font-size: 0.875rem;
864 border: 1px solid var(--color-divider); background: transparent;864 border: 1px solid var(--color-divider); background: transparent;
865 color: var(--color-text); min-height: 40px;865 color: var(--color-text); min-height: 40px;
866 }866 }
@@ -878,7 +878,7 @@ a.times-link { flex-direction: row; align-items: center; text-decoration: none;
878 left: var(--space-4); right: var(--space-4);878 left: var(--space-4); right: var(--space-4);
879 background: var(--color-neutral-900); color: var(--color-neutral-100);879 background: var(--color-neutral-900); color: var(--color-neutral-100);
880 padding: var(--space-3) var(--space-4); border-radius: 999px;880 padding: var(--space-3) var(--space-4); border-radius: 999px;
881- font-size: 14px; text-align: center; box-shadow: var(--shadow-md);881+ font-size: 0.875rem; text-align: center; box-shadow: var(--shadow-md);
882 /* Apparition, puis fondu automatique après 5 s — zéro JS. */882 /* Apparition, puis fondu automatique après 5 s — zéro JS. */
883 animation: tt-drop .18s ease-out, tt-fade .4s ease-in 1.5s forwards; z-index: 5;883 animation: tt-drop .18s ease-out, tt-fade .4s ease-in 1.5s forwards; z-index: 5;
884 }884 }
@@ -918,12 +918,12 @@ a.times-link { flex-direction: row; align-items: center; text-decoration: none;
918 .rail-brand {918 .rail-brand {
919 display: flex; align-items: center; gap: 10px;919 display: flex; align-items: center; gap: 10px;
920 padding: 0 var(--space-3); margin-bottom: var(--space-6);920 padding: 0 var(--space-3); margin-bottom: var(--space-6);
921- font-family: var(--font-heading); font-size: 22px; letter-spacing: -0.02em;921+ font-family: var(--font-heading); font-size: 1.375rem; letter-spacing: -0.02em;
922 }922 }
923 .rail-brand svg { display: block; flex: none; }923 .rail-brand svg { display: block; flex: none; }
924 .tab {924 .tab {
925 flex: 0 0 auto; flex-direction: row; justify-content: flex-start;925 flex: 0 0 auto; flex-direction: row; justify-content: flex-start;
926- gap: var(--space-3); padding: 11px var(--space-3); font-size: 15px;926+ gap: var(--space-3); padding: 11px var(--space-3); font-size: 0.9375rem;
927 color: color-mix(in srgb, var(--color-text) 70%, transparent);927 color: color-mix(in srgb, var(--color-text) 70%, transparent);
928 }928 }
929 .tab[aria-current="page"] { background: var(--color-accent-2-200); color: var(--color-accent-700); }929 .tab[aria-current="page"] { background: var(--color-accent-2-200); color: var(--color-accent-700); }