/* ============================================================ TOLO PAY — SYSTÈME DE DESIGN ------------------------------------------------------------ Ce fichier remplace l'ancienne approche « thème sombre ajouté par-dessus ». Il n'y a plus un design clair rapiécé : il y a UN système de jetons, et deux thèmes qui en dérivent. Les couleurs de marque sont intouchées : vert #00BFA5 bleu #003087 Le logo TP et l'icône de l'application ne sont pas modifiés. ============================================================ */ /* ══════════════════════════════════════════════════════════ 1. JETONS — THÈME CLAIR ══════════════════════════════════════════════════════════ */ :root{ /* Surfaces, de la plus basse à la plus haute */ --bg-app: #F4F6F9; --surface: #FFFFFF; --surface-2: #F7F9FB; --surface-3: #EEF1F5; /* Encre */ --ink: #10141C; /* titres, montants */ --ink-2: #5A6472; /* libellés, secondaire */ --ink-3: #69737F; /* indications discrètes */ /* Lignes — une seule épaisseur dans toute l'application */ --line: #E4E8EE; --line-soft: #EEF1F5; /* Marque — inchangée */ --brand: #00BFA5; --brand-dark: #00897B; --brand-deep: #00695C; --navy: #003087; --accent: #0070BA; /* Le vert de marque n'a pas un contraste suffisant comme couleur de TEXTE sur fond blanc (4,3 pour 4,5 requis). Cette variante assombrie sert au texte ; le vert d'origine reste utilisé pour les fonds et les aplats. */ --brand-text: #00786A; /* États */ --ok: #157A33; --warn: #9A5D00; --err: #C5221F; /* Rayons — cinq valeurs, pas quatorze */ --r1: 8px; /* puces, petits champs */ --r2: 12px; /* champs, boutons */ --r3: 16px; /* cartes */ --r4: 20px; /* cartes principales */ --r5: 24px; /* modales, bannière */ /* Espacements — échelle de 4 */ --sp1: 4px; --sp2: 8px; --sp3: 12px; --sp4: 16px; --sp5: 24px; --sp6: 32px; /* Ombres — discrètes, jamais marquées */ --e1: 0 1px 2px rgba(16,20,28,.05); --e2: 0 2px 6px rgba(16,20,28,.06); --e3: 0 6px 20px rgba(16,20,28,.09); --e-brand: 0 3px 12px rgba(0,137,123,.20); /* Mouvement */ --ease: cubic-bezier(.4,0,.2,1); --fast: .16s; --mid: .24s; /* Compatibilité avec les noms hérités */ --bg: var(--bg-app); --s1: var(--surface); --s2: var(--surface-2); --s3: var(--surface-3); --txt: var(--ink); --mut: var(--ink-2); --bor: var(--line); --bor2: var(--line-soft); --gold: var(--brand); --g2: var(--brand-dark); --ora: var(--brand-dark); --blu: var(--accent); --b2: var(--navy); --grn: var(--ok); --yel: var(--warn); --red: var(--err); --radius: var(--r3); --shadow: var(--e2); } /* La classe posée par la garde anti-clignotement (avant le premier rendu) doit produire exactement le même thème que la classe posée ensuite sur . */ html.tp-dark-pre, html.tp-dark-pre body{ background:#0B0E13 !important; color:#EAEEF4; } /* Aucune transition tant que la page charge : le passage de la classe pré-rendu à la classe définitive doit être instantané, sinon on voit un fondu au démarrage. */ html.tp-booting *, html.tp-booting *::before, html.tp-booting *::after{ transition: none !important; animation: none !important; } /* ══════════════════════════════════════════════════════════ 2. JETONS — THÈME SOMBRE Les mêmes noms, d'autres valeurs. Aucune règle ne connaît le thème : elles ne connaissent que les jetons. ══════════════════════════════════════════════════════════ */ body.tp-dark, html.tp-dark-pre body{ --brand-text: #2FD9BE; --bg-app: #0B0E13; --surface: #141922; --surface-2: #1B212B; --surface-3: #232A36; --ink: #EAEEF4; --ink-2: #96A1B0; --ink-3: #6C7787; --line: rgba(234,238,244,.09); --line-soft: rgba(234,238,244,.055); /* Marque éclaircie pour rester lisible sur fond sombre. Même teinte, luminosité adaptée — l'identité est préservée. */ --brand: #2FD9BE; --brand-dark: #17B79E; --brand-deep: #0E8A77; --navy: #6BA6F2; --accent: #5AA9F0; --ok: #43B95C; --warn: #DCA032; --err: #F0645C; --e1: 0 1px 2px rgba(0,0,0,.4); --e2: 0 2px 8px rgba(0,0,0,.42); --e3: 0 8px 28px rgba(0,0,0,.5); --e-brand: 0 3px 14px rgba(47,217,190,.18); color: var(--ink); } /* ══════════════════════════════════════════════════════════ 3. FOND DE PAGE ══════════════════════════════════════════════════════════ */ body{ background: var(--bg-app) !important; color: var(--ink); transition: background var(--mid) var(--ease), color var(--mid) var(--ease); } body.tp-dark{ background: radial-gradient(900px 500px at 10% -8%, rgba(47,217,190,.045), transparent 60%), var(--bg-app) !important; } /* Halo décoratif hérité : trop marqué, on l'atténue */ body::before{ opacity:.35 !important; } body.tp-dark::before{ opacity:.12 !important; } /* ══════════════════════════════════════════════════════════ 4. ÉCRAN DE CONNEXION Il restait entièrement blanc en mode sombre : ses couleurs étaient écrites en dur et une règle !important bloquait toute adaptation. ══════════════════════════════════════════════════════════ */ #AUTH, #LOGIN{ background: var(--bg-app) !important; } .auth-box, .lbox{ background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--r5) !important; box-shadow: var(--e3) !important; padding: var(--sp6) var(--sp5) var(--sp5) !important; } .auth-logo{ margin-bottom: var(--sp5) !important; } .atab{ border-radius: var(--r1) !important; transition: background var(--fast) var(--ease), color var(--fast) var(--ease) !important; } .atab.off{ background: var(--surface-2) !important; color: var(--ink-2) !important; } .atab.on { background: var(--brand) !important; color:#fff !important; } body.tp-dark .atab.on{ color:#062821 !important; } .ltitle, .lmark{ color: var(--ink) !important; } .lsub, .sdesc{ color: var(--ink-2) !important; } .lback{ color: var(--brand-text) !important; } /* ══════════════════════════════════════════════════════════ 5. CHAMPS DE SAISIE — un seul style partout ══════════════════════════════════════════════════════════ */ .inp, .linp, .sinp, .re-inp, .ainput, .hsearch input, select.inp, textarea.inp{ background: var(--surface-2) !important; border: 1px solid var(--line) !important; border-radius: var(--r2) !important; color: var(--ink) !important; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease), box-shadow var(--fast) var(--ease) !important; } .inp:focus, .linp:focus, .sinp:focus, .re-inp:focus, .ainput:focus, .hsearch input:focus{ border-color: var(--brand) !important; background: var(--surface) !important; box-shadow: 0 0 0 3px rgba(0,191,165,.12) !important; outline: none !important; } body.tp-dark .inp:focus, body.tp-dark .linp:focus, body.tp-dark .sinp:focus, body.tp-dark .re-inp:focus{ background: var(--surface-3) !important; box-shadow: 0 0 0 3px rgba(47,217,190,.14) !important; } .inp::placeholder, .linp::placeholder, .sinp::placeholder, .re-inp::placeholder, .ainput::placeholder, .hsearch input::placeholder{ color: var(--ink-3) !important; } /* ══════════════════════════════════════════════════════════ 6. CARTES — une seule définition ══════════════════════════════════════════════════════════ */ .rcard, .acard, .panel, .quote, .tcard, .kcard, .pc, .w-cell, .hfilter, .trust, .why-i, .notif, .mcard, .kpi, .agcard, .vcard, .re, .pmbox, .modal{ background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--r3) !important; box-shadow: var(--e1) !important; transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease) !important; } .rcard, .modal, .pmbox{ border-radius: var(--r4) !important; } .rcard{ box-shadow: var(--e2) !important; } .pchd, .vcard-hd{ background: var(--surface-2) !important; border-bottom: 1px solid var(--line) !important; } /* Sélection */ .mcard.on{ border-color: var(--brand) !important; box-shadow: 0 0 0 1px var(--brand) inset, var(--e2) !important; background: color-mix(in srgb, var(--brand) 5%, var(--surface)) !important; } .mcard:active:not(:disabled){ transform: scale(.995); } /* ══════════════════════════════════════════════════════════ 7. TEXTE — hiérarchie constante ══════════════════════════════════════════════════════════ */ .slb, .pcttl, .pg-title, .kpi-v, .quote-v, .w-val, .pf-nm, .pf-v, .notif-t, .why-t, .trust-txt, .mc-label, .re-val, .pmdv, .pmttl, .agkv, .lnm, .ti, .tid{ color: var(--ink) !important; } .quote-k, .pf-k, .mc-badge, .why-d, .trust-sub, .w-sub, .notif-d, .rate-sub, .hcount, .help, .kpi-l, .kpi-d, .pcsub, .pg-sub, .agkl, .re-lbl, .pmdl, .slbl, .clbl, .sb-sec, .sb-sub, .sb-ur, .rtime, .rlbl{ color: var(--ink-2) !important; } /* ══════════════════════════════════════════════════════════ 8. BOUTONS ══════════════════════════════════════════════════════════ */ .cta, .lbtn, .rcbtn, .m-close-btn, .pcbtn, .sb-out, .call-btn{ border-radius: var(--r2) !important; font-weight: 700 !important; transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast) var(--ease) !important; } .cta.gold, .lbtn, .rcbtn{ background: linear-gradient(135deg, var(--brand-dark), var(--brand-deep)) !important; color: #fff !important; border: none !important; box-shadow: var(--e-brand) !important; } body.tp-dark .cta.gold, body.tp-dark .lbtn, body.tp-dark .rcbtn{ color:#062821 !important; } .cta.dim, .m-close-btn, .sb-out, .pcbtn{ background: var(--surface-2) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; box-shadow: none !important; } .cta.dim:hover, .m-close-btn:hover, .sb-out:hover{ background: var(--surface-3) !important; } .cta:active, .lbtn:active, .rcbtn:active, .m-close-btn:active, .sb-out:active{ transform: scale(.985); } .cta:disabled{ opacity:.45; box-shadow:none !important; } /* ══════════════════════════════════════════════════════════ 9. NAVIGATION, ONGLETS, ÉTAPES ══════════════════════════════════════════════════════════ */ .bnav{ background: color-mix(in srgb, var(--surface) 92%, transparent) !important; border-top: 1px solid var(--line) !important; backdrop-filter: blur(14px); } .bni{ color: var(--ink-2) !important; transition: color var(--fast) var(--ease) !important; } .bni.on{ color: var(--brand-text) !important; } .tbtn, .hchip, .qa{ background: var(--surface-2) !important; color: var(--ink-2) !important; border: 1px solid var(--line) !important; border-radius: var(--r1) !important; } .tbtn.on, .hchip.on, .qa.on{ background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; } body.tp-dark .tbtn.on, body.tp-dark .hchip.on, body.tp-dark .qa.on{ color:#062821 !important; } .sdot .sci{ background: var(--surface-3) !important; color: var(--ink-2) !important; transition: background var(--mid) var(--ease), color var(--mid) var(--ease) !important; } .sdot.on .sci{ background: var(--brand) !important; color:#fff !important; } .sdot.ok .sci{ background: var(--ok) !important; color:#fff !important; } body.tp-dark .sdot.on .sci, body.tp-dark .sdot.ok .sci{ color:#062821 !important; } .sconn{ background: var(--line) !important; } /* ══════════════════════════════════════════════════════════ 10. TABLEAUX ══════════════════════════════════════════════════════════ */ .tbl{ color: var(--ink) !important; } .tbl th{ background: var(--surface-2) !important; color: var(--ink-2) !important; border-bottom: 1px solid var(--line) !important; font-weight: 700 !important; } .tbl td{ border-bottom: 1px solid var(--line-soft) !important; color: var(--ink) !important; } .tbl tbody tr{ transition: background var(--fast) var(--ease); } .tbl tbody tr:hover td{ background: var(--surface-2) !important; } /* ══════════════════════════════════════════════════════════ 11. MODALES ET VOILES ══════════════════════════════════════════════════════════ */ .mbg, .pmbg{ background: rgba(9,12,17,.55) !important; backdrop-filter: blur(3px); } body.tp-dark .mbg, body.tp-dark .pmbg{ background: rgba(0,0,0,.7) !important; } .modal, .pmbox{ border-radius: var(--r5) !important; box-shadow: var(--e3) !important; } .pmdet, .pmzone{ background: var(--surface-2) !important; border: 1px solid var(--line) !important; border-radius: var(--r2) !important; } /* ══════════════════════════════════════════════════════════ 12. DASHBOARD ADMIN ══════════════════════════════════════════════════════════ */ .sidebar{ background: var(--surface) !important; border-right: 1px solid var(--line) !important; } body.tp-dark .sidebar{ background: #0E131A !important; } .topbar{ background: color-mix(in srgb, var(--surface) 92%, transparent) !important; border-bottom: 1px solid var(--line) !important; backdrop-filter: blur(14px); } .ni{ color: var(--ink-2) !important; border-radius: var(--r1) !important; transition: background var(--fast) var(--ease), color var(--fast) var(--ease) !important; } .ni:hover{ background: var(--surface-2) !important; color: var(--ink) !important; } .ni.on{ background: color-mix(in srgb, var(--brand) 12%, transparent) !important; color: var(--brand-text) !important; } .sb-un, .sb-name{ color: var(--ink) !important; } .sb-user{ border-top: 1px solid var(--line) !important; } .sb-av, .kpi-ic, .agav{ background: var(--surface-3) !important; } .ticker, .rh-item{ background: var(--surface-2) !important; border: 1px solid var(--line) !important; border-radius: var(--r2) !important; } .cbar{ background: var(--surface-3) !important; border-radius: 999px !important; } .cfill{ border-radius: 999px !important; } .cfv{ color:#fff !important; } .toast{ background: var(--surface-3) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: var(--r2) !important; box-shadow: var(--e3) !important; } .uzone{ background: var(--surface-2) !important; border: 1px dashed var(--line) !important; border-radius: var(--r2) !important; } /* ══════════════════════════════════════════════════════════ 13. RATTRAPAGE DES STYLES ÉCRITS DANS L'ATTRIBUT style Certains blocs portent leurs couleurs en ligne. On les ramène dans le système plutôt que d'éditer chaque balise. ══════════════════════════════════════════════════════════ */ [style*="#FFFFFF"], [style*="#ffffff"]{ background: var(--surface) !important; border-color: var(--line) !important; } [style*="#1A1A2E"]{ color: var(--ink) !important; } [style*="#6B7280"]{ color: var(--ink-2) !important; } [style*="#E5E7EB"]{ border-color: var(--line) !important; } [style*="#F9FAFB"], [style*="#F3F4F6"], [style*="#F0F2F5"]{ background: var(--surface-2) !important; } /* La bannière et les boutons de marque gardent leurs couleurs */ .hero, .hero *, .cta.gold, .lbtn, .rcbtn, .pf-ava, .cfill{ background-image: revert; } .hero{ background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-deep) 55%, var(--navy) 100%) !important; color: #fff !important; border: none !important; border-radius: var(--r5) !important; box-shadow: var(--e-brand) !important; } .hero-t, .hero-s{ color: #fff !important; } body.tp-dark .hero{ background: linear-gradient(135deg, #0C7466 0%, #095B4F 55%, #17407A 100%) !important; } /* ══════════════════════════════════════════════════════════ 14. RESPIRATION — espacements réguliers ══════════════════════════════════════════════════════════ */ .panel{ padding: var(--sp4) !important; } .acard{ padding: var(--sp4) !important; } .quote{ padding: var(--sp4) !important; } .w-cell{ padding: var(--sp4) !important; } .hfilter{ padding: var(--sp3) !important; } .notif{ padding: var(--sp3) !important; gap: var(--sp3) !important; } .trust{ padding: var(--sp2) var(--sp3) !important; } .why-i{ padding: var(--sp3) !important; } .mcard{ padding: var(--sp3) var(--sp4) !important; } .pf-row{ padding: var(--sp3) 0 !important; } .quote-row{ padding: var(--sp2) 0 !important; } /* ══════════════════════════════════════════════════════════ 15. LISIBILITÉ ══════════════════════════════════════════════════════════ */ body{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .rate-line .rl-to, .kpi-v, .w-val, .quote-v{ font-variant-numeric: tabular-nums; letter-spacing: -.01em; } /* ══════════════════════════════════════════════════════════ 16. FONDS PASTEL ÉCRITS EN LIGNE ------------------------------------------------------------ Des blocs d'information portent des fonds pastel figés (#E8F5E9 vert, #FFEBEE rouge, #FFF3E0 orange…) avec un texte sombre par-dessus. En mode sombre le fond restait clair : soit une tache blanche, soit un texte devenu illisible. On les convertit en aplats translucides, qui se posent naturellement sur la surface du thème actif. ══════════════════════════════════════════════════════════ */ body.tp-dark [style*="#E8F5E9"], body.tp-dark [style*="#E8F5F3"]{ background: color-mix(in srgb, var(--ok) 14%, transparent) !important; color: var(--ink) !important; } body.tp-dark [style*="#FFEBEE"]{ background: color-mix(in srgb, var(--err) 14%, transparent) !important; color: var(--ink) !important; } body.tp-dark [style*="#FFF3E0"], body.tp-dark [style*="#FFF8E1"]{ background: color-mix(in srgb, var(--warn) 16%, transparent) !important; color: var(--ink) !important; } body.tp-dark [style*="#E3F2FD"]{ background: color-mix(in srgb, var(--accent) 14%, transparent) !important; color: var(--ink) !important; } body.tp-dark [style*="#F3E5F5"]{ background: rgba(155,120,220,.15) !important; color: var(--ink) !important; } body.tp-dark [style*="#F5F7FA"]{ background: var(--surface-2) !important; color: var(--ink) !important; } /* Textes d'accent figés : on les remonte au niveau de lisibilité */ body.tp-dark [style*="#2E7D32"]{ color: var(--ok) !important; } body.tp-dark [style*="#C62828"]{ color: var(--err) !important; } body.tp-dark [style*="#F57F17"]{ color: var(--warn) !important; } body.tp-dark [style*="#9CA3AF"]{ color: var(--ink-2) !important; } body.tp-dark [style*="#1677FF"]{ color: var(--accent) !important; } body.tp-dark [style*="#071520"]{ color: var(--ink) !important; } /* Les marques partenaires gardent leur couleur officielle */ body.tp-dark [style*="#FF6600"]{ color:#FF8534 !important; } /* Orange Money */ body.tp-dark [style*="#25D366"]{ color:#25D366 !important; } /* WhatsApp */ /* ══════════════════════════════════════════════════════════ 17. FINITION — sobriété ══════════════════════════════════════════════════════════ */ /* Une seule courbe d'animation, une seule durée par usage */ *{ -webkit-tap-highlight-color: transparent; } /* Le focus clavier reste visible : exigence d'accessibilité, et signe de sérieux pour un audit. */ :focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r1); } /* Séparateurs : une seule épaisseur, une seule couleur */ hr{ border:none; border-top:1px solid var(--line); margin: var(--sp4) 0; } /* Images de preuve : cadre homogène */ .pimg, .uprev img{ border-radius: var(--r2) !important; border: 1px solid var(--line) !important; } /* Barres de progression */ .cbar, .spark{ background: var(--surface-3) !important; } /* Badges : même géométrie partout */ .badge{ border-radius: 999px !important; padding: 3px 9px !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .2px; border: 1px solid transparent; } /* ══════════════════════════════════════════════════════════ 18. ÉCHELLE TYPOGRAPHIQUE ------------------------------------------------------------ L'application comptait 26 tailles de police différentes par fichier — 7px, 7.5px, 8px, 8.5px, 9px, 9.5px… Des écarts d'un demi-pixel que personne ne perçoit comme intentionnels, mais dont l'accumulation donne l'impression d'un assemblage. Sept tailles suffisent. Chaque niveau a un rôle. ══════════════════════════════════════════════════════════ */ :root{ --t-micro: 10px; /* mentions légales, horodatages */ --t-label: 11px; /* libellés de champ, badges */ --t-small: 12px; /* texte secondaire */ --t-body: 14px; /* corps de texte, champs de saisie */ --t-lead: 16px; /* sous-titres, montants secondaires */ --t-title: 20px; /* titres de section */ --t-hero: 30px; /* montant principal, taux du jour */ /* Graisses — trois valeurs, pas huit */ --w-normal: 400; --w-medium: 600; --w-bold: 700; /* Interlignage */ --lh-tight: 1.25; /* titres et montants */ --lh-body: 1.55; /* texte courant */ } /* Hiérarchie appliquée */ .rate-line .rl-to{ font-size:var(--t-hero) !important; font-weight:var(--w-bold) !important; line-height:var(--lh-tight) !important; letter-spacing:-.02em; } .kpi-v, .w-val{ font-size:var(--t-title) !important; font-weight:var(--w-bold) !important; line-height:var(--lh-tight) !important; letter-spacing:-.01em; } .pg-title, .pcttl, .pf-nm, .hero-t{ font-size:var(--t-lead) !important; font-weight:var(--w-bold) !important; line-height:var(--lh-tight) !important; } .mc-label, .quote-v, .notif-t, .why-t, .pf-v, .trust-txt{ font-size:var(--t-body) !important; font-weight:var(--w-medium) !important; } .inp, .linp, .sinp, .re-inp, .ainput, .hsearch input, .tbl td{ font-size:var(--t-body) !important; } .quote-k, .pf-k, .notif-d, .hero-s, .why-d, .pcsub, .pg-sub, .rate-sub{ font-size:var(--t-small) !important; line-height:var(--lh-body) !important; } .slb, .rlbl, .w-lbl, .kpi-l, .bfield label, .tbl th, .badge, .hchip{ font-size:var(--t-label) !important; font-weight:var(--w-medium) !important; letter-spacing:.01em; } .notif-w, .help, .hcount, .trust-sub, .w-sub, .mc-badge, .sdlbl, .rate-fresh{ font-size:var(--t-micro) !important; } /* Les libellés cessent d'être en capitales : c'est un tic d'interface, et les capitales se lisent moins bien. */ .slb, .rlbl, .w-lbl, .kpi-l{ text-transform:none !important; letter-spacing:.005em !important; } /* Chiffres alignés partout où on compare des montants */ .rl-to, .kpi-v, .w-val, .quote-v, .tbl td, .re-val{ font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ══════════════════════════════════════════════════════════ 19. ÉCHELLE D'ESPACEMENT 22 valeurs de padding différentes ramenées à six. ══════════════════════════════════════════════════════════ */ .panel, .acard, .quote, .w-cell, .kpi, .agcard, .vcard, .re{ padding: var(--sp4) !important; } .hfilter, .notif, .why-i, .pmdet, .rh-item{ padding: var(--sp3) !important; } .trust, .badge, .hchip{ padding: var(--sp2) var(--sp3) !important; } .mcard{ padding: var(--sp3) var(--sp4) !important; } .modal, .pmbox, .lbox, .auth-box{ padding: var(--sp5) !important; } .hero{ padding: var(--sp5) !important; } .tbl th, .tbl td{ padding: var(--sp3) !important; } .inp, .linp, .sinp, .re-inp{ padding: var(--sp3) var(--sp4) !important; } .cta, .lbtn{ padding: var(--sp4) !important; } /* Rythme vertical constant entre les blocs */ .panel > * + *{ margin-top: var(--sp3); } .pc + .pc, .kpi + .kpi{ margin-top: var(--sp3); } /* ══════════════════════════════════════════════════════════ 20. ÉCRAN DE CONNEXION ------------------------------------------------------------ C'est le premier écran qu'un partenaire ouvrira. Il portait encore des styles écrits à la main dans le HTML : bordures de 1,5 px, un caractère « ▼ » en guise de flèche, un bouton en capitales suivi d'une flèche. ══════════════════════════════════════════════════════════ */ #AUTH{ display:flex; align-items:center; justify-content:center; padding: var(--sp5) var(--sp4); min-height:100dvh; } .auth-box{ width:100%; max-width:400px; padding: var(--sp6) var(--sp5) var(--sp5) !important; } .auth-logo{ text-align:center; margin-bottom: var(--sp5) !important; } .auth-mark{ border-radius: var(--r3); margin-bottom: var(--sp3); } .auth-title{ font-size: var(--t-title) !important; font-weight: var(--w-bold) !important; letter-spacing:.06em; color: var(--ink); } .auth-sub{ font-size: var(--t-small) !important; color: var(--ink-2); margin-top: var(--sp1); } /* Onglets Connexion / Inscription — un rail, pas deux boutons */ .auth-tabs{ display:flex; gap:2px; padding:3px; background: var(--surface-2); border:1px solid var(--line); border-radius: var(--r2); margin-bottom: var(--sp5) !important; } .atab{ flex:1; border:none !important; cursor:pointer; padding: var(--sp3) !important; border-radius: calc(var(--r2) - 4px) !important; font-family:inherit; font-size: var(--t-body) !important; font-weight: var(--w-medium) !important; background:transparent !important; color: var(--ink-2) !important; transition: background var(--fast) var(--ease), color var(--fast) var(--ease) !important; } .atab.on{ background: var(--surface) !important; color: var(--ink) !important; box-shadow: var(--e1) !important; } body.tp-dark .atab.on{ background: var(--surface-3) !important; } /* Ligne indicatif + numéro */ .phone-row{ display:flex; gap: var(--sp2); margin-bottom: var(--sp3); align-items:stretch; } .prefix-wrap{ position:relative; flex-shrink:0; } .prefix-wrap select{ appearance:none; -webkit-appearance:none; background: var(--surface-2); border:1px solid var(--line); border-radius: var(--r2); padding: var(--sp3) 30px var(--sp3) var(--sp3); color: var(--ink); font-family:inherit; font-size: var(--t-body); height:100%; min-width:96px; cursor:pointer; outline:none; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); } .prefix-wrap select:focus{ border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 3px rgba(0,191,165,.12); } /* Chevron dessiné, plutôt qu'un caractère « ▼ » dont le rendu varie d'un appareil à l'autre. */ .prefix-wrap::after{ content:''; position:absolute; right:12px; top:50%; width:7px; height:7px; margin-top:-5px; border-right:1.5px solid var(--ink-2); border-bottom:1.5px solid var(--ink-2); transform:rotate(45deg); pointer-events:none; } .phone-row .inp{ flex:1; margin-bottom:0 !important; } /* Champ mot de passe et son bouton d'affichage */ .pass-wrap{ position:relative; margin-bottom: var(--sp3); } .pass-wrap .inp{ margin-bottom:0 !important; padding-right:46px !important; } .pass-toggle{ position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color: var(--ink-2); padding:6px; line-height:0; border-radius: var(--r1); transition: color var(--fast) var(--ease), background var(--fast) var(--ease); } .pass-toggle:hover{ color: var(--ink); background: var(--surface-2); } /* Bouton principal — sentence case, sans flèche décorative */ .btn-teal{ width:100%; background: linear-gradient(135deg, var(--brand-dark), var(--brand-deep)) !important; color:#fff !important; border:none !important; border-radius: var(--r2) !important; padding: var(--sp4) !important; font-family:inherit !important; font-size: var(--t-body) !important; font-weight: var(--w-bold) !important; letter-spacing:0 !important; text-transform:none !important; cursor:pointer; box-shadow: var(--e-brand) !important; transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease) !important; } body.tp-dark .btn-teal{ color:#062821 !important; } .btn-teal:active{ transform:scale(.985); } .btn-teal:disabled{ opacity:.5; box-shadow:none !important; transform:none; } .auth-links{ text-align:center; margin-top: var(--sp3); } .auth-links span, .auth-switch span{ color: var(--brand-text); cursor:pointer; font-weight: var(--w-medium); } .auth-switch{ text-align:center; margin-top: var(--sp4); padding-top: var(--sp4); border-top:1px solid var(--line-soft); font-size: var(--t-small); color: var(--ink-2); } /* Indicateur de robustesse du mot de passe */ .pw-meter{ display:flex; gap:3px; margin-top: var(--sp2); } .pw-seg{ flex:1; height:3px; border-radius:2px; background: var(--surface-3); transition: background var(--mid) var(--ease); } .pw-seg.on1{ background: var(--err); } .pw-seg.on2{ background: var(--warn); } .pw-seg.on3{ background: var(--ok); } .pw-note{ font-size: var(--t-micro); color: var(--ink-2); margin-top: var(--sp1); }