/* ================================================================ Kopra ONE — Édition sobre ---------------------------------------------------------------- Cette feuille est chargée UNIQUEMENT par l'application (app-shell.js pose la classe `kopra-app` sur ). Le site vitrine partage `styles.css` et ne doit pas bouger : c'est pourquoi tout ce qui suit est porté par `:root.kopra-app`. Trois principes, et rien d'autre : 1. UN SEUL JEU DE JETONS. L'audit a relevé 172 couleurs codées en dur, 32 tailles de police et 9 graisses. Ici : une douzaine de couleurs, sept tailles, trois graisses, un rayon. 2. LA COULEUR PORTE UN SENS. Le bleu signale ce qui est actif ou cliquable ; le vert, l'orange et le rouge signalent un état. Rien n'est coloré pour décorer — d'où la neutralisation des dégradés en fin de fichier. 3. LE FILET PLUTÔT QUE L'OMBRE. Une seule ombre existe, réservée aux surfaces qui flottent réellement au-dessus de la page (menus, fenêtres). Les cartes se délimitent par un trait d'un pixel. ================================================================ */ :root.kopra-app { /* -- Le papier. Il est CHAUD, et c'est tout le principe : c'est lui qui apparaît entre les blocs et qui les sépare. Un fond blanc ou gris froid ne sépare rien. -- */ --bg: #FFFFFF; --bg-deep: #F4F4F6; --surface: #FFFFFF; --surface-2: #F7F7F9; --border: #E6E6EA; --border-strong: #D1D1D8; /* -- L'encre est presque noire, pas grise. C'est ce qui donne le contraste franc de Qonto, sans avoir besoin de gras. -- */ --text: #1C1B19; --text-muted: #6E6A65; --text-faint: #96918A; /* -- L'accent : un indigo-violet, entre le bleu de Kopra et le violet de Qonto. Il ne sert QU'aux liens et à l'état actif. Le bouton principal, lui, est noir. -- */ --primary: #4B3FD9; --primary-dark: #3D33B8; --primary-deeper: #332AA0; --primary-soft: #EFEDFC; --primary-border: #CFC9F5; --accent: #4B3FD9; --accent-2: #6B60E4; /* -- L'action principale. Noire : elle se voit sans crier, et laisse la couleur de marque à ce qui la mérite. -- */ --action: #1C1B19; --action-hover: #34322E; /* -- Sémantique, réchauffée pour tenir sur le papier -- */ --danger: #B3341C; --danger-soft: #FBEDE9; --warn: #8A5A00; --warn-soft: #FBF2E0; --ok: #2A6B4A; --ok-soft: #E7F2EB; /* -- Les angles s'ouvrent : 14 px pour un bloc, 10 pour un champ. -- */ --radius-sm: 10px; --radius: 14px; --radius-lg: 16px; --radius-xl: 18px; /* Echelle relevee d'un cran : le public de Kopra a souvent 70 ans et consulte quelques minutes par mois. Rien sous 13 px. */ --t-xs: 13px; --t-sm: 14px; --t-base: 15px; --t-md: 16px; --t-lg: 18px; --t-xl: 22px; --t-2xl: 28px; /* La mesure d'une page. Une ligne de 1700 px met l'etat d'un dossier a un ecran de son titre : l'oeil doit traverser la page pour relier deux informations qui vont ensemble. Les pages qui ont besoin de toute la largeur (le plan interactif) redefinissent cette valeur chez elles. */ --mesure: 1180px; --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --transition: .15s ease; /* -- Aucune ombre sur les blocs : c'est le papier qui les détache. L'ombre est réservée à ce qui flotte réellement. -- */ --shadow-xs: none; --shadow-sm: none; --shadow: none; --shadow-lg: none; --shadow-primary: none; --shadow-glow: 0 0 0 3px rgba(75, 63, 217, .16); --shadow-flottant: 0 16px 40px -14px rgba(28, 27, 25, .22), 0 2px 8px -2px rgba(28, 27, 25, .08); --grad-primary: none; --grad-accent: none; --grad-mesh: none; --sidebar-w: 252px; --sidebar-bg: #FFFFFF; --sidebar-text: #6E6A65; --sidebar-text-active: #1C1B19; --sidebar-hover: #F4F4F6; } /* ================================================================ Le bloc — la primitive de cette langue ---------------------------------------------------------------- Blanc, à grands angles, sans cadre ni ombre. Ce qui le sépare du suivant, c'est le papier entre les deux. C'est la seule règle de séparation de l'interface : dès qu'on ajoute un filet à l'intérieur d'un bloc, on retombe dans la soupe de lignes d'avant. ================================================================ */ :root.kopra-app .bloc { background: var(--surface); border-radius: var(--radius); padding: 26px 28px; /* Le fond etant blanc, ce n'est plus le papier qui separe les blocs : il leur faut un trait, sinon la page devient une seule surface. */ border: 1px solid var(--border); } @media (max-width: 640px) { :root.kopra-app .bloc { padding: 20px 18px; border-radius: 12px; } } /* L'action principale est noire. La couleur de marque reste aux liens. */ :root.kopra-app .btn { background: var(--action); } :root.kopra-app .btn:hover { background: var(--action-hover); } :root.kopra-app .btn--ghost, :root.kopra-app .btn--secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); } :root.kopra-app .btn--ghost:hover, :root.kopra-app .btn--secondary:hover { background: var(--surface-2); border-color: var(--text-faint); } /* La barre latérale est sur le papier, pas sur du blanc : elle fait partie du fond, et la zone de travail se détache d'elle. */ :root.kopra-app .sidebar { background: var(--bg); border-right: 1px solid var(--border); } :root.kopra-app .main { background: var(--bg); } :root.kopra-app .main-topbar { background: rgba(255, 255, 255, .88); border-bottom: 1px solid var(--border); } /* ================================================================ Réglages généraux ================================================================ */ :root.kopra-app body { background: var(--bg); color: var(--text-muted); font-family: var(--font-sans); font-size: var(--t-base); -webkit-font-smoothing: antialiased; } /* Les chiffres alignés en colonne doivent s'aligner réellement. */ :root.kopra-app .kpi-tile .value, :root.kopra-app table td, :root.kopra-app .mono, :root.kopra-app code { font-variant-numeric: tabular-nums; } :root.kopra-app :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; } /* ================================================================ Barre latérale ---------------------------------------------------------------- Six portes au lieu de dix-sept entrées. Une porte qui contient plusieurs pages ouvre sa liste quand on est dedans : la barre montre toujours où l'on est, jamais tout à la fois. ================================================================ */ :root.kopra-app .sidebar { background: var(--sidebar-bg); border-right: 1px solid var(--border); } :root.kopra-app .sb-brand { padding: 22px 20px 18px; } :root.kopra-app .sb-brand .brand-logo { width: 20px; } :root.kopra-app .sb-brand .brand-label { font-size: var(--t-md); font-weight: 400; letter-spacing: .01em; color: var(--text); } :root.kopra-app .sb-brand .brand-label strong { font-weight: 600; } :root.kopra-app .sb-copro { margin: 0 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: border-color var(--transition), background var(--transition); } :root.kopra-app .sb-copro:hover { background: var(--surface-2); border-color: var(--border-strong); } :root.kopra-app .sb-copro-label { font-size: var(--t-xs); font-weight: 500; letter-spacing: .08em; color: var(--text-faint); margin-bottom: 4px; } :root.kopra-app .sb-copro-name { font-size: var(--t-base); font-weight: 600; color: var(--text); } :root.kopra-app .sb-copro-ref { font-size: 10.5px; letter-spacing: .04em; color: var(--text-faint); background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; } :root.kopra-app .sb-nav { padding: 14px 10px 8px; } /* Le surtitre de groupe disparaît : les portes se suffisent. */ :root.kopra-app .sb-nav-section-title { font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; color: var(--text-faint); padding: 16px 12px 6px; } :root.kopra-app .sb-item { gap: 11px; padding: 8px 12px; margin: 1px 0; border-radius: var(--radius); border-left: 0; font-size: var(--t-base); font-weight: 400; color: var(--sidebar-text); transition: background var(--transition), color var(--transition); } :root.kopra-app .sb-item i { width: 17px; font-size: 13px; color: var(--text-faint); transition: color var(--transition); } :root.kopra-app .sb-item:hover { background: var(--sidebar-hover); color: var(--text); } :root.kopra-app .sb-item:hover i { color: var(--text-muted); } :root.kopra-app .sb-item.is-active { background: var(--primary-soft); color: var(--primary); font-weight: 500; } :root.kopra-app .sb-item.is-active i { color: var(--primary); } /* -- Porte repliable : le chevron ne tourne que si la porte a du contenu -- */ :root.kopra-app .sb-porte { display: flex; flex-direction: column; } :root.kopra-app .sb-porte > .sb-item .sb-chev { margin-left: auto; font-size: 9px; color: var(--text-faint); transition: transform var(--transition); } :root.kopra-app .sb-porte.is-open > .sb-item .sb-chev { transform: rotate(90deg); } :root.kopra-app .sb-porte.is-open > .sb-item { color: var(--text); font-weight: 500; } :root.kopra-app .sb-porte.is-open > .sb-item i:first-child { color: var(--text-muted); } :root.kopra-app .sb-sous { display: none; flex-direction: column; margin: 2px 0 6px 0; padding-left: 27px; position: relative; } :root.kopra-app .sb-porte.is-open > .sb-sous { display: flex; } /* Un filet vertical rattache les sous-entrées à leur porte. */ :root.kopra-app .sb-sous::before { content: ""; position: absolute; left: 17px; top: 4px; bottom: 4px; width: 1px; background: var(--border); } :root.kopra-app .sb-sous .sb-item { padding: 6px 12px; font-size: var(--t-sm); gap: 0; color: var(--text-faint); } :root.kopra-app .sb-sous .sb-item:hover { color: var(--text); background: var(--sidebar-hover); } :root.kopra-app .sb-sous .sb-item.is-active { color: var(--primary); font-weight: 500; background: transparent; } :root.kopra-app .sb-sous .sb-item.is-active::before { content: ""; position: absolute; left: 17px; width: 1px; height: 17px; background: var(--primary); margin-top: 1px; } :root.kopra-app .sb-foot { border-top: 1px solid var(--border); padding: 10px; } :root.kopra-app .sb-user-avatar { background: var(--primary-soft); color: var(--primary); font-weight: 600; font-size: var(--t-xs); } :root.kopra-app .sb-user-name { font-size: var(--t-base); font-weight: 500; } :root.kopra-app .sb-user-email { font-size: var(--t-sm); color: var(--text-faint); } /* La carte promo Kopra PRO : encre sur filet, plus de dégradé violet. */ :root.kopra-app .sb-promo { margin: 8px 10px; padding: 13px 14px; border-radius: var(--radius); background: var(--surface-2) !important; border: 1px solid var(--border); color: var(--text-muted); } :root.kopra-app .sb-promo:hover { transform: none; border-color: var(--border-strong); box-shadow: none; } :root.kopra-app .sb-promo-logo { background: var(--primary); border: 0; color: #fff; border-radius: 5px; font-size: var(--t-sm); font-weight: 600; } :root.kopra-app .sb-promo-logo i { color: #fff; } :root.kopra-app .sb-promo-name { font-size: var(--t-base); font-weight: 500; color: var(--text); } :root.kopra-app .sb-promo-name b { font-weight: 600; } :root.kopra-app .sb-promo-badge { background: var(--bg-deep); color: var(--text-faint); font-size: 9.5px; font-weight: 600; letter-spacing: .07em; } :root.kopra-app .sb-promo-text { font-size: var(--t-sm); color: var(--text-faint); line-height: 1.5; } :root.kopra-app .sb-promo-cta { background: var(--surface); color: var(--primary); border: 1px solid var(--border-strong); border-radius: var(--radius); font-size: var(--t-sm); font-weight: 500; } :root.kopra-app .sb-promo-cta:hover { transform: none; background: var(--primary-soft); } /* ================================================================ Barre du haut et en-tête de page ================================================================ */ :root.kopra-app .main-topbar { background: rgba(250, 250, 251, .85); border-bottom: 1px solid var(--border); padding: 11px 32px; } :root.kopra-app .breadcrumb { font-size: var(--t-sm); } :root.kopra-app .breadcrumb-current { font-weight: 500; } :root.kopra-app .icon-pill { border-radius: var(--radius); } :root.kopra-app .icon-pill:hover { background: var(--surface-2); } :root.kopra-app .icon-pill .dot-badge { background: var(--danger); border: 2px solid var(--bg); font-weight: 500; } :root.kopra-app .page { padding: 26px 36px 56px; max-width: calc(var(--mesure) + 72px); } /* Le plan interactif et la messagerie occupent toute la largeur : ce sont des surfaces, pas des lectures. */ :root.kopra-app .page.pleine-largeur { max-width: none; } @media (max-width: 720px) { :root.kopra-app .page { padding: 20px 18px 56px; } } :root.kopra-app .page-head { margin-bottom: 22px; align-items: center; } :root.kopra-app .page-head h1 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.015em; color: var(--text); } :root.kopra-app .page-head-meta { font-size: var(--t-base); color: var(--text-faint); } /* Un seul bouton plein par en-tête : c'est lui qui répond à « je viens d'arriver, je fais quoi ? ». Les autres sont en retrait (`btn--ghost`). La règle est tenue page par page, pas devinée d'après la position : un premier essai qui rétrogradait tout bouton non-premier a rendu blancs les deux boutons d'« Actions du CS », donc supprimé la hiérarchie au lieu de la créer. */ :root.kopra-app .page-head-actions .btn { flex-shrink: 0; } /* ================================================================ Boutons ================================================================ */ :root.kopra-app .btn { /* La couleur de fond est definie plus haut, avec les jetons : l'action principale est NOIRE. Cette regle-ci ne s'occupe que de la forme. */ padding: 10px 18px; border-radius: 10px; font-size: var(--t-base); font-weight: 500; letter-spacing: 0; color: #fff; transition: background var(--transition), border-color var(--transition), color var(--transition); } :root.kopra-app .btn--ghost, :root.kopra-app .btn--secondary { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border-strong); } :root.kopra-app .btn--ghost:hover, :root.kopra-app .btn--secondary:hover { background: var(--surface-2); color: var(--text); border-color: var(--text-faint); } :root.kopra-app .quick-action { border-radius: var(--radius); font-size: var(--t-base); font-weight: 500; } /* ================================================================ Compteurs ---------------------------------------------------------------- Deux corrections. D'abord le défaut : la pastille d'icône est en position absolue à droite sur 36 px, mais le libellé ne lui réservait aucune place — il passait dessous et se faisait trancher par `overflow: hidden` (« TOTAL MEMBR », « RECONDUCTIO »). Ensuite la règle : une tuile dont la valeur est nulle n'apprend rien, et app-shell.js la retire. Voir `rangerLesCompteurs()`. ================================================================ */ /* `1fr` etirait les tuiles restantes sur toute la largeur : quand il n'en reste que deux — le cas courant maintenant que celles a zero disparaissent — on obtenait deux pavés de 45 % pour deux chiffres a un caractere. La borne haute les garde a taille de compteur. */ :root.kopra-app .kpi-strip { grid-template-columns: repeat(auto-fit, minmax(168px, 232px)); justify-content: start; gap: 10px; margin-bottom: 22px; } /* Les pages qui imposent leur propre grille (tantiemes) gardent la leur. */ :root.kopra-app .kpi-strip[style*="grid-template-columns"] { justify-content: stretch; } :root.kopra-app .kpi-tile { padding: 15px 17px; border-radius: var(--radius); border: 1px solid var(--border); gap: 3px; } :root.kopra-app .kpi-tile .label { font-size: var(--t-xs); font-weight: 500; letter-spacing: .07em; color: var(--text-faint); padding-right: 40px; /* la place de la pastille d'icône */ line-height: 1.35; } :root.kopra-app .kpi-tile .value { font-size: 23px; font-weight: 600; letter-spacing: -.02em; color: var(--text); } :root.kopra-app .kpi-tile .delta { font-size: var(--t-sm); } :root.kopra-app .kpi-tile .ico { right: 14px; top: 14px; width: 28px; height: 28px; border-radius: 5px; font-size: var(--t-sm); background: var(--surface-2); color: var(--text-faint); } /* ================================================================ Cartes, sections, listes ================================================================ */ :root.kopra-app .widget, :root.kopra-app .card, :root.kopra-app .panel, :root.kopra-app .box { border-radius: var(--radius) !important; border: 1px solid var(--border); box-shadow: none !important; } /* Le surtitre de section — repris d'« Espace syndic », le seul écran que l'audit a trouvé juste. Il dit de quoi parle le bloc avant qu'on le lise. */ :root.kopra-app .sec-sur { font-size: var(--t-xs); font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 5px; display: block; } :root.kopra-app .sec-titre { font-size: var(--t-lg); font-weight: 600; color: var(--text); letter-spacing: -.01em; line-height: 1.3; } :root.kopra-app .widget-empty { border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-2); color: var(--text-faint); font-size: var(--t-base); padding: 30px 18px; } :root.kopra-app .widget-empty i { color: var(--border-strong); font-size: 20px; } :root.kopra-app .onboarding-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; } /* ================================================================ Pastilles de filtre ---------------------------------------------------------------- Elles restent, mais discrètes : l'audit en a compté dix sur un même écran, toutes suivies de « (0) ». app-shell.js masque la rangée entière tant qu'il n'y a rien à filtrer. ================================================================ */ :root.kopra-app .chip { padding: 6px 13px; font-size: var(--t-sm); font-weight: 500; border-radius: 999px; color: var(--text-muted); border: 1px solid var(--border); } :root.kopra-app .chip:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); } :root.kopra-app .chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 500; } /* Les barres d'onglets débordaient sans le dire : le dernier onglet était tranché par le bord, et rien n'indiquait qu'il en restait. Elles défilent, et un fondu à droite annonce la suite. */ :root.kopra-app .tabs, :root.kopra-app .tab-row, :root.kopra-app .ce-tabs, :root.kopra-app .drawer-tabs, :root.kopra-app [class*="-tabs"] { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; position: relative; mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%); } :root.kopra-app .tabs::-webkit-scrollbar, :root.kopra-app .tab-row::-webkit-scrollbar, :root.kopra-app [class*="-tabs"]::-webkit-scrollbar { display: none; } /* Le fondu n'a de sens que si ça déborde réellement. */ :root.kopra-app [class*="-tabs"]:not(.deborde) { mask-image: none; -webkit-mask-image: none; } /* ================================================================ Tableaux ================================================================ */ :root.kopra-app table th { font-size: var(--t-xs); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); background: var(--surface-2); } :root.kopra-app table td { font-size: var(--t-base); } /* ================================================================ Formulaires ================================================================ */ :root.kopra-app input[type="text"], :root.kopra-app input[type="email"], :root.kopra-app input[type="number"], :root.kopra-app input[type="date"], :root.kopra-app input[type="time"], :root.kopra-app input[type="password"], :root.kopra-app input[type="search"], :root.kopra-app input[type="tel"], :root.kopra-app select, :root.kopra-app textarea { border-radius: var(--radius); border: 1px solid var(--border-strong); font-size: var(--t-base); font-family: inherit; color: var(--text); background: var(--surface); transition: border-color var(--transition), box-shadow var(--transition); } :root.kopra-app input:focus, :root.kopra-app select:focus, :root.kopra-app textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--shadow-glow); } :root.kopra-app label { font-size: var(--t-sm); font-weight: 500; color: var(--text-muted); letter-spacing: 0; text-transform: none; } /* ================================================================ Fenêtres et surfaces flottantes — la seule ombre du système ================================================================ */ :root.kopra-app .modal, :root.kopra-app .notif-panel, :root.kopra-app .sb-copro-panel { border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-flottant); /* Elargi a 296 px, il etait ROGNE par la barre laterale, qui defile et ne peut donc pas laisser deborder. On revient a la largeur disponible et on empile : le code sur sa ligne, le bouton sous lui. Mieux vaut une colonne lisible qu'une ligne coupee. */ background: var(--surface); } :root.kopra-app .modal-backdrop { background: rgba(23, 26, 31, .38); } :root.kopra-app .notif-item.is-unread { background: var(--primary-soft); } :root.kopra-app .notif-ic { background: var(--primary-soft); color: var(--primary); } /* ================================================================ Barre du bas (téléphone) ---------------------------------------------------------------- Les six mêmes portes que la barre latérale. Le « Plus » qui ravalait douze entrées disparaît : c'était la troisième grammaire de navigation du produit. ================================================================ */ /* La barre du bas a ete retiree : la navigation du telephone tient dans le tiroir. Ses styles ne s’appliquaient plus a rien. */ /* ================================================================ Rattrapage de la dérive ---------------------------------------------------------------- Les règles ci-dessous ne sont pas élégantes, et c'est assumé : elles ramènent d'un coup 1 512 styles écrits en ligne dans le HTML vers le système. Un style en ligne l'emporte sur toute feuille, d'où le `!important`. Elles disparaîtront à mesure que les pages seront reprises une à une — c'est la dernière étape du chantier, la plus longue et la moins urgente. ================================================================ */ /* Les dégradés décoratifs — 65 lavis à 135°, aucun ne portait de sens. Le seul motif utile (une hachure de légende, en pas de 10 px) est préservé. */ :root.kopra-app [style*="linear-gradient(135deg"]:not([style*="0 10px"]), :root.kopra-app [style*="linear-gradient(180deg"] { background-image: none !important; } /* Neuf graisses ramenées à trois. */ :root.kopra-app [style*="font-weight:700"], :root.kopra-app [style*="font-weight: 700"], :root.kopra-app [style*="font-weight:800"], :root.kopra-app [style*="font-weight: 800"], :root.kopra-app [style*="font-weight:900"], :root.kopra-app [style*="font-weight: 900"] { font-weight: 600 !important; } :root.kopra-app [style*="font-weight:450"], :root.kopra-app [style*="font-weight: 450"], :root.kopra-app [style*="font-weight:650"], :root.kopra-app [style*="font-weight: 650"] { font-weight: 500 !important; } /* Le violet Tailwind (#8B5CF6 / #6D28D9 / #7C3AED / #4338CA) s'était installé à côté du bleu de l'État. Une seule marque désormais. */ :root.kopra-app [style*="#8B5CF6"], :root.kopra-app [style*="#8b5cf6"], :root.kopra-app [style*="#6D28D9"], :root.kopra-app [style*="#6d28d9"], :root.kopra-app [style*="#7C3AED"], :root.kopra-app [style*="#7c3aed"], :root.kopra-app [style*="#4338CA"], :root.kopra-app [style*="#4338ca"], :root.kopra-app [style*="#312E81"], :root.kopra-app [style*="#312e81"] { background-color: var(--primary-soft) !important; border-color: var(--primary-border) !important; color: var(--primary) !important; } /* Les rayons hérités (8, 10, 12, 13, 14, 16 px) reviennent au rayon unique. */ :root.kopra-app [style*="border-radius:8px"], :root.kopra-app [style*="border-radius: 8px"], :root.kopra-app [style*="border-radius:9px"], :root.kopra-app [style*="border-radius: 9px"], :root.kopra-app [style*="border-radius:10px"], :root.kopra-app [style*="border-radius: 10px"], :root.kopra-app [style*="border-radius:11px"], :root.kopra-app [style*="border-radius: 11px"], :root.kopra-app [style*="border-radius:12px"], :root.kopra-app [style*="border-radius: 12px"], :root.kopra-app [style*="border-radius:13px"], :root.kopra-app [style*="border-radius: 13px"], :root.kopra-app [style*="border-radius:14px"], :root.kopra-app [style*="border-radius: 14px"], :root.kopra-app [style*="border-radius:16px"], :root.kopra-app [style*="border-radius: 16px"] { border-radius: var(--radius) !important; } /* Les ombres semées dans le HTML. Celles des surfaces flottantes sont posées plus haut, par classe — elles ne passent pas par ici. */ :root.kopra-app .page [style*="box-shadow"] { box-shadow: none !important; } /* ================================================================ Mouvement — le garde-fou système ================================================================ */ @media (prefers-reduced-motion: reduce) { :root.kopra-app *, :root.kopra-app *::before, :root.kopra-app *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* `hidden` doit l'emporter sur les `display` posés par les composants. Sans cette règle, une tuile de compteur masquée par `rangerLesCompteurs()` resterait visible : `.kpi-tile` est en `flex`, `.kpi-strip` en `grid`, et l'attribut ne pèse rien face à eux. */ :root.kopra-app [hidden] { display: none !important; } /* ================================================================ Retouches d'écran ================================================================ */ /* La rangée de filtres était enfermée dans une carte bordée : sur « Contrats », cette carte ne contenait que deux pastilles et pesait plus lourd qu'elles. Les pastilles se suffisent. */ :root.kopra-app .filter-bar { background: transparent; border: 0; padding: 0; margin-bottom: 18px; } :root.kopra-app .filter-bar .filter-tag { padding: 6px 13px; font-size: var(--t-sm); border-color: var(--border); } :root.kopra-app .filter-bar .filter-tag.is-active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 500; } /* Les phrases d'explication (« Le conseil syndical peut ajouter… ») s'intercalaient entre les onglets et le contenu, à la taille du texte courant. Elles restent — elles sont utiles la première fois — mais au rang de ce qu'elles sont : une note. */ :root.kopra-app .page p.lead { font-size: var(--t-sm); color: var(--text-faint); line-height: 1.6; max-width: 78ch; } /* Les états vides : ils annonçaient « AUCUN CONTRAT ENREGISTRÉ » en capitales grasses, collé à gauche, sous une icône minuscule. Ils redeviennent une phrase posée, centrée dans son cadre. */ :root.kopra-app .page-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 46px 24px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text-faint); } :root.kopra-app .page-empty i { font-size: 22px; color: var(--border-strong); } :root.kopra-app .page-empty h3 { font-size: var(--t-md); font-weight: 600; color: var(--text); text-transform: none; letter-spacing: 0; margin: 0; } :root.kopra-app .page-empty p { font-size: var(--t-base); color: var(--text-muted); margin: 0; max-width: 46ch; } /* Le réglage « Visibilité syndic », descendu en pied de page : il doit se lire comme un réglage, pas comme du contenu. */ :root.kopra-app .in-settings-bar { margin-top: 28px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 15px; } :root.kopra-app .in-settings-bar .label { font-size: var(--t-base); font-weight: 500; } :root.kopra-app .in-settings-bar .desc { font-size: var(--t-sm); } /* Les bandeaux du tableau de bord (portail syndic) sont des rangées à trois colonnes rigides : icône, texte, action. Sur un téléphone, le texte se retrouvait dans 150 px et le titre passait sur trois lignes. Ils s'empilent, et l'action prend toute la largeur — c'est là qu'on la cherche au pouce. */ @media (max-width: 560px) { :root.kopra-app .dash-bandeau { flex-wrap: wrap; padding: 16px 18px !important; gap: 12px !important; } :root.kopra-app .dash-bandeau > div:nth-child(2) { flex: 1 1 100%; } :root.kopra-app .dash-bandeau > a, :root.kopra-app .dash-bandeau > span { flex: 1 1 100%; justify-content: center; text-align: center; } } /* Trois graisses, aussi pour celles qui viennent des classes et non des styles en ligne : gras par défaut du navigateur sur `strong`, `b`, les titres et les en-têtes de tableau. ATTENTION — Font Awesome dessine ses glyphes pleins avec `font-weight: 900` : toucher à cette règle-là efface les icônes. D'où l'exclusion explicite, qui n'est pas une précaution de style mais une condition de fonctionnement. */ :root.kopra-app :is(b, strong, h1, h2, h3, h4, h5, h6, th, dt):not([class*="fa-"]) { font-weight: 600; } /* ================================================================ Tableaux larges ================================================================ */ /* Le cadre est posé à l'exécution par app-shell.js autour de chaque tableau : c'est lui qui défile, pour que la page, elle, ne parte jamais de travers. */ :root.kopra-app [data-cadre-table] { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); } :root.kopra-app .tbl-pro { border-radius: var(--radius); font-size: var(--t-base); /* Le tableau garde sa largeur naturelle et déborde dans son cadre plutôt que d'écraser ses colonnes pour tenir à tout prix. */ min-width: 100%; width: max-content; } :root.kopra-app .tbl-pro th, :root.kopra-app .tbl-pro td { padding: 11px 15px; vertical-align: middle; } :root.kopra-app .tbl-pro thead { background: var(--surface-2); } :root.kopra-app .tbl-pro thead th { font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; color: var(--text-faint); white-space: nowrap; } /* La première colonne porte le nom : c'est elle qu'on lit, elle a droit à de la place. Les colonnes d'appoint ne se coupent jamais en deux. */ :root.kopra-app .tbl-pro th:first-child, :root.kopra-app .tbl-pro td:first-child { min-width: 240px; max-width: 380px; } :root.kopra-app .tbl-pro td:not(:first-child) { white-space: nowrap; } :root.kopra-app .tbl-pro tbody tr:hover { background: var(--surface-2); } /* ================================================================ Mouvement ---------------------------------------------------------------- Le produit ne bougeait pas du tout : les pages apparaissaient d'un bloc, les fenêtres surgissaient, rien ne réagissait sous le doigt. Une interface sans mouvement paraît cassée avant même d'être lente. Le parti pris : le mouvement sert à expliquer, jamais à décorer. Il est court (150 à 260 ms), il va toujours dans le sens de la lecture — de haut en bas, du clic vers ce qui s'ouvre — et il disparaît entièrement si le système demande moins d'animations. ================================================================ */ /* -- Entrée de page -------------------------------------------------- Un seul élément anime : le conteneur du contenu. Un premier essai posait l'animation sur CHAQUE tuile, ligne de tableau et carte, en `animation-fill-mode: both` et en cascade. Le principe de `both` est qu'avant de démarrer, l'élément tient l'état de départ — ici `opacity: 0`. Une animation qui ne démarre pas laisse donc son élément invisible, définitivement : la page s'est retrouvée blanche alors que le DOM était complet et la mise en page juste. La leçon est gardée : on n'accroche jamais la visibilité d'un contenu à la bonne exécution d'une animation. Le mouvement s'ajoute à un élément déjà visible, ou il ne se fait pas. -- */ @keyframes kopra-entree { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } :root.kopra-app #appMain { animation: kopra-entree .24s cubic-bezier(.22, .61, .36, 1); } /* -- Fenêtres : le fond se voile, la fenêtre arrive de très légèrement plus bas et plus petite. C'est ce qui la rattache au clic. -- */ @keyframes kopra-voile { from { opacity: 0; } to { opacity: 1; } } @keyframes kopra-fenetre { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } } :root.kopra-app .modal-backdrop { animation: kopra-voile .16s ease; } :root.kopra-app .modal { animation: kopra-fenetre .22s cubic-bezier(.22, .61, .36, 1); } /* Sur téléphone, les fenêtres deviennent des feuilles : elles montent du bas, comme dans une application installée. */ @media (max-width: 720px) { @keyframes kopra-feuille { from { transform: translateY(100%); } to { transform: none; } } :root.kopra-app .modal { animation: kopra-feuille .26s cubic-bezier(.22, .61, .36, 1); } } /* -- Panneaux ancrés (notifications, panneau copropriété) -- */ :root.kopra-app .notif-panel, :root.kopra-app .sb-copro-panel { animation: kopra-entree .18s ease; } /* -- Sous-menu de la barre latérale : il se déplie, il n'apparaît pas. `grid-template-rows` permet d'animer vers une hauteur inconnue, ce que `height: auto` ne sait pas faire. -- */ :root.kopra-app .sb-sous { display: grid !important; grid-template-rows: 0fr; transition: grid-template-rows .22s cubic-bezier(.22, .61, .36, 1), opacity .18s ease; opacity: 0; } :root.kopra-app .sb-porte.is-open > .sb-sous { grid-template-rows: 1fr; opacity: 1; } :root.kopra-app .sb-sous > * { min-height: 0; } :root.kopra-app .sb-sous-int { overflow: hidden; display: flex; flex-direction: column; } /* -- Réaction au doigt et à la souris -- */ :root.kopra-app .btn, :root.kopra-app .chip, :root.kopra-app .quick-action, :root.kopra-app .filter-tag { transition: background .15s ease, border-color .15s ease, color .15s ease, transform .09s ease; } :root.kopra-app .btn:active, :root.kopra-app .chip:active, :root.kopra-app .quick-action:active, :root.kopra-app .filter-tag:active { transform: scale(.975); } :root.kopra-app .kpi-tile.is-clickable, :root.kopra-app .list-row, :root.kopra-app .member-row { transition: border-color .15s ease, background .15s ease; } /* -- Chargement : une barre fine sous la barre du haut, plutôt qu'une page blanche pendant que les données arrivent. -- */ @keyframes kopra-progression { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } } /* L'animation ne vit QUE pendant l'attente. Un premier essai la laissait tourner en boucle sous une opacité nulle : invisible, mais le navigateur recomposait la page soixante fois par seconde sans discontinuer — de quoi chauffer un téléphone pour un fil qu'on ne voyait même pas. */ :root.kopra-app .main-topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--primary); width: 25%; opacity: 0; transition: opacity .2s ease; pointer-events: none; } :root.kopra-app.charge .main-topbar::after { opacity: 1; animation: kopra-progression 1.1s ease-in-out infinite; } :root.kopra-app .main-topbar { position: sticky; } /* -- Le respect du réglage système passe avant tout le reste. -- */ @media (prefers-reduced-motion: reduce) { :root.kopra-app *, :root.kopra-app *::before, :root.kopra-app *::after { animation: none !important; transition: none !important; } :root.kopra-app .sb-sous { grid-template-rows: 0fr; } :root.kopra-app .sb-porte.is-open > .sb-sous { grid-template-rows: 1fr; opacity: 1; } } /* ================================================================ Formulaires de création ---------------------------------------------------------------- Les fenêtres de saisie étaient une pile de champs sans hiérarchie : même taille, même graisse, aucun repère, et une croix de fermeture si pâle qu'on la cherchait. Ce sont pourtant les écrans où l'on *fait* quelque chose — ceux qui décident si l'outil est agréable. ================================================================ */ :root.kopra-app .modal-head { padding: 20px 24px 16px; border-bottom: 1px solid var(--border); align-items: flex-start; } :root.kopra-app .modal-head h3 { font-size: var(--t-lg); font-weight: 600; color: var(--text); letter-spacing: -.01em; margin: 0; } :root.kopra-app .modal-close { width: 30px; height: 30px; border-radius: var(--radius); border: 1px solid transparent; background: transparent; color: var(--text-faint); font-size: 19px; line-height: 1; display: grid; place-items: center; cursor: pointer; transition: background .15s ease, color .15s ease; } :root.kopra-app .modal-close:hover { background: var(--surface-2); color: var(--text); } :root.kopra-app .modal-body { padding: 20px 24px !important; } /* La phrase d'amorce : elle dit ce qu'on attend et ce qui viendra après, pour qu'un champ laissé vide ne ressemble pas à un oubli. */ :root.kopra-app .modal-lead { font-size: var(--t-base); color: var(--text-muted); line-height: 1.6; margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } :root.kopra-app .modal-body .field { margin-bottom: 15px; } :root.kopra-app .modal-body .field:last-child { margin-bottom: 0; } :root.kopra-app .modal-body label { display: block; margin-bottom: 6px; font-size: var(--t-sm); font-weight: 500; color: var(--text); } :root.kopra-app .modal-body input, :root.kopra-app .modal-body select, :root.kopra-app .modal-body textarea { width: 100%; padding: 9px 12px; font-size: var(--t-base); } :root.kopra-app .modal-body textarea { line-height: 1.6; resize: vertical; min-height: 76px; } /* L'astérisque disait « obligatoire » sans le dire. La mention en toutes lettres coûte trois mots et évite une erreur au moment de valider. */ /* Le balisage contient une astérisque ; on l'efface (font-size: 0) et on écrit le mot à la place, sans avoir à reprendre chaque formulaire. */ :root.kopra-app .req { font-size: 0; margin-left: 4px; } :root.kopra-app .req::after { content: "obligatoire"; font-size: var(--t-xs); font-weight: 500; color: var(--danger); letter-spacing: 0; } :root.kopra-app .aide { font-size: var(--t-xs); font-weight: 400; color: var(--text-faint); margin-left: 5px; text-transform: none; letter-spacing: 0; } :root.kopra-app .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } @media (max-width: 560px) { :root.kopra-app .grid-2 { grid-template-columns: 1fr; } } :root.kopra-app .modal-foot { padding: 16px 24px; border-top: 1px solid var(--border); background: var(--surface-2); display: flex; gap: 10px; justify-content: flex-end; } /* ================================================================ Compteurs sur téléphone ---------------------------------------------------------------- Une fois les compteurs porteurs d'une vraie valeur, ils méritent d'être là — mais pas empilés sur toute la largeur : quatre blocs de 215 px, c'est encore 900 px de défilement avant le premier contenu. Deux par ligne, plus compacts, et la page commence enfin par ce qu'on est venu y faire. ================================================================ */ @media (max-width: 720px) { :root.kopra-app .kpi-strip, :root.kopra-app .stat-row, :root.kopra-app .mc-stats { grid-template-columns: 1fr 1fr !important; gap: 8px; } :root.kopra-app .kpi-tile, :root.kopra-app .stat-box { padding: 12px 13px; } :root.kopra-app .kpi-tile .label, :root.kopra-app .stat-box .s-label { padding-right: 0; font-size: 10.5px; } /* La pastille d'icône n'a plus la place ; le libellé la remplace. */ :root.kopra-app .kpi-tile .ico, :root.kopra-app .stat-box .ico { display: none; } :root.kopra-app .kpi-tile .value, :root.kopra-app .stat-box .s-val { font-size: 21px; margin-top: 2px; } :root.kopra-app .stat-box .s-note { font-size: 10.5px; padding: 1px 6px; } } /* ================================================================ Le relevé — grammaire du tableau de bord ---------------------------------------------------------------- Ce qui faisait « interface générée » n'était pas la palette : c'était la grammaire des composants. Une carte blanche arrondie par information, une pastille de couleur par état, une icône par ligne. L'application en comptait 436, avec jusqu'à 93 icônes sur un écran. Ici : pas de boîte, pas de pastille, pas d'icône décorative. Le contenu est tenu par des filets d'un pixel et par l'alignement. La couleur ne dit qu'une chose — ce qui presse. Et l'information principale n'est pas un chiffre isolé dans un cadre, c'est une phrase qu'on lit. ================================================================ */ :root.kopra-app .rel-tete { padding-bottom: 22px; border-bottom: 1px solid var(--border); margin-bottom: 26px; } :root.kopra-app .rel-tete h1 { font-size: 25px; font-weight: 600; letter-spacing: -.022em; color: var(--text); line-height: 1.2; margin: 0; } :root.kopra-app .rel-situation { font-size: var(--t-sm); color: var(--text-faint); margin: 5px 0 0; letter-spacing: .01em; } /* La phrase d'état : c'est elle qu'on lit en arrivant. Elle a droit à la taille de lecture, pas à celle d'une légende. */ :root.kopra-app .rel-etat { font-size: 17px; line-height: 1.62; color: var(--text-muted); margin: 16px 0 0; max-width: 62ch; } :root.kopra-app .rel-etat a { color: var(--text); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--border-strong); padding-bottom: 1px; transition: border-color .15s ease, color .15s ease; } :root.kopra-app .rel-etat a:hover { border-bottom-color: var(--primary); color: var(--primary); } :root.kopra-app .rel-alerte { color: var(--danger); font-weight: 500; } /* -- Avis : une ligne, un filet vertical, rien d'autre -- */ :root.kopra-app .rel-avis { display: flex; flex-direction: column; margin-bottom: 26px; } :root.kopra-app .rel-avis-ligne, :root.kopra-app .rel-syndic { display: flex; align-items: center; gap: 18px; padding: 13px 0 13px 15px; border: 0; border-left: 2px solid var(--border-strong); text-decoration: none; color: inherit; transition: border-color .15s ease, background .15s ease; background: none; text-align: left; font: inherit; width: 100%; cursor: pointer; } :root.kopra-app .rel-avis-ligne:hover, :root.kopra-app .rel-syndic:hover { background: var(--surface-2); } :root.kopra-app .rel-agir { border-left-color: var(--warn); } :root.kopra-app .rel-suivre { border-left-color: var(--primary); } :root.kopra-app .rel-avis-corps, :root.kopra-app .rel-syndic-corps { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; } :root.kopra-app .rel-avis-titre, :root.kopra-app .rel-syndic-nom { font-size: var(--t-md); font-weight: 500; color: var(--text); } :root.kopra-app .rel-avis-detail { font-size: var(--t-base); color: var(--text-faint); line-height: 1.5; } :root.kopra-app .rel-avis-action, :root.kopra-app .rel-syndic-acces { font-size: var(--t-base); font-weight: 500; color: var(--primary); white-space: nowrap; text-decoration: none; } :root.kopra-app .rel-syndic { margin-bottom: 26px; } :root.kopra-app .rel-syndic-reglage { background: none; border: 0; padding: 0; margin-left: 14px; font: inherit; font-size: var(--t-sm); color: var(--text-faint); cursor: pointer; white-space: nowrap; } :root.kopra-app .rel-syndic-reglage:hover { color: var(--text); text-decoration: underline; } /* -- Sections : un surtitre, un filet, une liste -- */ :root.kopra-app .rel-section { margin-bottom: 34px; } :root.kopra-app .rel-section-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 9px; border-bottom: 1px solid var(--text-faint); margin-bottom: 2px; } :root.kopra-app .rel-oeil { font-size: var(--t-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text); } :root.kopra-app .rel-tout { font-size: var(--t-sm); color: var(--text-faint); text-decoration: none; } :root.kopra-app .rel-tout:hover { color: var(--primary); } /* -- Lignes : le filet les sépare, l'alignement les tient -- */ :root.kopra-app .rel-liste { display: flex; flex-direction: column; } :root.kopra-app .rel-ligne { display: flex; align-items: center; gap: 18px; padding: 13px 6px 13px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; transition: background .13s ease, padding-left .13s ease; } :root.kopra-app .rel-ligne:hover { background: var(--surface-2); padding-left: 6px; } :root.kopra-app .rel-ligne:last-child { border-bottom: 0; } :root.kopra-app .rel-ligne-corps { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; } :root.kopra-app .rel-ligne-titre { font-size: var(--t-md); font-weight: 450; color: var(--text); line-height: 1.4; } :root.kopra-app .rel-ligne-meta { font-size: var(--t-sm); color: var(--text-faint); } :root.kopra-app .rel-ligne-etat { font-size: var(--t-sm); color: var(--text-faint); white-space: nowrap; text-align: right; } :root.kopra-app .rel-chiffre { font-variant-numeric: tabular-nums; color: var(--text-muted); } /* L'urgence se dit par un filet à gauche de la ligne. Une pastille de couleur aurait redit ce que le mot dit déjà. */ :root.kopra-app .rel-ligne.dot-red { box-shadow: inset 2px 0 0 var(--danger); padding-left: 13px; } :root.kopra-app .rel-ligne.dot-amber { box-shadow: inset 2px 0 0 var(--warn); padding-left: 13px; } /* Le bleu marquait toute ligne « en cours » — la moitie de la liste, donc plus rien. Seul ce qui presse porte une marque. */ :root.kopra-app .rel-ligne.dot-blue { box-shadow: none; padding-left: 0; } /* Pas de deplacement au survol : seul le fond reagit. */ :root.kopra-app .rel-ligne.dot-gray { box-shadow: none; padding-left: 0; } :root.kopra-app .rel-ligne.dot-red .rel-ligne-etat { color: var(--danger); } :root.kopra-app .rel-ligne.dot-amber .rel-ligne-etat { color: var(--warn); } :root.kopra-app .rel-rien { font-size: var(--t-base); color: var(--text-faint); padding: 22px 0; margin: 0; } :root.kopra-app .rel-ajout { display: inline-block; margin-top: 14px; font-size: var(--t-base); font-weight: 500; color: var(--primary); text-decoration: none; border-bottom: 1px solid transparent; } :root.kopra-app .rel-ajout:hover { border-bottom-color: currentColor; } /* La jauge d'avancement : un trait, pas une barre arrondie colorée. */ :root.kopra-app .rel-jauge { display: block; height: 2px; background: var(--border); margin-top: 7px; max-width: 260px; } :root.kopra-app .rel-jauge > span { display: block; height: 100%; background: var(--text-faint); } /* Les onglets de filtre : du texte souligné, pas des pastilles. */ :root.kopra-app .inbox-tabs { display: flex; gap: 20px; border: 0; padding: 0; } :root.kopra-app .inbox-tab { background: none; border: 0; padding: 0 0 3px; font: inherit; font-size: var(--t-sm); color: var(--text-faint); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -11px; transition: color .15s ease, border-color .15s ease; } :root.kopra-app .inbox-tab:hover { color: var(--text); } :root.kopra-app .inbox-tab.is-active { color: var(--text); border-bottom-color: var(--text); font-weight: 500; } :root.kopra-app .inbox-tab .t-count { background: none; color: var(--text-faint); font-weight: 400; padding: 0; margin-left: 3px; font-variant-numeric: tabular-nums; } /* -- Écrire au conseil : un champ, un trait, pas une boîte -- */ :root.kopra-app .rel-ecrire { display: flex; gap: 12px; margin-top: 16px; align-items: center; } :root.kopra-app .rel-ecrire input { flex: 1; border: 0; border-bottom: 1px solid var(--border-strong); border-radius: 0; padding: 8px 2px; background: none; font-size: var(--t-base); } :root.kopra-app .rel-ecrire input:focus { outline: none; border-bottom-color: var(--primary); box-shadow: none; } :root.kopra-app .rel-ecrire button { background: none; border: 0; padding: 0; font: inherit; font-size: var(--t-base); font-weight: 500; color: var(--primary); cursor: pointer; } :root.kopra-app .rel-ecrire button:hover { text-decoration: underline; } :root.kopra-app .rel-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; } @media (max-width: 860px) { :root.kopra-app .rel-colonnes { grid-template-columns: 1fr; gap: 0; } :root.kopra-app .rel-etat { font-size: 16px; } :root.kopra-app .rel-tete h1 { font-size: 21px; } :root.kopra-app .rel-avis-ligne, :root.kopra-app .rel-syndic { flex-direction: column; align-items: flex-start; gap: 8px; } } /* ================================================================ Passage d'un écran à l'autre ---------------------------------------------------------------- Chaque rubrique est un document HTML distinct : cliquer dans la barre latérale provoquait une navigation complète, donc un blanc puis une apparition sèche. C'est ce à-coup qui donnait l'impression d'un outil qui redémarre à chaque clic. L'API de transition de vue (`@view-transition`) permet au navigateur de tenir l'ancienne page à l'écran pendant qu'il prépare la nouvelle, et d'animer le passage entre les deux — même entre deux fichiers. On nomme les deux régions pour les traiter différemment : la barre latérale NE BOUGE PAS (c'est le point fixe, elle donne le sentiment de rester au même endroit), et seule la zone principale se déroule. Là où l'API n'existe pas encore, il ne se passe rien de plus qu'avant : l'animation d'entrée de `#appMain` prend le relais. ================================================================ */ @view-transition { navigation: auto; } :root.kopra-app .sidebar { view-transition-name: kopra-barre; } :root.kopra-app .main-topbar { view-transition-name: kopra-entete; } /* Le nom est porté par `.main`, PAS par `#appMain`. Un élément nommé pour une transition de vue devient un bloc conteneur pour ses descendants en `position: fixed` : les panneaux de détail, qui se veulent plein écran, se calaient alors sur `#appMain` — donc sous la barre du haut, qu'ils chevauchaient. Porté par `.main`, le repère part du haut de la fenêtre, et le panneau couvre la zone de travail en laissant la barre latérale visible. */ :root.kopra-app .main { view-transition-name: kopra-zone; } /* Les points fixes traversent la transition sans bouger. Sans cette règle, ils se fondraient eux aussi et l'écran entier clignoterait. */ ::view-transition-old(kopra-barre), ::view-transition-new(kopra-barre), ::view-transition-old(kopra-barre-bas), ::view-transition-new(kopra-barre-bas), ::view-transition-old(kopra-entete), ::view-transition-new(kopra-entete) { animation: none; mix-blend-mode: normal; } /* La zone principale : l'ancienne s'efface vite, la nouvelle se déroule depuis le haut. Le décalage est court (8 px) — il suffit à donner le sens de la lecture sans faire glisser toute la page. */ @keyframes kopra-vt-sortie { from { opacity: 1; } to { opacity: 0; } } @keyframes kopra-vt-deroule { from { opacity: 0; transform: translateY(8px); clip-path: inset(0 0 12% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } } ::view-transition-old(kopra-zone) { animation: kopra-vt-sortie .12s ease both; } ::view-transition-new(kopra-zone) { animation: kopra-vt-deroule .32s cubic-bezier(.22, .61, .36, 1) both; } /* Avec la transition de vue, l'animation d'entrée de `#appMain` ferait double emploi : deux mouvements superposés sur le même élément. */ @supports (view-transition-name: none) { :root.kopra-app #appMain { animation: none; } } /* Le panneau doit passer au-dessus de la barre du haut, qui est en `sticky` dans la même région. */ :root.kopra-app .main-topbar { z-index: 5; } :root.kopra-app .drawer, :root.kopra-app .wk-drawer, :root.kopra-app .cl-drawer, :root.kopra-app .in-drawer, :root.kopra-app .ac-drawer { z-index: 120 !important; } :root.kopra-app .drawer-backdrop, :root.kopra-app .wk-drawer-backdrop, :root.kopra-app .cl-drawer-backdrop, :root.kopra-app .in-drawer-backdrop, :root.kopra-app .ac-drawer-backdrop { z-index: 119 !important; } @media (prefers-reduced-motion: reduce) { ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* ================================================================ (Retire) La couche qui convertissait quatre rubriques d'un coup ---------------------------------------------------------------- Une seule regle en !important transformait les grilles de cartes de Signalements, Travaux, Sinistres et Actions en listes plates pleine largeur, sans fond ni bordure. A l'ecran : des lignes de 1600 px ou le montant se retrouvait a un ecran de son titre, et une grille dont le `display:grid` etait ecrase en `flex`. Chaque rubrique reprend sa mise en page propre. Elles sont redessinees une par une : une grammaire commune imposee de force ne remplace pas un dessin. ================================================================ */ /* ================================================================ La pastille redevient un mot ---------------------------------------------------------------- Un état — « Ouvert », « En cours », « Planifié » — est une information textuelle. L'enfermer dans une capsule teintée à coins ronds n'y ajoute rien : ça le rend seulement plus voyant que le titre qu'il qualifie. La couleur reste, portée par le mot. ================================================================ */ :root.kopra-app .pill, :root.kopra-app .tl-status-pill, :root.kopra-app .badge, :root.kopra-app .lot-tag { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; font-size: var(--t-sm) !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--text-faint) !important; } :root.kopra-app .pill-ok, :root.kopra-app .pill.pill-ok { color: var(--ok) !important; } :root.kopra-app .pill-warn, :root.kopra-app .pill.pill-warn { color: var(--warn) !important; } :root.kopra-app .pill-danger, :root.kopra-app .pill.pill-danger { color: var(--danger) !important; } :root.kopra-app .pill-info, :root.kopra-app .pill.pill-info { color: var(--primary) !important; } /* Le compteur d'une pastille de menu reste lisible : c'est un nombre, pas un état. */ :root.kopra-app .sb-item .sb-badge { background: none !important; color: var(--primary) !important; font-weight: 500 !important; font-size: var(--t-sm) !important; } /* ================================================================ Les icônes décoratives ---------------------------------------------------------------- Une icône de calendrier devant une date, de trombone devant un nombre de pièces jointes, de casque devant un nom d'entreprise : elles répètent le mot qui suit. On les retire des listes et des états ; celles qui portent une action (boutons, menus) restent. ================================================================ */ :root.kopra-app .pill > i, :root.kopra-app .tl-status-pill > i, :root.kopra-app .in-card-meta i, :root.kopra-app .wk-card-meta i, :root.kopra-app .cl-card-meta i, :root.kopra-app .ac-card-meta i, :root.kopra-app .in-card-bottom i, :root.kopra-app .wk-card-bottom i, :root.kopra-app .cl-card-bottom i, :root.kopra-app .ac-card-bottom i, :root.kopra-app .in-card-author-ico, :root.kopra-app .wk-card-vendor-ico, :root.kopra-app .cl-card-insurer-ico, :root.kopra-app .ac-card-assignee-ico, :root.kopra-app .kpi-tile .ico, :root.kopra-app .stat-box .ico, :root.kopra-app .rel-ligne i, :root.kopra-app .mw-icon { display: none !important; } /* ================================================================ Les bandeaux d'alerte de rubrique ---------------------------------------------------------------- « 2 contrats expirent sous 60 jours », « 1 signalement urgent » : c'étaient des rectangles teintés pleine largeur. Ils deviennent une ligne marquée d'un filet, comme les avis du relevé. ================================================================ */ :root.kopra-app .in-alerts, :root.kopra-app .wk-alerts, :root.kopra-app .cl-alerts, :root.kopra-app .ac-alerts, :root.kopra-app .alert-banner { background: none !important; border: 0 !important; border-left: 2px solid var(--warn) !important; border-radius: 0 !important; padding: 11px 0 11px 15px !important; box-shadow: none !important; gap: 12px; } :root.kopra-app .in-alerts i, :root.kopra-app .wk-alerts i, :root.kopra-app .cl-alerts i, :root.kopra-app .ac-alerts i, :root.kopra-app .alert-banner > i { display: none !important; } /* ================================================================ Les compteurs de rubrique ---------------------------------------------------------------- Ils gardent leur rôle — un chiffre en tête de page se lit vite — mais perdent leur cadre : ce sont des chiffres alignés, séparés par un filet, pas quatre objets posés côte à côte. ================================================================ */ :root.kopra-app .kpi-strip { /* Un seul objet, pas quatre chiffres qui flottent. Les compteurs sont separes par un filet vertical — la trame plutot que la boite : le bandeau se lit comme une ligne, et on voit ou il commence et finit. Largeur au contenu : quatre compteurs a un chiffre n'ont aucune raison d'occuper 1200 px. */ display: flex; flex-wrap: wrap; width: max-content; max-width: 100%; gap: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 24px; padding: 0; } :root.kopra-app .kpi-tile { flex: 0 0 auto; min-width: 152px; background: none; border: 0; border-left: 1px solid var(--border); border-radius: 0; padding: 15px 24px 16px 20px; box-shadow: none; } :root.kopra-app .kpi-tile:first-child { border-left: 0; } :root.kopra-app .kpi-tile .label { padding-right: 0; font-size: var(--t-xs); font-weight: 500; letter-spacing: .06em; color: var(--text-faint); } :root.kopra-app .kpi-tile .value { font-size: 26px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } /* L'icone ne disait rien que le libelle ne disait deja. */ :root.kopra-app .kpi-tile .ico { display: none; } /* -- Les colonnes de Kanban gardent leur utilité, pas leur décor -- */ :root.kopra-app .in-kanban-col, :root.kopra-app .wk-kanban-col, :root.kopra-app .cl-kanban-col, :root.kopra-app .ac-kb-col { background: none !important; border: 0 !important; border-top: 2px solid var(--border-strong) !important; border-radius: 0 !important; } :root.kopra-app .in-kanban-head, :root.kopra-app .wk-kanban-head, :root.kopra-app .cl-kanban-head, :root.kopra-app .ac-kb-col-head { background: none !important; border-bottom: 0 !important; font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text); padding: 10px 0 12px !important; } :root.kopra-app .in-kcard, :root.kopra-app .wk-kcard, :root.kopra-app .cl-kcard, :root.kopra-app .ac-kb-card { background: var(--surface) !important; border: 0 !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; box-shadow: none !important; padding: 12px 4px !important; } /* ================================================================ Correctifs de la conversion ================================================================ */ /* `.in-alerts` n'est PAS un bandeau d'alerte : c'est la rangée de badges à l'intérieur d'une carte de signalement. Ma règle précédente lui posait un filet orange en marge, ce qui n'avait aucun sens. Elle redevient ce qu'elle est : une ligne de mentions. */ :root.kopra-app .in-alerts, :root.kopra-app .wk-alerts, :root.kopra-app .cl-alerts, :root.kopra-app .ac-alerts { border-left: 0 !important; padding: 0 !important; gap: 3px 14px !important; font-size: var(--t-sm); } /* Les mentions d'une ligne : « Gravité élevée », « Syndic », « Masqué syndic ». Elles étaient des capsules teintées ; ce sont des mots, séparés par des points médians. */ :root.kopra-app .in-alert-badge, :root.kopra-app .in-syndic-badge, :root.kopra-app .sev, :root.kopra-app .in-unread { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; font-size: var(--t-sm) !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; position: static !important; color: var(--text-faint) !important; box-shadow: none !important; min-width: 0 !important; height: auto !important; } :root.kopra-app .in-alert-badge.warn, :root.kopra-app .sev.warn { color: var(--warn) !important; } :root.kopra-app .in-alert-badge.danger, :root.kopra-app .sev.danger, :root.kopra-app .sev.urgent, :root.kopra-app .sev.high { color: var(--danger) !important; } :root.kopra-app .in-alert-badge.ok { color: var(--ok) !important; } :root.kopra-app .in-alert-badge.info { color: var(--primary) !important; } :root.kopra-app .in-unread { color: var(--primary) !important; font-weight: 500 !important; } /* Le point médian sépare les mentions sans les enfermer. */ :root.kopra-app .in-alerts > *:not(:last-child)::after, :root.kopra-app .in-card-meta > *:not(:last-child)::after, :root.kopra-app .wk-card-meta > *:not(:last-child)::after, :root.kopra-app .cl-card-meta > *:not(:last-child)::after, :root.kopra-app .ac-card-meta > *:not(:last-child)::after { content: " ·"; color: var(--border-strong); margin-left: 3px; } /* -- Le bandeau d'urgence de la rubrique -- */ :root.kopra-app .in-urgence { display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--danger); padding: 11px 0 11px 15px; margin-bottom: 20px; } :root.kopra-app .in-urgence-titre { font-size: var(--t-md); font-weight: 500; color: var(--danger); } :root.kopra-app .in-urgence-detail { font-size: var(--t-base); color: var(--text-faint); } /* La référence du signalement : elle situe la ligne, elle ne la titre pas. Elle passe en petit, au-dessus, sans capitale forcée. */ :root.kopra-app .in-card-top [style*="letter-spacing:.03em"] { font-size: var(--t-sm) !important; font-weight: 400 !important; color: var(--text-faint) !important; font-variant-numeric: tabular-nums; } /* ================================================================ Les mentions restantes, et le panneau de détail ================================================================ */ /* Chaque écran a nommé ses mentions à sa façon : `in-alert-badge`, `cl-alert-badge`, `wk-alert-badge`… Le sélecteur les prend toutes. Une mention est un mot, pas une capsule. */ :root.kopra-app [class*="-alert-badge"], :root.kopra-app [class*="-status-badge"], :root.kopra-app [class*="-tag"]:not(.filter-tag) { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; font-size: var(--t-sm) !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--text-faint) !important; } :root.kopra-app [class*="-alert-badge"].warn { color: var(--warn) !important; } :root.kopra-app [class*="-alert-badge"].danger { color: var(--danger) !important; } :root.kopra-app [class*="-alert-badge"].ok { color: var(--ok) !important; } :root.kopra-app [class*="-alert-badge"].info { color: var(--primary) !important; } :root.kopra-app [class*="-alert-badge"] > i { display: none !important; } /* ================================================================ Le panneau de détail (le tiroir) ---------------------------------------------------------------- C'est là qu'on travaille vraiment un dossier : ses onglets méritent la même sobriété que le reste. Ils étaient des boutons teintés avec icône et compteur en pastille ; ils deviennent des mots soulignés. ================================================================ */ :root.kopra-app .drawer-tabs, :root.kopra-app [class*="-drawer"] .drawer-tabs { background: var(--surface); border-bottom: 1px solid var(--border); gap: 22px; padding: 0 24px; /* La barre mesurait 46 px a l'ecran pour 34 px dans le flux : ses boutons debordaient de leur conteneur, dont la hauteur etait heritee de la feuille partagee. Le panneau suivant demarrait donc 12 px trop haut et son premier bloc passait dessous — le bandeau « En retard de 6 jours » apparaissait coupe. On laisse la barre prendre la hauteur de son contenu. */ height: auto; min-height: 0; flex: 0 0 auto; align-items: stretch; /* LA cause du bandeau coupe : `styles.css` pose `margin-bottom: -16px` sur .drawer-tabs. Cette marge negative avait un sens avec les anciens onglets encadres, qui portaient leur propre marge ; avec les onglets soulignes elle tire le panneau suivant SOUS la barre, et son premier bloc — ici « En retard de 6 jours » — apparait tronque. On ne touche pas a styles.css : elle est partagee avec le site vitrine. */ margin-bottom: 0; } :root.kopra-app .drawer-tab { background: none !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; padding: 12px 0 !important; font-size: var(--t-base) !important; font-weight: 400 !important; color: var(--text-faint) !important; margin-bottom: -1px; } :root.kopra-app .drawer-tab:hover { color: var(--text) !important; } :root.kopra-app .drawer-tab.is-active { color: var(--text) !important; border-bottom-color: var(--text) !important; font-weight: 500 !important; } :root.kopra-app .drawer-tab > i { display: none !important; } :root.kopra-app .drawer-tab .tab-count { background: none !important; border: 0 !important; color: var(--text-faint) !important; font-weight: 400 !important; padding: 0 !important; margin-left: 4px; font-variant-numeric: tabular-nums; } /* Les titres de section à l'intérieur du panneau : un surtitre, comme partout ailleurs. */ :root.kopra-app .drawer-section-title { font-size: var(--t-xs) !important; font-weight: 600 !important; letter-spacing: .11em !important; text-transform: uppercase !important; color: var(--text-faint) !important; border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 12px; } :root.kopra-app .drawer-section-title > i, :root.kopra-app .drawer-section-title span > i { display: none !important; } /* ================================================================ Les onglets de page (segments) ---------------------------------------------------------------- « Contrats / Carnet & urgences », « Membres / Invitations », « Synthèse / Édition manuelle » : ils étaient des segments à fond gris et coins ronds. Même traitement que partout — le mot, souligné quand il est actif. ================================================================ */ :root.kopra-app .tabs, :root.kopra-app .tab-row, :root.kopra-app .ce-tabs, :root.kopra-app .seg, :root.kopra-app .g-tabs { background: none !important; border: 0 !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; padding: 0 !important; gap: 22px; } :root.kopra-app .tabs > *, :root.kopra-app .tab-row > *, :root.kopra-app .ce-tabs > *, :root.kopra-app .g-tabs > * { background: none !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; box-shadow: none !important; padding: 11px 0 !important; font-size: var(--t-base) !important; font-weight: 400 !important; color: var(--text-faint) !important; margin-bottom: -1px; } :root.kopra-app .tabs > *.is-active, :root.kopra-app .tab-row > *.is-active, :root.kopra-app .ce-tabs > *.is-active, :root.kopra-app .g-tabs > *.is-active, :root.kopra-app .tabs > *.active, :root.kopra-app .ce-tabs > *.active, :root.kopra-app .g-tabs > *.active { color: var(--text) !important; border-bottom-color: var(--text) !important; font-weight: 500 !important; } :root.kopra-app .tabs > * > i, :root.kopra-app .tab-row > * > i, :root.kopra-app .ce-tabs > * > i, :root.kopra-app .g-tabs > * > i { display: none !important; } /* -- Les modes d'affichage (Cartes / Kanban / Timeline) -- */ :root.kopra-app .in-view-toggle, :root.kopra-app .wk-view-toggle, :root.kopra-app .cl-view-toggle, :root.kopra-app .ac-view-toggle { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; gap: 18px; } :root.kopra-app .in-view-btn, :root.kopra-app .wk-view-btn, :root.kopra-app .cl-view-btn, :root.kopra-app .ac-view-btn, :root.kopra-app [class$="-view-toggle"] > button { background: none !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; box-shadow: none !important; padding: 4px 0 !important; font-size: var(--t-sm) !important; font-weight: 400 !important; color: var(--text-faint) !important; } :root.kopra-app [class$="-view-toggle"] > button.is-active { color: var(--text) !important; border-bottom-color: var(--text) !important; font-weight: 500 !important; } :root.kopra-app [class$="-view-toggle"] > button > i { display: none !important; } /* ================================================================ Travaux — quote-part, suivi, et le panneau de détail ================================================================ */ /* Le panneau se superposait à la barre du haut de l'application : son en-tête et le fil d'Ariane s'écrivaient l'un sur l'autre. Il commence maintenant sous elle, sur toute la largeur restante. */ :root.kopra-app .drawer, :root.kopra-app .wk-drawer, :root.kopra-app .cl-drawer, :root.kopra-app .in-drawer, :root.kopra-app .ac-drawer { box-shadow: none !important; border-left: 1px solid var(--border) !important; } :root.kopra-app .drawer-head, :root.kopra-app .wk-drawer .drawer-head, :root.kopra-app .cl-drawer .drawer-head, :root.kopra-app .in-drawer .drawer-head, :root.kopra-app .ac-drawer .drawer-head { padding: 22px 24px 0 !important; background: var(--bg); border-bottom: 0; } :root.kopra-app .drawer-head h2 { font-size: 22px !important; font-weight: 600 !important; letter-spacing: -.018em; margin-top: 12px !important; } :root.kopra-app .drawer-meta { font-size: var(--t-sm) !important; gap: 4px 16px !important; } :root.kopra-app .drawer-meta i { display: none !important; } :root.kopra-app .drawer-section { margin-bottom: 30px; } /* -- Le panneau : la pastille de type redevient un mot -- */ :root.kopra-app [class*="-drawer"] .pill, :root.kopra-app [class*="-drawer"] .drawer-head .pill { background: none; border: 0; padding: 0; font-size: var(--t-sm); font-weight: 500; color: var(--text-muted); } :root.kopra-app [class*="-drawer"] .pill i { display: none; } /* -- Les lignes d'information : des faits, pas des icones -- */ :root.kopra-app [class*="-drawer"] .info-grid, :root.kopra-app [class*="-drawer"] .drawer-info { border: 1px solid var(--border); border-radius: 12px; background: none; box-shadow: none; } :root.kopra-app [class*="-drawer"] .info-grid i, :root.kopra-app [class*="-drawer"] .drawer-info i { display: none; } :root.kopra-app [class*="-drawer"] .drawer-section-title { font-size: var(--t-xs); letter-spacing: .07em; color: var(--text-faint); } :root.kopra-app [class*="-drawer"] .drawer-section-title i { display: none; } /* Les tuiles de montants : des chiffres alignés sous un filet, comme les compteurs de rubrique. Pas quatre cadres côte à côte. */ :root.kopra-app .money-tiles { gap: 0 !important; border-bottom: 1px solid var(--border); padding-bottom: 4px; } :root.kopra-app .money-tile { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 2px 26px 14px 0 !important; } :root.kopra-app .money-tile .lbl { font-size: var(--t-xs) !important; font-weight: 500 !important; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint) !important; } :root.kopra-app .money-tile .val { font-size: 21px !important; font-weight: 500 !important; color: var(--text) !important; font-variant-numeric: tabular-nums; } :root.kopra-app .money-tile .sub { font-size: var(--t-sm) !important; color: var(--text-faint) !important; } :root.kopra-app .money-tile.is-warn .val { color: var(--warn) !important; } :root.kopra-app .money-tile.is-ok .val { color: var(--ok) !important; } /* ── Ma quote-part ──────────────────────────────────────────────── C'est le seul chiffre qu'un copropriétaire vient chercher dans un dossier de travaux. Il a donc droit à la place, et à un filet qui le distingue du reste — c'est une information qui le concerne, lui. */ :root.kopra-app .wk-part { border-left: 2px solid var(--primary); padding: 4px 0 4px 16px; display: flex; flex-direction: column; gap: 4px; } :root.kopra-app .wk-part-montant { font-size: 30px; font-weight: 500; color: var(--text); letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; } :root.kopra-app .wk-part-detail { font-size: var(--t-base); color: var(--text-muted); } :root.kopra-app .wk-part-note { font-size: var(--t-sm); color: var(--text-faint); line-height: 1.55; max-width: 62ch; margin-top: 4px; } /* La ligne du lecteur dans le tableau de répartition : il doit se retrouver d'un coup d'œil parmi vingt-quatre lots. */ :root.kopra-app .tbl-pro tbody tr.is-highlight { background: var(--primary-soft) !important; box-shadow: inset 2px 0 0 var(--primary); } /* ── Le fil de suivi ──────────────────────────────────────────────── */ :root.kopra-app .wk-note-saisie { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; } :root.kopra-app .wk-note-saisie textarea { width: 100%; font-size: var(--t-base); line-height: 1.6; padding: 11px 13px; resize: vertical; min-height: 78px; } :root.kopra-app .wk-note-pied { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } :root.kopra-app .wk-note-audience { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-base); color: var(--text-muted); cursor: pointer; } :root.kopra-app .wk-note-audience input { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; } /* La barre de répartition du financement : des aplats de couleur, une légende sous eux. Un aplat sans mot ne dit rien — et les quatre parts ne se distinguaient que par une nuance. */ :root.kopra-app .wk-repart { display: flex; height: 6px; overflow: hidden; background: var(--border); } :root.kopra-app .wk-repart-part { display: block; height: 100%; } :root.kopra-app .wk-repart-part.alur { background: var(--primary); } :root.kopra-app .wk-repart-part.subv { background: var(--ok); } :root.kopra-app .wk-repart-part.exc { background: var(--accent-2); } :root.kopra-app .wk-repart-part.appel { background: var(--warn); } :root.kopra-app .wk-repart-legende { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px; font-size: var(--t-sm); color: var(--text-muted); } :root.kopra-app .wk-repart-legende > span { display: inline-flex; align-items: center; gap: 7px; } :root.kopra-app .wk-repart-legende > span::before { content: ""; width: 8px; height: 8px; flex-shrink: 0; } :root.kopra-app .wk-repart-legende .alur::before { background: var(--primary); } :root.kopra-app .wk-repart-legende .subv::before { background: var(--ok); } :root.kopra-app .wk-repart-legende .exc::before { background: var(--accent-2); } :root.kopra-app .wk-repart-legende .appel::before { background: var(--warn); } /* ================================================================ Les encarts teintés ---------------------------------------------------------------- « 2 contrats expirent sous 60 jours », « 18 lots sans compte », « 24 lots enregistrés » : des rectangles à fond rose, jaune ou bleu, cadre assorti, coins ronds et icône. Ils sont écrits en styles en ligne, page par page — aucune classe à viser. On les attrape donc par leur teinte, qui est le seul point commun. Ils deviennent ce qu'ils auraient dû être : une ligne, un filet vertical de la couleur du sens, et le texte. ================================================================ */ :root.kopra-app .page [style*="#FEF2F2"], :root.kopra-app .page [style*="#FEE2E2"], :root.kopra-app .page [style*="var(--danger-soft)"], :root.kopra-app .page [style*="#FFFBEB"], :root.kopra-app .page [style*="#FEF3C7"], :root.kopra-app .page [style*="#FFF7ED"], :root.kopra-app .page [style*="var(--warn-soft)"], :root.kopra-app .page [style*="#F0F5FF"], :root.kopra-app .page [style*="#EEF2FF"], :root.kopra-app .page [style*="#DBEAFE"], :root.kopra-app .page [style*="#F0F9FF"], :root.kopra-app .page [style*="var(--primary-soft)"], :root.kopra-app .page [style*="#ECFDF5"], :root.kopra-app .page [style*="var(--ok-soft)"] { background: none !important; background-color: transparent !important; border: 0 !important; border-left: 2px solid var(--border-strong) !important; border-radius: 0 !important; padding: 10px 0 10px 15px !important; box-shadow: none !important; font-size: var(--t-base); } /* La couleur du filet dit lequel des trois états on lit. */ :root.kopra-app .page [style*="#FEF2F2"], :root.kopra-app .page [style*="#FEE2E2"], :root.kopra-app .page [style*="var(--danger-soft)"] { border-left-color: var(--danger) !important; } :root.kopra-app .page [style*="#FFFBEB"], :root.kopra-app .page [style*="#FEF3C7"], :root.kopra-app .page [style*="#FFF7ED"], :root.kopra-app .page [style*="var(--warn-soft)"] { border-left-color: var(--warn) !important; } :root.kopra-app .page [style*="#ECFDF5"], :root.kopra-app .page [style*="var(--ok-soft)"] { border-left-color: var(--ok) !important; } /* Ces encarts portaient une icône devant, et leur texte en gras 800. */ :root.kopra-app .page [style*="#FEF2F2"] > i, :root.kopra-app .page [style*="#FFFBEB"] > i, :root.kopra-app .page [style*="#FEF3C7"] > i, :root.kopra-app .page [style*="#F0F5FF"] > i, :root.kopra-app .page [style*="var(--primary-soft)"] > i, :root.kopra-app .page [style*="#ECFDF5"] > i { display: none !important; } /* ================================================================ Onglets segmentés ================================================================ */ :root.kopra-app .seg, :root.kopra-app .seg-bar, :root.kopra-app [class*="seg-btn"]:first-child { } :root.kopra-app .seg-btn { background: none !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; box-shadow: none !important; padding: 11px 0 !important; margin-right: 22px; font-size: var(--t-base) !important; font-weight: 400 !important; color: var(--text-faint) !important; } :root.kopra-app .seg-btn.is-active { color: var(--text) !important; border-bottom-color: var(--text) !important; font-weight: 500 !important; } :root.kopra-app .seg-btn > i { display: none !important; } /* Le conteneur des segments porte le filet sous la rangée. */ :root.kopra-app .seg-btn:first-child { margin-left: 0; } /* ================================================================ Tableaux : la ligne ne se teinte pas ---------------------------------------------------------------- Sur Contrats, les échéances proches peignaient la ligne entière en jaune. Le sens est déjà porté par la date, en couleur, dans sa colonne : teinter la ligne le répète et alourdit la lecture. ================================================================ */ :root.kopra-app .tbl-pro tbody tr[style*="background"] { background: none !important; } :root.kopra-app .tbl-pro tbody tr.is-soon, :root.kopra-app .tbl-pro tbody tr.is-warn { background: none !important; box-shadow: inset 2px 0 0 var(--warn); } :root.kopra-app .tbl-pro tbody tr.is-expired { background: none !important; box-shadow: inset 2px 0 0 var(--danger); } /* Contrats : la ligne entière se peignait en jaune quand l'échéance approchait. La date le dit déjà, dans sa colonne et en couleur. */ :root.kopra-app .tbl-pro tbody tr.is-expiring { background: none !important; box-shadow: inset 2px 0 0 var(--warn); } /* Le conteneur des segments : un filet sous la rangée, pas une gélule grise autour des deux onglets. */ :root.kopra-app .seg-bar { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 18px; } :root.kopra-app .owner-bar { border-radius: 0 !important; height: 5px !important; } :root.kopra-app .owner-bar-seg { border-radius: 0 !important; } :root.kopra-app .owner-bar-seg:nth-child(odd) { background: var(--text-faint) !important; } :root.kopra-app .owner-bar-seg:nth-child(even) { background: var(--border-strong) !important; } /* ================================================================ Mes lots — la saisie des tantièmes ---------------------------------------------------------------- C'est le copropriétaire qui renseigne ses tantièmes : ils figurent sur son acte de propriété, personne ne les connaît mieux que lui. L'écran doit donc ressembler à ce qu'il fait — recopier trois nombres — et pas à un tableau de bord. ================================================================ */ :root.kopra-app .tan-mien { padding: 18px 0; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; } :root.kopra-app .tan-mien:last-child { border-bottom: 0; } :root.kopra-app .tan-mien-tete { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } :root.kopra-app .tan-mien-num { font-size: var(--t-md); font-weight: 500; color: var(--text); } :root.kopra-app .tan-mien-desc { font-size: var(--t-sm); color: var(--text-faint); } :root.kopra-app .tan-mien-cles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 260px)); gap: 14px 22px; justify-content: start; } :root.kopra-app .tan-champ { display: flex; flex-direction: column; gap: 4px; } :root.kopra-app .tan-champ-cle { font-size: var(--t-xs); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); } :root.kopra-app .tan-champ input { width: 100%; padding: 8px 11px; font-size: var(--t-md); font-variant-numeric: tabular-nums; } :root.kopra-app .tan-champ-fige { font-size: var(--t-md); color: var(--text); font-variant-numeric: tabular-nums; padding: 8px 0; } :root.kopra-app .tan-champ-total { font-size: var(--t-sm); color: var(--text-faint); } :root.kopra-app .tan-mien-pied { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } :root.kopra-app .tan-mien-note { font-size: var(--t-sm); color: var(--text-faint); } /* L'anomalie signalée par le conseil : elle s'adresse au propriétaire du lot, et elle se lit avant les champs — sinon il corrige sans savoir ce qu'on lui reproche. */ :root.kopra-app .tan-anomalie { border-left: 2px solid var(--warn); padding: 9px 0 9px 15px; display: flex; flex-direction: column; gap: 3px; } :root.kopra-app .tan-anomalie-titre { font-size: var(--t-base); font-weight: 500; color: var(--warn); } :root.kopra-app .tan-anomalie-motif { font-size: var(--t-base); color: var(--text-muted); line-height: 1.55; } :root.kopra-app .tan-anomalie-qui { font-size: var(--t-sm); color: var(--text-faint); } /* L'état d'un lot dans l'état descriptif. */ :root.kopra-app .tan-etat { font-size: var(--t-sm); color: var(--text-faint); white-space: nowrap; } :root.kopra-app .tan-etat-anomalie { color: var(--warn); } :root.kopra-app .tan-etat-vide { color: var(--text-faint); font-style: italic; } :root.kopra-app .tan-lien { background: none; border: 0; padding: 0; font: inherit; font-size: var(--t-sm); color: var(--primary); cursor: pointer; white-space: nowrap; } :root.kopra-app .tan-lien:hover { text-decoration: underline; } /* La barre de recherche de l'état descriptif : un champ souligné, et les filtres de type en mots. */ :root.kopra-app .tan-search-bar { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; } :root.kopra-app .tan-search-wrap { flex: 1 1 260px; position: relative; } :root.kopra-app .tan-search-wrap i { display: none; } :root.kopra-app .tan-search-wrap input { width: 100%; border: 0; border-bottom: 1px solid var(--border-strong); border-radius: 0; background: none; padding: 8px 2px !important; font-size: var(--t-base); } :root.kopra-app .tan-search-wrap input:focus { border-bottom-color: var(--primary); box-shadow: none; } :root.kopra-app .tan-filter-pills { display: flex; gap: 18px; } :root.kopra-app .tan-filter-pill { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 3px 0 !important; font-size: var(--t-sm) !important; color: var(--text-faint) !important; border-bottom: 2px solid transparent !important; } :root.kopra-app .tan-filter-pill.is-active { color: var(--text) !important; border-bottom-color: var(--text) !important; font-weight: 500 !important; } :root.kopra-app .lot-num-badge { background: none !important; border: 0 !important; padding: 0 !important; color: var(--text) !important; font-weight: 500 !important; font-variant-numeric: tabular-nums; } /* Les photos d'un signalement : elles ne sont pas une pièce jointe, elles sont le contenu. Une fuite au plafond se comprend en une seconde sur une image, et en trois phrases sans. */ :root.kopra-app .inc-photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; } :root.kopra-app .inc-photos-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; cursor: zoom-in; display: block; background: var(--surface-2); } :root.kopra-app .inc-ajout-photo { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; } /* ================================================================ Travaux — l'avancement par étapes ---------------------------------------------------------------- Le pourcentage n'est plus saisi : il est la somme des étapes franchies. L'écran doit donc montrer les étapes, pas seulement le nombre — c'est ce qui rend le chiffre vérifiable et justifiable en assemblée. ================================================================ */ :root.kopra-app .wk-pct { font-size: 21px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; } :root.kopra-app .wk-prochaine { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin: 0 0 16px; max-width: 70ch; } :root.kopra-app .wk-prochaine b { color: var(--text); font-weight: 600; } :root.kopra-app .wk-etapes { display: flex; flex-direction: column; } :root.kopra-app .wk-etape { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 14px; padding: 12px 12px 12px 14px; border-radius: 10px; cursor: pointer; transition: background .13s ease; } :root.kopra-app .wk-etape:hover { background: var(--surface-2); } /* L'étape qui vient est celle qui répond à « on en est où ? ». */ :root.kopra-app .wk-etape.est-suivante { background: var(--primary-soft); } :root.kopra-app .wk-etape input { width: 17px; height: 17px; accent-color: var(--text); cursor: pointer; } :root.kopra-app .wk-etape-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; } :root.kopra-app .wk-etape-nom { font-size: 14.5px; color: var(--text); } :root.kopra-app .wk-etape-aide { font-size: 12.5px; color: var(--text-faint); } /* Une étape franchie s'efface : ce qui reste à faire doit ressortir. */ :root.kopra-app .wk-etape.est-faite .wk-etape-nom { color: var(--text-faint); } :root.kopra-app .wk-etape-poids { font-size: 12px; color: var(--text-faint); white-space: nowrap; font-variant-numeric: tabular-nums; } :root.kopra-app .wk-note-calcul { font-size: 12.5px; color: var(--text-faint); line-height: 1.55; margin: 14px 0 0; max-width: 70ch; } /* À la création : les mêmes étapes, en cases à cocher compactes. */ :root.kopra-app .wk-etapes-creation { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 18px; } :root.kopra-app .wk-etape-mini { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-muted); cursor: pointer; } :root.kopra-app .wk-etape-mini input { width: 15px; height: 15px; accent-color: var(--text); cursor: pointer; } /* ================================================================ Les panneaux de détail ---------------------------------------------------------------- Ils étaient en `position: fixed` sur 100 % de la fenêtre : ouvrir un dossier de travaux recouvrait la barre latérale, donc revenait à sortir de l'application. Ils commencent maintenant après elle : on peut passer de Travaux à Sinistres sans rien fermer. Sur téléphone ils gardent toute la largeur — il n'y a pas de barre latérale à préserver. ================================================================ */ @media (min-width: 961px) { :root.kopra-app .drawer, :root.kopra-app .wk-drawer, :root.kopra-app .cl-drawer, :root.kopra-app .in-drawer, :root.kopra-app .ac-drawer { left: var(--sidebar-w) !important; width: auto !important; } :root.kopra-app .drawer-backdrop, :root.kopra-app .wk-drawer-backdrop, :root.kopra-app .cl-drawer-backdrop, :root.kopra-app .in-drawer-backdrop, :root.kopra-app .ac-drawer-backdrop { left: var(--sidebar-w) !important; } } /* Le retour vit en haut à gauche du panneau, seul sur sa ligne. Il était à droite, APRÈS « Modifier » et la corbeille — personne ne cherche un retour à cet endroit. */ :root.kopra-app .drawer-retour { margin-bottom: 14px; } :root.kopra-app .drawer-back { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 6px 12px 6px 8px; border-radius: 999px; cursor: pointer; font: inherit; font-size: var(--t-base); font-weight: 500; color: var(--text-muted); transition: background .15s ease, color .15s ease; } :root.kopra-app .drawer-back:hover { background: var(--bg-deep); color: var(--text); } :root.kopra-app .drawer-back::before { content: "←"; font-size: 15px; line-height: 1; } :root.kopra-app .drawer-back > i { display: none; } /* ================================================================ L'empreinte de chargement ---------------------------------------------------------------- Elle ne « fait pas joli » : elle occupe l'espace que le contenu occupera, pour que l'arrivee des donnees ne deplace rien. Premiere version ecartee : elle dessinait les cadres SANS rien dedans, et se lisait « il n'y a aucun dossier » plutot que « ca charge ». Une empreinte qui ment sur l'etat des donnees est pire que le vide qu'elle comble. Elle reprend donc la silhouette reelle d'une carte — titre, portee, rail, montant. Elle ne clignote pas : le balayage lumineux des chargements de 2021 attire l'oeil sur l'attente elle-meme. Une pulsation sourde suffit. ================================================================ */ :root.kopra-app .empreinte { display: flex; flex-direction: column; gap: 24px; max-width: var(--mesure); } :root.kopra-app .empreinte i, :root.kopra-app .empreinte u, :root.kopra-app .empreinte s, :root.kopra-app .empreinte b, :root.kopra-app .empreinte-titre { display: block; background: var(--bg-deep); border-radius: 6px; text-decoration: none; } :root.kopra-app .empreinte-titre { width: 190px; height: 26px; } /* Le bandeau de compteurs : un libelle court, un chiffre plus grand. */ /* Mesure : sur un telephone de 390 px, trois cellules de 152 px en `width: max-content` faisaient deborder la page de 86 px — pendant le chargement, donc sur TOUTES les rubriques. Une empreinte qui deforme la page qu'elle annonce ne remplit pas son role : elle se plie comme le contenu qu'elle imite. */ :root.kopra-app .empreinte-compteurs { display: flex; flex-wrap: wrap; max-width: 100%; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } :root.kopra-app .empreinte-compteurs > span { flex: 1 1 120px; min-width: 0; padding: 16px 20px; border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; } :root.kopra-app .empreinte-compteurs > span:first-child { border-left: 0; } :root.kopra-app .empreinte-compteurs i { width: 68px; height: 10px; } :root.kopra-app .empreinte-compteurs b { width: 40px; height: 22px; } /* Les cartes : titre, portee, rail d'etapes, montant. */ :root.kopra-app .empreinte-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 372px)); justify-content: start; gap: 18px; } :root.kopra-app .empreinte-grille > div { border: 1px solid var(--border); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 14px; } :root.kopra-app .empreinte-grille i { width: 72%; height: 17px; } :root.kopra-app .empreinte-grille u { width: 52%; height: 12px; } :root.kopra-app .empreinte-grille s { width: 100%; height: 6px; border-radius: 3px; } :root.kopra-app .empreinte-grille b { width: 45%; height: 16px; } @media (prefers-reduced-motion: no-preference) { :root.kopra-app .empreinte { animation: empreintePouls 1.4s ease-in-out infinite; } @keyframes empreintePouls { 0%, 100% { opacity: .5; } 50% { opacity: .8; } } } /* ================================================================ L'entree du contenu ---------------------------------------------------------------- Les pages ecrivent leur contenu d'un bloc : il apparaissait sans transition pendant que le cadre glissait. Un fondu court le pose au lieu de le faire claquer. Il vit ENTIEREMENT sous `no-preference`, et l'etat par defaut — en dehors — est visible. Un `fill-mode: both` pose sans cette garde avait deja rendu des pages entierement blanches : une animation qui ne demarre jamais fige son `opacity: 0`. ================================================================ */ @media (prefers-reduced-motion: no-preference) { :root.kopra-app #appMain.entre { animation: contenuEntre 140ms cubic-bezier(.23, 1, .32, 1); } /* Opacite SEULE. Sur Travaux, les cartes ont deja leur propre entree en sequence : un deplacement du conteneur s'y ajouterait et le total deviendrait mou. Le fondu pose le contenu, la sequence l'anime. */ @keyframes contenuEntre { from { opacity: 0; } to { opacity: 1; } } } /* ================================================================ Le panneau « Copropriete » de la barre laterale On y avait mis une page de reglages : 578 px de haut dans un rail de 192, trois surtitres en capitales, des libelles casses sur trois lignes, et une note interne qui fuyait jusqu'a l'utilisateur. Un rail ne porte pas un formulaire. Il ne reste que ce qu'on vient y chercher en passant : le code, et l'interrupteur des emails. Le reste vit sur la page « Inviter ». ================================================================ */ /* Le code EST le bouton. Un seul objet a viser, et la confirmation s'affiche a l'endroit meme du geste. */ :root.kopra-app .sb-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 12px; cursor: pointer; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; font: inherit; text-align: left; transition: border-color 120ms ease, background-color 120ms ease; } @media (hover: hover) and (pointer: fine) { :root.kopra-app .sb-code:hover { border-color: var(--border-strong); } :root.kopra-app .sb-code:hover .sb-code-etat { color: var(--text); } } :root.kopra-app .sb-code-val { font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--text); font-variant-numeric: tabular-nums; } :root.kopra-app .sb-code-etat { font-size: 12.5px; color: var(--text-faint); white-space: nowrap; transition: color 120ms ease; } :root.kopra-app .sb-code.est-copie { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); } :root.kopra-app .sb-code.est-copie .sb-code-etat { color: var(--ok); } :root.kopra-app .sb-code-aide { font-size: 12.5px; color: var(--text-faint); line-height: 1.45; margin: 7px 0 14px; } /* Un lien qui mene ailleurs, pas un bouton qui agit ici : la fleche le dit, et le libelle tient sur une ligne — c'etait le defaut des trois boutons precedents, qui se cassaient en deux et trois lignes. */ :root.kopra-app .sb-panel-lien { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13.5px; color: var(--text); text-decoration: none; transition: background-color 120ms ease, border-color 120ms ease; } :root.kopra-app .sb-panel-lien::after { content: '\203A'; color: var(--text-faint); font-size: 15px; } @media (hover: hover) and (pointer: fine) { :root.kopra-app .sb-panel-lien:hover { background: var(--surface-2); border-color: var(--border-strong); } } /* L'interrupteur des emails : une ligne. Le paragraphe de trois lignes qui l'accompagnait disait surtout des choses internes. */ :root.kopra-app .sb-bascule { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13.5px; color: var(--text-muted); cursor: pointer; } :root.kopra-app .sb-bascule input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); margin: 0; } /* ================================================================ Les panneaux de detail — icones et echelle ---------------------------------------------------------------- Mesure : 41 icones dans le panneau Travaux, ~77 dans celui des Sinistres, et respectivement 23 et ~46 textes sous 13 px. Un pictogramme devant chaque titre de section, chaque onglet, chaque ligne d'information et chaque etat vide. On ne retire QUE le decoratif : les icones qui portent seules une fonction — fermeture, retour, bouton sans libelle — restent. Une icone accompagnee de son texte ne dit rien de plus que lui. Aucune mise en page n'est touchee : c'est ce qui distingue cette regle de la couche qui convertissait les grilles en listes. ================================================================ */ :root.kopra-app [class*="-drawer"] .drawer-section-title i, :root.kopra-app [class*="-drawer"] .drawer-tab i, :root.kopra-app [class*="-drawer"] .widget-empty i, :root.kopra-app [class*="-drawer"] .people-meta-row i, :root.kopra-app [class*="-drawer"] .people-quick i, :root.kopra-app [class*="-drawer"] .list-icon i, :root.kopra-app [class*="-drawer"] .pill i, :root.kopra-app [class*="-drawer"] [class*="-alert-badge"] i, :root.kopra-app [class*="-drawer"] .btn--sm i { display: none; } /* Rien sous 13 px : ce public a souvent 70 ans. */ :root.kopra-app [class*="-drawer"] .tab-count, :root.kopra-app [class*="-drawer"] .lbl, :root.kopra-app [class*="-drawer"] .count, :root.kopra-app [class*="-drawer"] .list-meta, :root.kopra-app [class*="-drawer"] .people-role { font-size: 13px; } :root.kopra-app [class*="-drawer"] .tab-count, :root.kopra-app [class*="-drawer"] .count { font-variant-numeric: tabular-nums; } :root.kopra-app [class*="-drawer"] .drawer-section-title { font-size: 13px; letter-spacing: .07em; color: var(--text-faint); } :root.kopra-app [class*="-drawer"] .btn--sm { font-size: 13.5px; } /* L'etat redevient un mot : la capsule teintee n'ajoutait rien. */ :root.kopra-app [class*="-drawer"] .drawer-head .pill { background: none; border: 0; padding: 0; font-size: 14px; font-weight: 500; } /* ================================================================ La fenêtre de question L'application posait ses questions avec `confirm()` : une fenêtre dessinée par le navigateur, qui annonce « localhost:5003 indique » et propose « OK » sans dire ce que OK va faire. Au milieu d'une application soignée, c'était la seule surface qui trahissait qu'on est dans une page web. ================================================================ */ :root.kopra-app .k-fenetre .modal-head { border-bottom: 0; padding-bottom: 0; } :root.kopra-app .k-fenetre .modal-head h3 { font-size: var(--t-lg); font-weight: 600; letter-spacing: -.01em; } :root.kopra-app .k-fenetre .modal-body { padding-top: 10px; } :root.kopra-app .k-fenetre-texte { font-size: var(--t-base); line-height: 1.6; color: var(--text-muted); margin: 0; max-width: 52ch; } :root.kopra-app .k-fenetre .modal-foot { border-top: 0; padding-top: 6px; } /* Une action destructrice se nomme et se voit ; elle ne se déguise pas en bouton ordinaire. */ :root.kopra-app .btn--danger { background: var(--danger); border-color: var(--danger); color: #fff; } :root.kopra-app .btn--danger:hover { filter: brightness(.94); } /* ================================================================ Le dégradé de la marque sur les gestes principaux Les boutons pleins et les choix sélectionnés étaient posés sur `var(--text)` — un noir d'encre, celui du texte. C'est neutre, mais ce n'est pas Kopra : le logo porte un dégradé bleu → violet (#4A6FE3 → #9333EA, en diagonale) qu'on n'utilisait nulle part ailleurs. Le geste principal le porte maintenant. Il reste un seul dégradé, sur une seule famille d'objets : le bouton qui agit, et le choix qu'on a fait. Tout le reste demeure plat — un dégradé partout ne signalerait plus rien. ================================================================ */ :root.kopra-app { --degrade-marque: linear-gradient(135deg, #4A6FE3 0%, #9333EA 100%); } :root.kopra-app .btn:not(.btn--ghost):not(.btn--danger):not(.btn--sm), :root.kopra-app .lg-radio:has(input:checked), :root.kopra-app .lt-radio:has(input:checked), :root.kopra-app .lt-vue.is-active, :root.kopra-app .lt-type.is-active { background: var(--degrade-marque); border-color: transparent; color: #fff; } @media (hover: hover) and (pointer: fine) { :root.kopra-app .btn:not(.btn--ghost):not(.btn--danger):not(.btn--sm):hover { /* On fonce le dégradé plutôt que de le remplacer : le survol confirme le même objet, il n'en présente pas un autre. */ filter: saturate(1.08) brightness(.95); } } :root.kopra-app .lg-radio:has(input:checked) input, :root.kopra-app .lt-radio:has(input:checked) input { accent-color: #fff; } /* ================================================================ Les cartes de dossiers : le badge de visibilité s'efface « PUBLIC » en pastille pleine prenait autant de place que le nom du dossier, qui se retrouvait coupé — « Assemblées généra… », « Règlement de copro… ». Or tous les dossiers sont publics : le badge répétait la même chose six fois et volait la place du seul mot utile. Il ne s'affiche plus que sur l'exception, et en discret. ================================================================ */ :root.kopra-app .folder-vis-pill { font-size: 11px; font-weight: 500; letter-spacing: .04em; background: none; border: 1px solid var(--border); color: var(--text-faint); padding: 2px 7px; } /* ================================================================ Le logo ramène à l'accueil C'est le geste qu'on essaie partout ailleurs sur le web — et il ne faisait rien. Le lien reprend la mise en page du bloc de marque pour que rien ne bouge à l'écran ; seul le curseur change. ================================================================ */ :root.kopra-app .sb-marque { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-decoration: none; color: inherit; border-radius: 8px; padding: 4px; margin: -4px; transition: background-color 120ms ease; } @media (hover: hover) and (pointer: fine) { :root.kopra-app .sb-marque:hover { background: var(--sidebar-hover); } } :root.kopra-app .sb-marque:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } /* ================================================================ Le doigt : ce qu'on doit pouvoir viser Mesure au telephone : le bouton de fermeture du menu faisait 28 x 28. Une cible tactile confortable fait 44 px de cote ; sous 40, on rate. Le pictogramme garde sa taille — c'est la ZONE qui grandit. ================================================================ */ @media (max-width: 1023px), (pointer: coarse) { :root.kopra-app .sb-close-mobile { width: 44px; height: 44px; margin-right: -10px; } :root.kopra-app .sb-item, :root.kopra-app .sb-sous a, :root.kopra-app .sb-marque { min-height: 44px; } /* Les pastilles d'action : 34 px mesures, on passe a 40. Le pictogramme ne change pas de taille — c'est la zone qu'on vise qui grandit. */ :root.kopra-app .icon-pill, :root.kopra-app .copro-salon-fbtn, :root.kopra-app .btn--icon { min-width: 40px; min-height: 40px; } } /* ================================================================ Rien sous 12,5 px sur un ecran tactile Ce public a souvent 70 ans et lit son telephone a bout de bras. Les mentions a 10 et 11 px — heure d'une notification, compteur d'onglet, initiales d'un avatar — deviennent illisibles avant tout le reste. ================================================================ */ @media (max-width: 1023px), (pointer: coarse) { :root.kopra-app .notif-time, :root.kopra-app .dot-badge, :root.kopra-app .t-count, :root.kopra-app .r-meta, :root.kopra-app .ca-sub, :root.kopra-app .sf-title, :root.kopra-app .ct-avatar, :root.kopra-app .sm-time, :root.kopra-app .ub-meta, :root.kopra-app .ub-replies { font-size: 12.5px; } } /* ================================================================ La navigation du téléphone tient dans le tiroir ---------------------------------------------------------------- La barre du bas alignait les sept portes — sans leurs sous-entrées, et en doublon de la barre latérale. Elle est retirée ; le bouton de la barre du haut ouvre le tiroir, qui porte la navigation entière. La feuille partagée (styles.css, commune au site vitrine — on n'y touche pas) réserve encore la hauteur de cette barre sous chaque page. On rend ce creux à la page. ================================================================ */ @media (max-width: 960px) { :root.kopra-app .main .page { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important; } /* La barre du haut porte maintenant un bouton : il lui faut de l'air. */ :root.kopra-app .main-topbar { gap: 10px; } }