/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ PAYENCASH SOLUTION — LE LOOK DE L'ESPACE DES MARQUES (23/09, fondatrice : « modifie le visuel de chaque page, adapte au contenu ; “de quoi faire parler tes bons” : bonne idée mais design froid, pas de logique ; on doit faire comprendre à la cible facilement, et l'usage doit être facile » — puis, le soir : « ton design de haut de page est trop lourd, où sont les onglets »). UNE SEULE FEUILLE POUR TOUS LES ÉCRANS : un en-tête léger (icône teintée, titre, promesse), « comment ça marche » replié derrière un mot, la sous-navigation des pages à sections (retour + onglets), les grands nombres, les états vides qui disent quoi faire. Rien ici ne porte de texte : les mots viennent des pages, qui les lisent du référentiel. ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */ .tk-hero{padding:6px 16px 0;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px} .tk-hero .tx{min-width:0;flex:1 1 260px} /* (24/09, soir) l'action principale de la page, dans l'en-tête : sous le titre sur téléphone, à sa droite sur bureau */ .tk-hero-actions{flex:none;display:flex;flex-wrap:wrap;gap:8px} .tk-hero-actions .pec-cta{width:auto;height:44px;padding:0 18px;font-size:14px;min-width:0} .tk-hero h1{margin:0;font-size:24px;line-height:1.15;font-weight:800;letter-spacing:-.6px;color:var(--color-ink);text-wrap:balance;overflow-wrap:anywhere} .tk-hero .sub{margin:4px 0 0;font-size:12.5px;line-height:1.5;color:var(--color-muted);max-width:42ch} /* « comment ça marche » : un lien texte, discret, qui déplie trois pas numérotés */ .tk-pas{margin:6px 16px 0;font-size:11.5px} .tk-pas summary{display:inline-flex;align-items:center;gap:3px;list-style:none;cursor:pointer;padding:4px 0;font-weight:800;color:var(--color-primary-dark)} .tk-pas summary::-webkit-details-marker{display:none} .tk-pas summary svg{width:14px;height:14px;transition:transform .18s ease} .tk-pas[open] summary svg{transform:rotate(90deg)} .tk-pas ol{margin:4px 0 0;padding:0;list-style:none;counter-reset:pas;display:grid;gap:6px} .tk-pas li{counter-increment:pas;display:flex;gap:8px;align-items:flex-start;line-height:1.4;font-weight:600;color:var(--color-ink)} .tk-pas li::before{content:counter(pas);flex:none;width:19px;height:19px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center; background:var(--tk-teinte-fond,#E3F3EA);color:var(--tk-teinte,#164A3C);font-size:10.5px;font-weight:800} @media (prefers-reduced-motion:reduce){.tk-pas summary svg{transition:none}} /* la sous-navigation d'une page à sections : le retour rond de la maison (.pec-back), le titre, puis les onglets */ .tk-sousnav{display:flex;align-items:center;gap:12px;padding:8px 16px 0} .tk-sousnav .retour{display:flex;align-items:center;justify-content:center;flex:none;width:38px;height:38px;border-radius:999px;background:var(--color-card);box-shadow:var(--shadow-card);color:var(--color-ink);text-decoration:none} .tk-sousnav .retour svg{width:18px;height:18px} .tk-sousnav .retour span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .tk-sousnav .tx{min-width:0;flex:1} .tk-sousnav .titre{margin:0;font-size:17px;line-height:1.2;font-weight:800;letter-spacing:-.3px;color:var(--color-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tk-sousnav .sous{margin:2px 0 0;font-size:11.5px;line-height:1.4;color:var(--color-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tk-onglets{display:flex;gap:6px;overflow-x:auto;padding:12px 16px 2px;scrollbar-width:none;-webkit-overflow-scrolling:touch} .tk-onglets::-webkit-scrollbar{display:none} .tk-onglets a{flex:none;border-radius:999px;padding:6px 11px;font-size:11.5px;font-weight:800;text-decoration:none; background:var(--color-card);box-shadow:var(--shadow-card);color:var(--color-muted)} .tk-onglets a[aria-current]{background:var(--color-ink);color:#fff} /* une carte visée par un lien « régler › » : on y arrive, elle se signale */ .tc-cible{animation:tkCible 1.6s ease-out 1} @keyframes tkCible{0%{box-shadow:0 0 0 3px var(--color-primary)}100%{box-shadow:var(--shadow-card)}} /* les grands nombres, chaleureux */ .tk-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px} .tk-kpi{border-radius:16px;background:var(--color-card);box-shadow:var(--shadow-card);padding:12px 13px;position:relative;overflow:hidden} .tk-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tk-teinte-2,#1E7A50);border-radius:4px 0 0 4px} .tk-kpi .k{font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--color-muted)} .tk-kpi .v{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--color-ink);margin-top:2px;font-variant-numeric:tabular-nums} .tk-kpi .s{font-size:10.5px;line-height:1.4;color:var(--color-muted);margin-top:1px} /* un état vide dit quoi faire, il ne laisse pas un blanc */ .tk-vide{display:flex;gap:11px;align-items:flex-start;border-radius:14px;background:var(--color-mint);padding:12px 13px;font-size:12px;line-height:1.55;color:var(--color-mint-ink)} .tk-vide svg{flex:none;width:20px;height:20px;color:var(--color-primary-dark);margin-top:1px} .tk-vide b{color:var(--color-ink)} /* les teintes par page : chaque écran a la sienne, la marque reste la même */ [data-tk="bons"]{--tk-teinte:#164A3C;--tk-teinte-2:#1E7A50;--tk-teinte-fond:#E3F3EA} [data-tk="paiement"]{--tk-teinte:#1C3F5A;--tk-teinte-2:#2C6E9E;--tk-teinte-fond:#E4EEF6} [data-tk="outils"]{--tk-teinte:#4A2E5A;--tk-teinte-2:#8A4FA6;--tk-teinte-fond:#EFE6F4} [data-tk="compte"]{--tk-teinte:#5A4A1E;--tk-teinte-2:#8A7A2E;--tk-teinte-fond:#F3EEDC} [data-tk="demandes"]{--tk-teinte:#5A3A22;--tk-teinte-2:#A6633A;--tk-teinte-fond:#F5E9E0} [data-tk="porte"]{--tk-teinte:#164A3C;--tk-teinte-2:#3FD99B;--tk-teinte-fond:#E3F3EA} /* ══ (23/09, soir — audit) LES BRIQUES QUE TROIS ÉCRANS RÉÉCRIVAIENT CHACUN ══════════════════════════════════════ Bon d'achat, Paiement et Outils portaient chacun leur ligne de liste, leur jauge, leur refus, leur alerte, leur « régler › » et leurs états vides — trois copies, trois dérives possibles (une hauteur de jauge à 6 px ici, 7 là). Une seule écriture ; les pages n'ont plus de