/* ===================================================================== La Plateforme - feuille de style Palette et typographie du site upprocess.ch (D31). La couleur porte un sens : vert tout va bien, ambre a surveiller, rouge il faut agir, bleu neutre. Jamais de couleur decorative. ===================================================================== */ /* --------------------------------------------------------------------- La palette vient du site upprocess.ch (assets/css/style.css), dont les bleus sont releves au pixel sur la carte de visite. Elle n'est plus approchee de memoire : chaque valeur ci-dessous est soit reprise telle quelle du site, soit derivee de lui pour une raison ecrite a cote. Deux endroits ou l'application s'ecarte du site, volontairement : 1. **Le site est une vitrine, l'application est un outil.** Les rayons de 18 px, les cartes a 38 px de padding et l'interligne de 1,65 sont justes pour une page d'accueil et faux pour un tableau de quarante lignes de comptabilite. On reprend la marque — couleurs, typo, ombres — et on resserre l'echelle. 2. **Le texte de l'application est petit (14 px).** Une couleur qui passe en gros titre sur le site peut devenir illisible ici. Les ecarts sont signales ligne par ligne, avec le rapport de contraste. --------------------------------------------------------------------- */ :root { /* Les bleus de la marque, repris a l'identique du site. */ --bleu-pale: #B4D8F1; /* aplat le plus clair du verso de la carte */ --bleu-clair: #A9D2F0; /* « Process » du recto */ --bleu-moyen: #89BEE7; /* « Process » du verso */ --bleu: #3984BE; /* fond du recto = LE bleu de la marque */ --bleu-fonce: #2A6A9C; /* survols, degrades */ --bleu-sombre: #1E5074; /* bleu appuye */ /* L'encre. Le site reserve le navy aux titres et au menu — c'est une encre, pas une surface. La barre laterale prend donc le bleu le plus sombre de la marque et non ce presque-noir, qui sur 200 px de large ecraserait l'ecran et ferait perdre l'identite bleue. */ --nuit: #00002C; /* titres : le navy du site */ --flanc: #1E5074; /* fond de la barre laterale */ /* Les fonds. Le site pose #D2E8F6 sous de grandes cartes blanches espacees ; l'application couvre l'ecran de panneaux, et cette teinte y devient lourde. On prend donc plus clair — mais precisement le #DAEAF7 que le site donne a son en-tete, parce que c'est aussi le fond inclus dans l'image du logo. Toute autre valeur, meme voisine, fait apparaitre une couture la ou le bandeau du logo touche la page : deux bleus clairs presque pareils se denoncent l'un l'autre. */ --fond: #DAEAF7; /* = fond de l'en-tete du site ET du logo */ --fond-appuye: #D2E8F6; /* --bg du site */ --panneau: #ffffff; --texte: #3C4C63; /* --text du site — 8,7:1 sur blanc */ /* Le --muted du site (#74879E) ne donne que 3,7:1 sur blanc : il passe en gros caracteres sur la vitrine, il echoue au texte courant de 14 px d'ici (AA en demande 4,5). Assombri du strict necessaire, a teinte constante, pour atteindre 4,5:1. */ --discret: #647890; /* Traits, derives du bleu clair de la marque plutot que de l'ancien. */ --trait: #CBE0F2; --trait-fin: #E4F0FA; /* La couleur porte un sens, jamais une decoration (D31). Ces trois-la ne suivent donc pas la marque : elles suivent l'etat. */ --bon: #2e9e6b; --surveiller: #c48e2a; --agir: #c0392b; /* Le langage d'ombre du site, resserre : meme teinte bleutee, portee reduite, parce qu'ici les panneaux se touchent. */ --ombre: 0 10px 26px -14px rgba(42, 106, 156, 0.38); --ombre-douce: 0 6px 16px -10px rgba(42, 106, 156, 0.25); /* L'echelle du site est 18/12 ; celle-ci est un cran en dessous, pour que les panneaux imbriques ne paraissent pas bouffis. */ --rayon: 12px; --rayon-petit: 8px; --rayon-pilule: 50px; /* les boutons du site */ --transition: .25s cubic-bezier(.4, 0, .2, 1); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--fond); color: var(--texte); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; display: flex; min-height: 100vh; } a { color: inherit; text-decoration: none; } /* ---------- Barre laterale ---------- Version 1.4 : claire et aeree. Sept blocs, pas un de plus. Chaque entree est une pastille ronde + un libelle, largement espaces. La couleur ne sert qu'a l'accent (l'entree active) ; tout le reste respire en blanc. */ .flanc { width: 256px; flex: none; background: var(--flanc); padding: 20px 0 16px; display: flex; flex-direction: column; /* ⚠ La barre est un enfant flex de , qui fait au moins 100vh mais s'etire avec le CONTENU. Sans ces trois lignes elle prenait la hauteur de la page — 2047 px sur le tableau de bord — et `space-evenly` ci-dessous dispersait les sept entrees sur 1750 px : la premiere en haut de l'ecran, la quatrieme hors champ. Bornee a un ecran et collante, elle tient la promesse du commentaire suivant, et le menu reste sous les yeux quand on descend. */ align-self: flex-start; position: sticky; top: 0; height: 100vh; overflow-y: auto; } /* Les sept blocs occupent toute la hauteur : repartis regulierement entre le logo et le pied, ils remplissent la barre au lieu de s'entasser en haut. */ .flanc-menu { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; } /* Le logo du site, repris tel quel — et non plus une imitation en texte. Son fond #daeaf7 est dans l'image : plutot que de le poser au milieu du bleu sombre, ou il ferait vignette, on le laisse occuper toute la largeur. Il devient un bandeau, et le raccord ne se voit pas. */ /* L'accueil vide de la version 1.4 : sobre, centre, jamais l'air casse. */ .accueil-vide { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 60vh; gap: 8px; } .accueil-vide h1 { font-size: 30px; font-weight: 300; letter-spacing: -.02em; color: var(--nuit); } .accueil-vide p { color: var(--discret); font-size: 15px; } /* ---------- Le Dashboard ---------- Epure : un bandeau d'accueil discret, une rangee de chiffres, des cartes claires. Peu de couleur — la couleur ne sert qu'a l'accent et au sens. */ .tb-salut { background: linear-gradient(120deg, var(--fond-appuye), var(--pale)); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 26px 28px; margin-bottom: 18px; } .tb-salut-jour { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bleu-fonce); margin-bottom: 8px; } .tb-salut h1 { font-size: clamp(24px, 3.2vw, 32px); font-weight: 300; letter-spacing: -.02em; color: var(--nuit); margin: 0; } .tb-salut p { margin: 4px 0 0; color: var(--discret); font-size: 14.5px; } .tb-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; } .tb-tuile { background: var(--panneau); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 18px 20px; } .tb-tuile-valeur { font-size: 30px; font-weight: 600; color: var(--nuit); line-height: 1; letter-spacing: -.5px; font-variant-numeric: tabular-nums; } .tb-tuile-nom { margin-top: 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--discret); } .tb-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; } .tb-carte { background: var(--panneau); border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; } .tb-carte-tete { padding: 14px 18px; border-bottom: 1px solid var(--trait-fin); } .tb-carte-tete h2 { font-size: 14px; font-weight: 600; color: var(--nuit); margin: 0; } .tb-vide { padding: 30px 18px; text-align: center; } .tb-vide p { margin: 0; color: var(--texte); font-size: 14px; font-weight: 500; } .tb-vide span { display: block; margin-top: 4px; color: var(--discret); font-size: 12.5px; } /* ---------- Page-carrefour (gros boutons vers les sous-domaines) ---------- */ .hub-tete { margin-bottom: 22px; } .hub-tete h1 { font-size: clamp(24px, 3vw, 30px); font-weight: 300; letter-spacing: -.02em; color: var(--nuit); margin: 0; } .hub-tete p { margin: 6px 0 0; color: var(--discret); font-size: 15px; } .hub-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .hub-carte { display: flex; flex-direction: column; align-items: flex-start; padding: 22px; gap: 6px; background: var(--panneau); border: 1px solid var(--trait); border-radius: var(--rayon); transition: border-color .15s, box-shadow .15s, transform .15s; } .hub-carte:hover { border-color: var(--bleu-clair); box-shadow: var(--ombre-douce); transform: translateY(-2px); } .hub-icone { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--voile); color: var(--bleu-fonce); margin-bottom: 8px; transition: background .15s, color .15s; } .hub-carte:hover .hub-icone { background: var(--bleu); color: #fff; } .hub-icone svg { width: 26px; height: 26px; display: block; } /* Un module greffe depuis le serveur fournit un SIGNE (emoji ou caractere) la ou nos domaines fournissent un trace SVG. Meme cadre, meme taille optique : la tuile ne doit pas trahir d'ou vient la fonction. */ .hub-icone-signe { font-size: 26px; line-height: 1; } .hub-titre { font-size: 17px; font-weight: 600; color: var(--nuit); } .hub-desc { font-size: 13.5px; color: var(--discret); line-height: 1.5; } /* La tuile « sur mesure » : proposer un outil adapte, vers l'offre du site. Trait tille bleu fonce pour la distinguer des domaines livres — c'est une invitation, pas un module deja la. */ .hub-carte.sur-mesure { background: transparent; border: 2px dashed var(--bleu-sombre); } .hub-carte.sur-mesure:hover { border-color: var(--bleu-sombre); background: rgba(30, 80, 116, .06); box-shadow: none; transform: translateY(-2px); } .hub-carte.sur-mesure .hub-icone { background: transparent; color: var(--bleu-sombre); border: 1.5px dashed var(--bleu-sombre); } .hub-carte.sur-mesure:hover .hub-icone { background: var(--bleu-sombre); color: #fff; border-style: solid; } .hub-carte.sur-mesure .hub-titre { color: var(--bleu-sombre); } .flanc .lien-marque { display: block; line-height: 0; } .flanc .marque { display: block; width: 100%; height: auto; margin: -20px 0 18px; /* annule le padding haut de .flanc */ } .flanc a.entree { display: flex; align-items: center; gap: 14px; padding: 10px 14px; margin: 0 12px; border-radius: 14px; color: rgba(255, 255, 255, .72); font-size: 14px; font-weight: 500; transition: background .15s, color .15s; } .flanc a.entree:hover { background: rgba(255, 255, 255, .08); color: #fff; } /* La pastille ronde qui porte l'icone. Sur le bleu de la marque : un cercle translucide au repos, plein et blanc (icone bleue) quand l'entree est active — le seul accent fort de la barre. */ .flanc .pastille-nav { flex: none; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .12); color: #fff; transition: background .15s, color .15s; } .flanc .pastille-nav svg { width: 20px; height: 20px; display: block; } .flanc a.entree:hover .pastille-nav { background: rgba(255, 255, 255, .2); } /* La visite guidee, presente en demonstration seulement. Elle se distingue du menu sans crier : ce n'est pas un module de l'outil, et elle ne doit pas se confondre avec les seize qui suivent. D'ou la pilule, qui reprend la forme des boutons du site plutot que celle des entrees de menu. */ .flanc a.entree.visite { margin: 0 14px 12px; padding: 8px 13px; color: var(--bleu-clair); font-weight: 500; border-left: none; border: 1px solid rgba(169, 210, 240, .35); border-radius: var(--rayon-pilule); } .flanc a.entree.visite:hover { background: rgba(169, 210, 240, .14); color: #fff; } .flanc a.entree.actif { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; } .flanc a.entree.actif .pastille-nav { background: #fff; color: var(--bleu-fonce); } .flanc a.entree .pastille-menu { margin-left: auto; } /* Reduire la barre a ses icones (25.10.2026). Le bouton est discret : il sert, il ne se montre pas. */ .flanc .marque-reduite { display: none; } .replier-flanc { display: flex; align-items: center; margin: -6px 12px 8px; padding: 2px 14px; background: none; border: 0; border-radius: 14px; cursor: pointer; color: rgba(255, 255, 255, .7); transition: background .15s, color .15s; } .replier-flanc:hover { background: rgba(255, 255, 255, .08); color: #fff; } .replier-flanc .pastille-nav { width: 42px; height: 36px; background: transparent; } @media (min-width: 761px) { .flanc { transition: width .18s ease; } body.flanc-reduit .flanc { width: 78px; } body.flanc-reduit .flanc .libelle, body.flanc-reduit .flanc .marque, body.flanc-reduit .flanc .pied, body.flanc-reduit .flanc .famille, body.flanc-reduit .flanc .entree.ferme, body.flanc-reduit .flanc .entree.visite { display: none; } body.flanc-reduit .flanc .marque-reduite { display: block; width: 38px; height: 38px; margin: 0 auto 22px; } body.flanc-reduit .flanc a.entree { justify-content: center; padding: 10px 0; margin: 0 10px; } body.flanc-reduit .replier-flanc { justify-content: center; padding: 2px 0; margin: -10px 10px 8px; } } @media (max-width: 760px) { .replier-flanc { display: none; } } .flanc .separateur { height: 1px; background: rgba(255,255,255,.12); margin: 12px 24px; } .flanc .pied { padding: 8px 24px 0; color: rgba(255,255,255,.4); font-size: 11px; } .flanc .pied b { color: rgba(255,255,255,.7); } .pastille-menu { background: rgba(255,255,255,.2); color: #fff; border-radius: 20px; padding: 0 7px; font-size: 11px; font-weight: 500; } .pastille-menu.alerte { background: var(--agir); font-weight: 600; } /* ⚠ PROVISOIRE : le selecteur « agir en tant que », en attendant la connexion. */ .qui-suis-je { margin: 0 0 12px; } .qui-suis-je label { display: block; font-size: 9px; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 4px; } .qui-suis-je select { width: 100%; font-family: inherit; font-size: 11px; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; padding: 5px 7px; } .qui-suis-je select option { color: var(--texte); } .qui-suis-je .qui-nom { color: rgba(255,255,255,.9); font-size: 12.5px; font-weight: 500; margin-bottom: 6px; } .bouton-deco { width: 100%; font-family: inherit; font-size: 11px; cursor: pointer; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; padding: 6px; transition: background .15s; } .bouton-deco:hover { background: rgba(255,255,255,.18); } /* Discret mais present sur chaque ecran : on ne cherche pas ou signaler au moment ou quelque chose ne marche pas. */ .signaler-probleme { display: block; margin: 8px 0 10px; font-size: 11px; color: rgba(255,255,255,.62); text-decoration: underline; } .signaler-probleme:hover { color: #fff; } /* Mon espace, et ce qui y attend : sur ordinateur aussi. */ .mon-espace { display: flex; align-items: center; gap: 6px; margin: 2px 0 8px; font-size: 12px; color: #fff; text-decoration: none; font-weight: 500; } .mon-espace:hover { text-decoration: underline; } .pastille-espace { background: var(--agir, #c0392b); color: #fff; border-radius: 9px; font-size: 10px; font-weight: 700; padding: 1px 6px; line-height: 1.4; } /* Le logo de l'entreprise, sur fond clair : la barre est sombre. */ .logo-flanc { display: block; max-height: 36px; max-width: 140px; margin-bottom: 8px; background: #fff; border-radius: 6px; padding: 3px 5px; } /* ---------- Pages d'authentification (connexion / activation) ---------- Layout dedie, sans barre laterale : une carte centree sur fond de marque. */ body.page-auth { display: block; background: var(--fond); } .auth-cadre { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .auth-carte { width: 100%; max-width: 380px; background: var(--panneau); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 30px 28px; } .auth-logo { display: block; width: 150px; height: auto; margin: 0 auto 18px; } .auth-titre { font-size: 22px; font-weight: 600; color: var(--nuit); text-align: center; letter-spacing: -.4px; } .auth-sous { text-align: center; color: var(--discret); font-size: 13.5px; margin: 4px 0 18px; } .auth-form { display: flex; flex-direction: column; gap: 13px; } .auth-ou { display: flex; align-items: center; text-align: center; color: var(--discret); font-size: 12px; margin: 16px 0 12px; } .auth-ou::before, .auth-ou::after { content: ""; flex: 1; border-top: 1px solid var(--trait); } .auth-ou span { padding: 0 12px; } /* ===================================================================== STANDARD 1.4 — L'ECRAN DE TRAVAIL --------------------------------------------------------------------- Un domaine = un ecran. On lit un REGISTRE (dense, aligne, sans decoration) et on agit dans un VOLET qui s'ouvre par-dessus : jamais de page « fiche », jamais de page « nouveau », donc jamais de navigation perdue. La couleur ne sert qu'au sens ; tout le reste est encre et blanc. ===================================================================== */ /* ---------- En-tete d'ecran ---------- */ .ecran-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; } .ecran-tete h1 { font-size: 26px; font-weight: 600; color: var(--nuit); letter-spacing: -.5px; line-height: 1.15; margin: 2px 0 0; } /* La ligne de chiffres : ce qui resume le domaine, en un regard. */ .ecran-chiffres { margin-top: 7px; font-size: 13px; color: var(--discret); display: flex; gap: 18px; flex-wrap: wrap; } .ecran-chiffres b { color: var(--nuit); font-weight: 600; font-variant-numeric: tabular-nums; } .ecran-chiffres .alerte b { color: var(--agir); } /* ---------- Barre d'outils (recherche + filtres) ---------- */ .barre-registre { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; } .champ-recherche { flex: 1; min-width: 200px; max-width: 320px; font-family: inherit; font-size: 13.5px; color: var(--texte); padding: 9px 13px; background: var(--panneau); border: 1px solid var(--trait); border-radius: var(--rayon-petit); } .champ-recherche::placeholder { color: #a9bed2; } .champ-recherche:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(90, 159, 214, .16); } .segments { display: inline-flex; background: var(--panneau); border: 1px solid var(--trait); border-radius: var(--rayon-petit); overflow: hidden; } .segments button { font-family: inherit; font-size: 12.5px; color: var(--discret); background: none; border: 0; border-right: 1px solid var(--trait-fin); padding: 8px 15px; cursor: pointer; transition: background .12s, color .12s; } .segments button:last-child { border-right: 0; } .segments button:hover { background: #f6fafd; color: var(--nuit); } .segments button.actif { background: var(--bleu-fonce); color: #fff; font-weight: 500; } /* ---------- Le registre ---------- */ .registre { background: var(--panneau); border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; } .registre table { width: 100%; border-collapse: collapse; } .registre thead th { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--discret); text-align: left; background: #fafcfe; padding: 11px 18px; border-bottom: 1px solid var(--trait); } .registre tbody td { padding: 13px 18px; font-size: 13.5px; color: var(--texte); border-bottom: 1px solid #f2f7fb; vertical-align: middle; } .registre tbody tr:last-child td { border-bottom: none; } .registre tbody tr { cursor: pointer; transition: background .12s; } .registre tbody tr:hover { background: #f8fbfe; } /* La ligne ouverte dans le volet : un liseré, pas un aplat criard. */ .registre tbody tr.ouverte { background: #eef5fc; box-shadow: inset 3px 0 0 var(--bleu-fonce); } .registre .principal { font-size: 14px; font-weight: 600; color: var(--nuit); } .registre .secondaire { font-size: 12.5px; color: var(--discret); margin-top: 2px; } .registre .nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .registre .vide { padding: 44px 20px; text-align: center; } .registre .vide p { color: var(--nuit); font-weight: 500; font-size: 15px; margin: 0 0 5px; } .registre .vide span { color: var(--discret); font-size: 13.5px; } /* Une mention d'etat, discrete : la couleur porte le sens, pas l'ornement. */ .mention { display: inline-block; font-size: 11.5px; font-weight: 500; padding: 2px 9px; border-radius: 20px; background: #eef4fa; color: var(--discret); } .mention.client { background: rgba(57,132,190,.13); color: var(--bleu-sombre); } .mention.fournisseur { background: rgba(100,120,144,.14); color: var(--discret); } .mention.attention { background: rgba(192,57,43,.10); color: var(--agir); } .mention.bon { background: rgba(46,158,107,.12); color: #1c7550; } /* ---------- Le volet lateral ---------- */ .voile-volet { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 44, .28); opacity: 0; pointer-events: none; transition: opacity .2s; } .voile-volet.ouvert { opacity: 1; pointer-events: auto; } .volet { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: 430px; max-width: 100%; background: var(--panneau); border-left: 1px solid var(--trait); box-shadow: -18px 0 40px -24px rgba(0, 0, 44, .35); transform: translateX(100%); transition: transform .22s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; } .volet.ouvert { transform: none; } /* Ferme, le volet est pousse hors de l'ecran — mais son ombre, elle, depassait et dessinait une bande grise le long du bord droit. */ .volet:not(.ouvert) { box-shadow: none; } /* Le formulaire est l'enfant direct du volet : sans cette ligne il rompt la chaine flex, et le pied — donc « Enregistrer » — sort de l'ecran. */ .volet > form { display: flex; flex-direction: column; flex: 1; min-height: 0; } .volet-tete { padding: 18px 22px; border-bottom: 1px solid var(--trait-fin); display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; } .volet-tete h2 { font-size: 17px; font-weight: 600; color: var(--nuit); margin: 0; } .volet-tete .discret { margin-top: 3px; } .volet-fermer { background: none; border: 0; cursor: pointer; font-size: 20px; line-height: 1; color: var(--discret); padding: 2px 4px; border-radius: 6px; } .volet-fermer:hover { background: #f0f6fb; color: var(--nuit); } .volet-corps { padding: 6px 22px 22px; overflow-y: auto; flex: 1; min-height: 0; } .volet-groupe { margin-top: 18px; } .volet-groupe > legend, .volet-groupe > .titre-groupe { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--discret); padding: 0 0 8px; border: 0; width: 100%; border-bottom: 1px solid var(--trait-fin); margin-bottom: 12px; } .volet-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .volet-champs .large { grid-column: 1 / -1; } .volet-pied { padding: 14px 22px; border-top: 1px solid var(--trait-fin); background: #fafcfe; display: flex; align-items: center; gap: 10px; } .volet-pied .a-droite { margin-left: auto; } /* Un volet large : pour un document qui a des LIGNES (facture, devis), les 430px du volet courant ne suffisent pas a lire une designation. */ .volet.large { width: 660px; } /* Un lien de reglage a cote du titre : present, jamais bruyant. */ .lien-discret { font-size: 12.5px; color: var(--discret); text-decoration: none; border-bottom: 1px dotted #b9cade; } .lien-discret:hover { color: var(--bleu-sombre); border-bottom-color: var(--bleu); } /* ---------- Les lignes d'un document (facture, devis) ---------- */ .lignes-doc { width: 100%; border-collapse: collapse; } .lignes-doc th { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--discret); text-align: left; padding: 0 5px 7px; font-family: inherit; } .lignes-doc th.num, .lignes-doc td.num { text-align: right; } .lignes-doc td { padding: 3px 4px; vertical-align: middle; } .lignes-doc input, .lignes-doc select { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13px; color: var(--texte); padding: 7px 9px; background: var(--panneau); border: 1px solid var(--trait); border-radius: 7px; } .lignes-doc input:focus, .lignes-doc select:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(90, 159, 214, .16); } .lignes-doc input.chiffre { text-align: right; font-variant-numeric: tabular-nums; } .lignes-doc .montant { font-size: 13px; color: var(--nuit); font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: 6px; } .lignes-doc .retirer { background: none; border: 0; cursor: pointer; color: #b9cade; font-size: 17px; line-height: 1; padding: 4px 5px; border-radius: 6px; } .lignes-doc .retirer:hover { background: rgba(192,57,43,.09); color: var(--agir); } .ajouter-ligne { margin-top: 9px; background: none; border: 1px dashed var(--trait); border-radius: var(--rayon-petit); color: var(--bleu-sombre); font-family: inherit; font-size: 12.5px; font-weight: 500; padding: 8px 14px; cursor: pointer; width: 100%; } .ajouter-ligne:hover { background: #f4f9fd; border-color: var(--bleu); } /* ---------- Le Dashboard (standard 1.4) ---------- Deux zones, dans cet ordre : ce qui reclame une DECISION, puis les chiffres. Les anciennes `.tuile` etaient des aplats de couleur pleins ; ici la couleur ne touche que le CHIFFRE, jamais le fond — quatre blocs cote a cote ne doivent pas faire un mur rouge et vert. */ .titre-bloc { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin: 26px 0 11px; font-size: 13px; font-weight: 600; color: var(--nuit); } .titre-bloc:first-child { margin-top: 0; } .titre-bloc .combien { font-weight: 400; color: var(--discret); font-size: 12.5px; } /* La marque d'une decision en attente : deux lettres, la couleur dit l'urgence. Plus lisible qu'une icone, et ca ne se confond avec rien. */ .marque-attente { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; background: #eef4fa; color: var(--discret); } .marque-attente.agir { background: rgba(192, 57, 43, .12); color: var(--agir); } .marque-attente.surveiller { background: rgba(214, 154, 42, .16); color: #8a5c05; } .marque-attente.bon { background: rgba(46, 158, 107, .13); color: #1c7550; } .registre .decision td { padding: 12px 18px; } .registre .decision .marque { width: 32px; padding-right: 0; } .registre .decision .quoi { text-align: right; white-space: nowrap; } .registre .decision .quoi .bouton { padding: 7px 15px; font-size: 12.5px; } /* Les chiffres, un bloc par module. */ .grille-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; } .bloc-chiffres { display: block; text-decoration: none; padding: 15px 17px; background: var(--panneau); border: 1px solid var(--trait); border-radius: var(--rayon); transition: border-color .14s, box-shadow .14s; } .bloc-chiffres:hover { border-color: var(--bleu); box-shadow: var(--ombre); } .bloc-chiffres .quoi { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--discret); padding-bottom: 9px; border-bottom: 1px solid var(--trait-fin); margin-bottom: 4px; } .bloc-chiffres .rang { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 7px 0; font-size: 13px; } .bloc-chiffres .rang > span { color: var(--discret); } .bloc-chiffres .rang > b { color: var(--nuit); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; } .bloc-chiffres .rang > b.agir { color: var(--agir); } .bloc-chiffres .rang > b.surveiller { color: #8a5c05; } .bloc-chiffres .rang > b.bon { color: #1c7550; } /* ---------- Le texte d'une annonce, tel qu'il a ete ecrit ---------- */ .texte-annonce { font-size: 14px; line-height: 1.65; color: var(--texte); white-space: pre-wrap; word-wrap: break-word; } .texte-annonce:empty::after { content: "Cette annonce n'a pas de texte : le titre dit tout."; color: var(--discret); font-style: italic; } /* Une liste de noms : ceux qui n'ont pas encore lu. */ .liste-noms { display: flex; flex-wrap: wrap; gap: 6px; } .liste-noms span { font-size: 12.5px; padding: 4px 10px; border-radius: 20px; background: rgba(214, 154, 42, .14); color: #8a5c05; } .liste-noms.tous span { background: rgba(46, 158, 107, .12); color: #1c7550; } /* ---------- Les pieces rattachees a un projet ---------- */ .pieces { display: flex; flex-direction: column; gap: 1px; } .pieces .piece { display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: #fafcfe; border: 1px solid var(--trait-fin); border-radius: var(--rayon-petit); font-size: 13px; } .pieces .piece .num { font-weight: 600; color: var(--nuit); } .pieces .piece .somme { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--nuit); white-space: nowrap; } .pieces .piece .retirer { background: none; border: 0; cursor: pointer; color: #b9cade; font-size: 16px; line-height: 1; padding: 2px 4px; border-radius: 5px; } .pieces .piece .retirer:hover { background: rgba(192,57,43,.09); color: var(--agir); } .pieces .rien { font-size: 13px; color: var(--discret); padding: 4px 0 2px; } /* Rattacher : un choix et un bouton, sur une ligne. */ .rattacher { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; } .rattacher .champ { flex: 1; min-width: 0; } .rattacher .bouton { flex: none; } /* Une jauge sobre : le budget consomme, sans couleur criarde tant que ca va. */ .jauge { height: 4px; background: var(--trait); border-radius: 3px; overflow: hidden; margin-top: 5px; } .jauge span { display: block; height: 100%; background: var(--bleu); } .jauge.deborde span { background: var(--agir); } /* Les totaux : alignes a droite, sur une seule colonne etroite, parce que c'est la seule chose qu'on relit trois fois. */ .totaux { width: 270px; margin: 16px 0 0 auto; font-size: 13.5px; } .totaux > div { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; } .totaux span { color: var(--discret); } .totaux b { color: var(--nuit); font-variant-numeric: tabular-nums; font-weight: 600; } .totaux .grand { border-top: 1px solid var(--trait); margin-top: 5px; padding-top: 9px; } .totaux .grand span { color: var(--nuit); font-weight: 500; white-space: nowrap; } .totaux .grand b { font-size: 17px; } @media (max-width: 760px) { .volet, .volet.large { width: 100%; } .volet-champs { grid-template-columns: 1fr; } .ecran-tete { align-items: stretch; } .totaux { width: 100%; } } /* Une notification non lue se distingue sans crier. */ a.rang.notification { text-decoration: none; } a.rang.notification:hover { background: #fafcfe; } .rang.notification .jeton { background: #eef4fa; color: var(--discret); } .rang.notification.non-lue { background: rgba(90,159,214,.05); } .rang.notification.non-lue .jeton { background: var(--bleu-fonce); color: #fff; } .rang.notification.non-lue .texte b { color: var(--nuit); } /* ---------- Contenu ---------- */ .contenu { flex: 1; padding: 22px 28px 60px; min-width: 0; } .entete { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 18px; gap: 20px; } .titre { font-size: 22px; font-weight: 600; color: var(--nuit); letter-spacing: -.5px; line-height: 1.2; } .discret { font-size: 12px; color: var(--discret); } .etiquette { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--discret); } /* ---------- Onglets de vue ---------- */ .onglets { display: flex; gap: 4px; align-items: center; border-bottom: 1px solid var(--trait); margin-bottom: 16px; } .onglet { padding: 8px 16px; font-size: 13px; color: var(--discret); border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 8px; } .onglet:hover { color: var(--nuit); } .onglet.actif { color: var(--nuit); font-weight: 600; border-bottom-color: var(--bleu-fonce); } .onglet.ajout { color: var(--bleu-fonce); margin-left: auto; } .attribution { background: #eef5fc; border: 1px solid #cfe1f2; border-radius: var(--rayon-petit); padding: 9px 14px; font-size: 12px; color: var(--bleu-fonce); margin-bottom: 14px; } /* ---------- Compteurs ---------- */ .compteur { border-radius: 20px; padding: 1px 8px; font-size: 11px; font-weight: 600; color: #fff; background: var(--bleu-fonce); } .compteur.agir { background: var(--agir); } /* ---------- Tuiles chiffrees ---------- */ .tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 11px; margin-bottom: 16px; } .tuile { border-radius: var(--rayon); padding: 13px 15px; color: #fff; position: relative; background: var(--bleu-fonce); } .tuile.neutre { background: var(--bleu-fonce); } .tuile.bon { background: var(--bon); } .tuile.surveiller { background: var(--surveiller); } .tuile.agir { background: var(--agir); } .tuile .valeur { font-size: 24px; font-weight: 600; letter-spacing: -1px; line-height: 1; } .tuile .nom { font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.85); margin-top: 5px; } .tuile .roue { position: absolute; top: 8px; right: 10px; color: rgba(255,255,255,.5); font-size: 12px; } .tuile.ajouter { background: none; border: 2px dashed #b9d3ea; color: #7ba7cf; display: flex; align-items: center; justify-content: center; font-size: 12px; } /* ---------- Cartes ---------- */ .colonnes { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; align-items: start; } /* Sans ceci, un element de grille refuse de descendre sous la largeur de son contenu : un tableau large elargit sa carte, et la carte pousse la page hors de l ecran. */ .colonnes > * { min-width: 0; } @media (max-width: 900px) { .colonnes { grid-template-columns: 1fr; } } .carte { background: var(--panneau); border: 1px solid var(--trait); border-radius: var(--rayon); } .carte > .tete { padding: 11px 16px; border-bottom: 1px solid var(--trait-fin); display: flex; justify-content: space-between; align-items: center; gap: 10px; } .carte > .tete b { font-size: 13px; color: var(--nuit); font-weight: 600; } .carte .vide { padding: 22px 16px; text-align: center; color: var(--discret); font-size: 13px; } .rang { padding: 10px 16px; border-bottom: 1px solid #f6fafd; display: flex; align-items: center; gap: 11px; } .rang:last-child { border-bottom: none; } .rang .texte { flex: 1; min-width: 0; } .rang .texte b { color: var(--nuit); font-weight: 600; } .jeton { width: 26px; height: 26px; border-radius: 50%; flex: none; background: #d7e5f3; color: var(--bleu-fonce); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; } .jeton.agir { background: #f6dcd8; color: var(--agir); } /* Les boutons du site sont des pilules a degrade. La forme se reprend telle quelle — elle ne coute pas un pixel de densite et c'est le signe le plus reconnaissable de la marque apres la couleur. Le rembourrage, lui, reste celui d'une application : le site respire a 13/26 px, une barre d'actions au-dessus d'un tableau ne le peut pas. Le degrade descend d'un cran par rapport au site. Le sien part de #3984BE, ou du blanc ne donne que 4,0:1 — sous le seuil AA. En partant du bleu fonce, on tient 5,8:1 au point le plus clair. */ .bouton { background: linear-gradient(120deg, var(--bleu-fonce), var(--bleu-sombre)); color: #fff; border: 1px solid transparent; border-radius: var(--rayon-pilule); padding: 6px 15px; font-size: 12px; font-weight: 600; flex: none; cursor: pointer; font-family: inherit; box-shadow: var(--ombre-douce); transition: var(--transition); } .bouton:hover { box-shadow: var(--ombre); } .bouton.fantome { background: var(--panneau); color: var(--bleu-fonce); border-color: var(--bleu-clair); box-shadow: none; } .bouton.fantome:hover { background: var(--trait-fin); box-shadow: none; } /* ---------- Tableau ---------- */ table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--trait-fin); font-size: 13px; } th { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--discret); background: #fafcfe; border-bottom: 1px solid var(--trait); } tbody tr:last-child td { border-bottom: none; } tr.inactif { color: var(--discret); } tr.inactif td b { color: var(--discret); font-weight: 500; } .marque-etat { display: inline-block; border-radius: 20px; padding: 1px 9px; font-size: 11px; font-weight: 500; } .marque-etat.ok { background: rgba(46,158,107,.13); color: var(--bon); } .marque-etat.attente { background: rgba(192,57,43,.11); color: var(--agir); } .marque-etat.parti { background: #eef4fa; color: var(--discret); } /* ===================================================================== Calendrier — jour, semaine, mois, annee ===================================================================== */ .barre-calendrier { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .selecteur-vue { display: inline-flex; background: var(--panneau); border: 1px solid var(--trait); border-radius: var(--rayon-petit); overflow: hidden; } .selecteur-vue a { padding: 7px 16px; font-size: 13px; color: var(--discret); border-right: 1px solid var(--trait-fin); } .selecteur-vue a:last-child { border-right: none; } .selecteur-vue a:hover { background: var(--fond); color: var(--nuit); } .selecteur-vue a.actif { background: var(--bleu-fonce); color: #fff; font-weight: 500; } .navigation-calendrier { display: flex; gap: 7px; } /* ---------- Grille horaire (jour et semaine) ---------- */ .grille-horaire { display: grid; grid-template-columns: 48px repeat(var(--colonnes), minmax(0, 1fr)); background: var(--panneau); } .colonne-heures { border-right: 1px solid var(--trait); } .graduation { font-size: 10px; color: var(--discret); text-align: right; padding-right: 7px; transform: translateY(-6px); } .colonne-jour { border-right: 1px solid var(--trait-fin); min-width: 0; } .colonne-jour:last-child { border-right: none; } .colonne-jour.week-end { background: #fbfdff; } .colonne-jour.ce-jour { background: rgba(90, 159, 214, .06); } .tete-jour { height: 34px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--trait); font-size: 12px; } .tete-jour b { color: var(--nuit); font-weight: 600; } .colonne-jour.ce-jour .tete-jour b { color: var(--bleu-fonce); } .tete-jour a:hover b { text-decoration: underline; } .piste { position: relative; } .ligne-heure { position: absolute; left: 0; right: 0; height: 1px; background: var(--trait-fin); } .bloc-evenement { /* `left` et `width` viennent du gabarit, en pourcents : les rendez-vous simultanes se partagent la colonne au lieu de s'empiler. Le `right` d'avant les forcait tous a toute la largeur. */ position: absolute; overflow: hidden; box-sizing: border-box; background: var(--bleu-fonce); color: #fff; border-radius: 5px; padding: 3px 7px; font-size: 11px; line-height: 1.32; box-shadow: 0 2px 6px -2px rgba(45, 102, 153, .5); } .bloc-evenement b { display: block; font-weight: 600; } .bloc-evenement span { display: block; color: rgba(255, 255, 255, .82); font-size: 10px; } /* ---------- Grille du mois ---------- */ .grille-mois { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } .tete-mois { padding: 8px; text-align: center; font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--discret); background: #fafcfe; border-bottom: 1px solid var(--trait); } .case-mois { min-height: 96px; padding: 6px; border-right: 1px solid var(--trait-fin); border-bottom: 1px solid var(--trait-fin); min-width: 0; } .case-mois:nth-child(7n + 7) { border-right: none; } .case-mois.week-end { background: #fbfdff; } .case-mois.hors-mois { background: #f7fafd; } .case-mois.hors-mois .numero { color: #c3d2e0; } .case-mois.ce-jour { background: rgba(90, 159, 214, .09); } .case-mois .numero { display: inline-block; font-size: 12px; font-weight: 600; color: var(--nuit); margin-bottom: 4px; } .case-mois.ce-jour .numero { background: var(--bleu-fonce); color: #fff; border-radius: 50%; width: 21px; height: 21px; text-align: center; line-height: 21px; } .puce-evenement { /* `display: block` n'est pas cosmetique : c'est un , donc inline par defaut, et sur un element inline `overflow: hidden`, `text-overflow` et les marges verticales ne font rien du tout. Les trois etaient ecrites, aucune n'agissait — une puce de 132 px debordait de sa case de 74 px, par-dessus le jour d'a cote. */ display: block; background: rgba(90, 159, 214, .15); color: var(--nuit); border-radius: 4px; padding: 2px 5px; margin-bottom: 2px; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .puce-evenement span { color: var(--bleu-fonce); font-weight: 600; } .case-mois .reste { font-size: 10px; color: var(--bleu-fonce); } /* ---------- Vue annuelle ---------- */ .grille-annee { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; } .mini-mois .tete { padding: 8px 12px; } .mini-mois .tete b { font-size: 12px; text-transform: capitalize; } .mini-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 9px 12px 12px; } .mini-jour { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 9.5px; border-radius: 3px; color: var(--texte); background: #f2f7fc; } .mini-jour.vide { background: none; } .mini-jour.week-end { background: #e9eff6; color: var(--discret); } .mini-jour.n1 { background: var(--bleu-clair); color: var(--nuit); } .mini-jour.n2 { background: var(--bleu-fonce); color: #fff; font-weight: 600; } .mini-jour.ce-jour { outline: 2px solid var(--nuit); outline-offset: -2px; font-weight: 700; } .mini-jour:hover { filter: brightness(.94); } .legende-annee { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin-top: 14px; font-size: 12px; color: var(--texte); } .legende-annee span { display: inline-flex; align-items: center; gap: 7px; } .legende-annee i { width: 14px; height: 14px; aspect-ratio: auto; flex: none; } /* ---------- Priorite d'un rendez-vous ---------- */ /* La priorite se lit au bord gauche : elle ne remplace pas la couleur de fond, qui reste celle de l'agenda. */ .bloc-evenement { display: block; text-decoration: none; } .bloc-evenement:hover { filter: brightness(1.1); } .bloc-evenement.priorite-haute { border-left: 4px solid var(--agir); } .bloc-evenement.priorite-basse { background: #8ba9c4; } .puce-evenement.priorite-haute { border-left: 3px solid var(--agir); } .puce-evenement:hover { background: rgba(90, 159, 214, .3); } .lien-conflit { display: block; margin-top: 5px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .grille-participants { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px 14px; border: 1px solid var(--trait); border-radius: var(--rayon-petit); padding: 10px 13px; background: var(--panneau); } textarea { font-family: inherit; font-size: 13px; color: var(--texte); padding: 8px 11px; border: 1px solid var(--trait); border-radius: var(--rayon-petit); background: var(--panneau); width: 100%; resize: vertical; } textarea:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(90, 159, 214, .18); } /* ---------- Jauge d'espace disque ---------- */ .jauge-espace { min-width: 190px; text-align: right; } .jauge-espace .etiquette { margin-bottom: 4px; } .jauge-espace .barre { height: 7px; background: var(--trait); border-radius: 20px; overflow: hidden; margin-bottom: 5px; } .jauge-espace .barre span { display: block; height: 100%; background: var(--bleu-fonce); border-radius: 20px; } .jauge-espace .barre span.surveiller { background: var(--surveiller); } .jauge-espace .barre span.agir { background: var(--agir); } a.texte { text-decoration: none; color: inherit; } a.texte:hover b { color: var(--bleu-fonce); text-decoration: underline; } input[type="file"] { font-family: inherit; font-size: 12px; padding: 7px; border: 1px dashed #b9d3ea; border-radius: var(--rayon-petit); background: #fafcfe; width: 100%; } /* ---------- Totaux d'une facture ---------- */ .totaux { padding: 12px 16px; border-top: 1px solid var(--trait); display: flex; flex-direction: column; gap: 4px; align-items: flex-end; } .totaux div { display: flex; gap: 24px; font-size: 13px; } .totaux span { color: var(--discret); } .totaux b { min-width: 110px; text-align: right; font-variant-numeric: tabular-nums; } .totaux .grand { font-size: 16px; margin-top: 5px; padding-top: 8px; border-top: 1px solid var(--trait-fin); width: 100%; justify-content: flex-end; } .totaux .grand b { color: var(--nuit); } /* ---------- QR-facture ---------- */ .bloc-qr { display: flex; gap: 18px; padding: 16px; align-items: flex-start; } .bloc-qr .qr { flex: none; line-height: 0; } .bloc-qr .qr svg { display: block; } .detail-qr { font-size: 12px; line-height: 1.5; min-width: 0; } .detail-qr b { color: var(--nuit); } .montant-plus { color: var(--bon); } .montant-moins { color: var(--texte); } .corps-courriel { font-family: inherit; font-size: 13.5px; line-height: 1.62; color: var(--texte); white-space: pre-wrap; word-break: break-word; margin: 0; } .texte-extrait { font-family: ui-monospace, Consolas, monospace; font-size: 11px; line-height: 1.5; color: var(--discret); white-space: pre-wrap; max-height: 320px; overflow: auto; margin-top: 9px; background: #fafcfe; border: 1px solid var(--trait-fin); border-radius: var(--rayon-petit); padding: 10px 12px; } details summary { cursor: pointer; font-size: 12px; } /* ---------- Messages ---------- */ .messages { margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; } .message { border-radius: var(--rayon-petit); padding: 10px 15px; font-size: 13px; border-left: 3px solid var(--bleu-fonce); background: #eef5fc; color: var(--bleu-fonce); } .message.succes { border-left-color: var(--bon); background: rgba(46,158,107,.10); color: #1c7550; } .message.erreur { border-left-color: var(--agir); background: rgba(192,57,43,.09); color: #9c2f22; } /* ---------- Formulaires ---------- */ .formulaire { padding: 0; } .grille-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; padding: 18px 20px; } .champ { display: flex; flex-direction: column; gap: 5px; } .champ > span { font-size: 12px; font-weight: 600; color: var(--nuit); } .champ > em { font-style: normal; font-size: 11px; color: var(--discret); line-height: 1.45; } .champ input, .champ select { font-family: inherit; font-size: 13px; color: var(--texte); padding: 8px 11px; border: 1px solid var(--trait); border-radius: var(--rayon-petit); background: var(--panneau); width: 100%; } .champ input:focus, .champ select:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(90,159,214,.18); } .champ input::placeholder { color: #b3c4d6; } .actions { display: flex; gap: 9px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--trait-fin); background: #fafcfe; border-radius: 0 0 var(--rayon) var(--rayon); } .carte.danger { margin-top: 16px; padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-color: #f0d6d1; } .carte.danger b { color: var(--nuit); font-size: 13px; } .lien-discret { color: var(--bleu-fonce); font-size: 12px; font-weight: 500; } .lien-discret:hover { text-decoration: underline; } /* ---------- Catalogue d'indicateurs ---------- */ .catalogue { margin-top: 22px; } .groupe { margin-bottom: 14px; } .groupe .liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; margin-top: 6px; } .choix { border: 1px solid var(--trait); border-radius: var(--rayon-petit); padding: 7px 11px; font-size: 12px; background: var(--panneau); display: flex; align-items: center; gap: 8px; } .choix .case { width: 13px; height: 13px; border: 1px solid #b9d3ea; border-radius: 3px; flex: none; } .choix .case.cochee { background: var(--bleu-fonce); border-color: var(--bleu-fonce); } .groupe.indisponible .choix { opacity: .45; } .choix.deja { background: rgba(90,159,214,.09); border-color: #cfe1f2; color: var(--bleu-fonce); } /* un choix cliquable : c'est un bouton, il doit en avoir l'air */ button.bouton-choix { width: 100%; font-family: inherit; text-align: left; cursor: pointer; transition: border-color .12s, background .12s; } button.bouton-choix:hover { border-color: var(--bleu); background: #f7fbfe; } button.bouton-choix:hover .case { border-color: var(--bleu); } .case-a-cocher { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; font-weight: 400; color: var(--texte); padding: 4px 0; cursor: pointer; line-height: 1.45; } .case-a-cocher input { width: auto; margin-top: 3px; accent-color: var(--bleu-fonce); } /* les petits boutons d'ordre, dans une ligne */ .rang form { display: flex; margin: 0; } .rang .bouton { padding: 4px 9px; } /* ---------- Grille des acces ---------- */ /* Une ligne par personne, une colonne par module. Le tableau defile horizontalement plutot que de comprimer les colonnes : une case a cocher trop etroite se rate. */ .cadre-grille { overflow-x: auto; } .grille-acces { border-collapse: collapse; width: 100%; min-width: 640px; } .grille-acces th, .grille-acces td { border-bottom: 1px solid var(--trait); padding: 9px 8px; text-align: center; } .grille-acces th.qui, .grille-acces td.qui { text-align: left; position: sticky; left: 0; background: #fff; min-width: 190px; box-shadow: 1px 0 0 var(--trait); } .grille-acces thead th { font-size: 11px; font-weight: 600; color: var(--discret); vertical-align: bottom; padding-bottom: 10px; white-space: nowrap; } .grille-acces thead th .signe-colonne { display: block; font-size: 15px; color: var(--bleu); margin-bottom: 3px; } .grille-acces tbody tr:hover { background: #fafcfe; } .grille-acces tbody tr:hover .qui { background: #fafcfe; } .grille-acces .qui b { display: block; font-size: 13px; } .grille-acces .qui span { font-size: 11px; color: var(--discret); } .grille-acces input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; } /* Un niveau qui voit tout : la case est cochee et verrouillee. Le montrer evite la question « pourquoi decocher ne fait rien ». */ .grille-acces tr.voit-tout { background: rgba(90,159,214,.05); } .grille-acces tr.voit-tout:hover .qui, .grille-acces tr.voit-tout .qui { background: #f4f9fd; } .grille-acces .verrou { color: var(--bleu); font-size: 13px; } .grille-acces td.vide-total { color: var(--agir); font-weight: 600; font-size: 11px; } .barre-grille { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--trait); } .barre-grille .discret { margin-right: auto; } /* ===================================================================== TELEPHONE --------------------------------------------------------------------- Ce qui se fait vraiment debout, dehors, une main occupee : saisir ses heures, declarer une absence, cocher une tache, deposer une photo, lire une fiche materiel. Le reste doit rester lisible sans etre optimise — on ne fait pas sa comptabilite dans une camionnette. ===================================================================== */ /* La barre du haut n'existe que sur petit ecran. */ .barre-mobile { display: none; } .voile { display: none; } @media (max-width: 760px) { /* --- La disposition d'ensemble --- */ body { display: block; } .barre-mobile { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 30; background: var(--flanc); color: #fff; padding: 0 10px; height: 52px; } /* Le logo porte son propre fond clair. Sur la barre sombre du telephone il forme donc une plaque : on l'arrondit pour qu'elle ait l'air voulue, et on lui laisse assez de hauteur pour que le « UP » blanc se lise — a 21 px il devenait une vignette grise. */ .barre-mobile .marque { height: 32px; width: auto; display: block; border-radius: var(--rayon-petit); } .barre-mobile .pastille-menu { margin-left: auto; } .barre-mobile .pastille-menu + .pastille-menu { margin-left: 0; } .bouton-menu { background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: var(--rayon-petit); font-size: 18px; line-height: 1; width: 40px; height: 40px; cursor: pointer; } /* Le menu se replie derriere le bouton. Sur 375 px, 200 px figes prenaient plus de la moitie de l'ecran. */ .flanc { position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; width: 250px; padding-top: 16px; transform: translateX(-100%); transition: transform .18s ease-out; overflow-y: auto; } body.menu-ouvert .flanc { transform: none; } /* Le voile suit la classe du corps, pas l'attribut hidden : une regle d'auteur display: block l'emporterait sur [hidden] et le voile couvrirait la page en permanence. */ body.menu-ouvert .voile { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(30,58,95,.45); } /* Au doigt, une entree de menu de 9 px de haut se rate. */ .flanc a.entree { padding: 12px 20px; font-size: 14px; } .contenu { padding: 14px 13px 70px; } /* --- L'entete se met en colonne --- */ .entete { flex-direction: column; align-items: stretch; gap: 10px; } .entete .bouton, .entete .bouton.fantome { align-self: flex-start; } .titre { font-size: 19px; } /* --- Les onglets defilent au lieu de se tasser --- */ .onglets { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .onglets::-webkit-scrollbar { display: none; } .onglet { white-space: nowrap; padding: 10px 13px; flex: none; } .onglet.ajout { margin-left: 0; } /* --- Les tableaux defilent dans leur carte --- */ /* Dix-huit ecrans en contiennent : on les traite ici plutot que de recrire chaque gabarit. */ .carte table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } th, td { padding: 9px 11px; } /* --- Les formulaires sur une colonne --- */ .grille-champs { grid-template-columns: 1fr !important; } .champ[style*="grid-column"] { grid-column: 1 / -1 !important; } .champ input, .champ select, .champ textarea { font-size: 16px; } /* 16 px : en dessous, Safari zoome tout seul au moment de la saisie et l'ecran part de travers. */ /* Plusieurs ecrans groupent leurs boutons dans un display:flex pose en style inline. Le style inline ne declare pas flex-wrap : une regle d ici s applique donc, et les boutons passent a la ligne au lieu de sortir de l ecran. */ .entete > div, .rang > span, .rang > div, .actions { flex-wrap: wrap; } /* Les barres de recherche groupent champ, case a cocher et bouton dans un flex inline : sur 375 px les trois ne tiennent pas cote a cote. */ .carte [style*="display:flex"] { flex-wrap: wrap; } /* Un nowrap dans une cellule de tableau est juste — le tableau defile. Hors tableau, il pousse la page hors de l ecran. */ label.case-a-cocher { white-space: normal !important; } /* Ces largeurs minimales tenaient sur un ecran large. */ .jauge-espace { min-width: 0; } .totaux b { min-width: 84px; } /* --- Boutons et rangs au pouce --- */ .bouton { padding: 10px 15px; font-size: 14px; } .actions { flex-wrap: wrap; gap: 8px; } .actions form { flex: none; } .rang { padding: 12px 14px; } .rang .bouton { padding: 7px 11px; } /* --- Les chiffres : deux par ligne, pas un --- */ .tuiles { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 9px; } .tuile .valeur { font-size: 21px; } /* --- L'agenda --- */ /* La semaine et le mois restent consultables en defilant plutot que d'etre comprimes jusqu'a l'illisible. Le jour, lui, tient. */ .grille-horaire, .grille-mois, .grille-annee { overflow-x: auto; -webkit-overflow-scrolling: touch; } .grille-horaire { min-width: 620px; } .grille-mois { min-width: 520px; } .barre-calendrier { flex-wrap: wrap; gap: 8px; } .selecteur-vue { width: 100%; } .selecteur-vue a { flex: 1; text-align: center; } /* --- La grille des acces --- */ .grille-acces { min-width: 560px; } .grille-acces th.qui, .grille-acces td.qui { min-width: 140px; } /* --- Le QR de la facture --- */ .bloc-qr { flex-direction: column; } /* --- Le selecteur provisoire agir en tant que --- */ .qui-suis-je select { font-size: 16px; padding: 8px; } } /* Tres petits ecrans : on serre encore un peu. */ @media (max-width: 380px) { .contenu { padding: 12px 10px 70px; } .tuiles { grid-template-columns: 1fr 1fr; } .titre { font-size: 17px; } } /* ===================================================================== LES GESTES DU TELEPHONE ===================================================================== */ /* ---------- La roue des heures ---------- */ /* Reference : le cadran de Twint parking. Elle ne remplace pas le champ, elle le pilote — le clavier continue de marcher, et sans JavaScript il ne reste que le champ, ce qui suffit. */ .roue-heures { position: relative; margin: 4px auto 10px; width: 200px; } .roue-heures .cadran { width: 200px; height: 200px; touch-action: none; cursor: grab; } .roue-heures .piste-roue { fill: none; stroke: var(--trait); stroke-width: 14; } .roue-heures .arc-roue { fill: none; stroke: var(--bleu); stroke-width: 14; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 100px 100px; transition: stroke-dashoffset .06s linear; } .roue-heures .poignee { fill: #fff; stroke: var(--bleu-fonce); stroke-width: 4; filter: drop-shadow(0 1px 3px rgba(30,58,95,.28)); } .roue-heures.vide .arc-roue { stroke: var(--trait); } .valeur-roue { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } .valeur-roue b { font-size: 38px; font-weight: 600; color: var(--nuit); letter-spacing: -1.5px; line-height: 1; font-variant-numeric: tabular-nums; } .valeur-roue span { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--discret); margin-top: 4px; } .raccourcis-heures { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-bottom: 8px; } .raccourcis-heures .bouton { padding: 8px 13px; } /* ---------- Comme hier ---------- */ .comme-hier { display: flex; align-items: center; gap: 12px; background: #eef5fc; border: 1px solid #cfe1f2; border-radius: var(--rayon); padding: 12px 15px; margin-bottom: 14px; } .comme-hier .texte { flex: 1; min-width: 0; } .comme-hier b { color: var(--nuit); display: block; } .comme-hier span { font-size: 12px; color: var(--bleu-fonce); } /* ---------- Le tri par glissement ---------- */ .zone-tri { max-width: 460px; margin: 0 auto; } .carte-a-trier { background: var(--panneau); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 18px; touch-action: none; cursor: grab; user-select: none; transition: box-shadow .12s, border-color .12s; } .carte-a-trier.vise { border-color: var(--bleu); box-shadow: 0 6px 22px rgba(30,58,95,.16); } .carte-a-trier .apercu { width: 100%; height: 190px; border-radius: var(--rayon-petit); background: #eef4fa; display: flex; align-items: center; justify-content: center; font-size: 42px; color: var(--bleu); margin-bottom: 12px; overflow: hidden; } .carte-a-trier .apercu img { width: 100%; height: 100%; object-fit: cover; } /* La carte sort de l'ecran dans la direction choisie : sans ce depart, le geste parait ne pas avoir ete pris. */ .carte-a-trier.partie-droite { transform: translateX(140%) rotate(18deg); opacity: 0; transition: all .13s; } .carte-a-trier.partie-gauche { transform: translateX(-140%) rotate(-18deg); opacity: 0; transition: all .13s; } .carte-a-trier.partie-haut { transform: translateY(-140%); opacity: 0; transition: all .13s; } .carte-a-trier.partie-bas { transform: translateY(140%); opacity: 0; transition: all .13s; } .cibles-tri { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; } .cibles-tri form { display: flex; } .cibles-tri button { width: 100%; text-align: left; display: flex; align-items: center; gap: 9px; background: var(--panneau); border: 1px solid var(--trait); border-radius: var(--rayon-petit); padding: 11px 12px; font-family: inherit; font-size: 13px; color: var(--texte); cursor: pointer; transition: border-color .12s, background .12s; } .cibles-tri button:hover, .cibles-tri button.vise { border-color: var(--bleu); background: #f4f9fd; } .cibles-tri button .fleche { font-size: 15px; color: var(--bleu-fonce); flex: none; width: 16px; text-align: center; } .cibles-tri button.attente .fleche { color: var(--surveiller); } .cibles-tri button b { display: block; font-weight: 600; color: var(--nuit); } .cibles-tri button small { color: var(--discret); font-size: 11px; } /* ---------- La file d'attente reseau ---------- */ .bandeau-attente { display: flex; align-items: center; gap: 10px; background: #fdf6e6; border: 1px solid #efdcae; border-radius: var(--rayon-petit); padding: 10px 14px; margin-bottom: 14px; font-size: 12px; color: #8a6a1e; } .bandeau-attente b { color: #6b520f; } @media (max-width: 760px) { .roue-heures, .roue-heures .cadran { width: 220px; } .roue-heures .cadran { height: 220px; } .cibles-tri button { padding: 13px 12px; } } /* ---------- La planche d'etiquettes ---------- */ .planche { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; } .etiquette { border: 1px dashed var(--trait); border-radius: var(--rayon-petit); padding: 10px; display: flex; gap: 10px; align-items: center; background: var(--panneau); break-inside: avoid; } .etiquette .qr { flex: none; width: 74px; height: 74px; } .etiquette .qr svg { width: 100%; height: 100%; display: block; } .etiquette .quoi { min-width: 0; } /* Un numero de serie est long et insecable par nature : sans ceci il pousse l etiquette, et l etiquette pousse la page. */ .etiquette .quoi b, .etiquette .quoi span { overflow-wrap: anywhere; } .etiquette .quoi b { display: block; font-size: 12px; color: var(--nuit); line-height: 1.25; } .etiquette .quoi span { font-size: 10px; color: var(--discret); line-height: 1.3; } /* A l'impression : la planche seule, sans le reste de l'ecran. Une etiquette coupee en deux par un saut de page est une etiquette perdue. */ @media print { .flanc, .barre-mobile, .voile, .entete, .messages, .sans-impression { display: none !important; } body { background: #fff; display: block; } .contenu { padding: 0; } .planche { grid-template-columns: repeat(3, 1fr); gap: 6px; } .etiquette { border-color: #bbb; } } /* ---------- La recherche globale ---------- */ /* Les resultats se rangent en colonnes qui se remplissent : un module qui trouve peu ne prend pas toute la largeur pour rien. */ .colonnes-recherche { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; } /* La barre dans le menu. Discrete, mais toujours au meme endroit. */ .flanc .chercher { padding: 0 14px 12px; } .flanc .chercher input { width: 100%; font-family: inherit; font-size: 13px; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: var(--rayon-petit); padding: 8px 10px; } .flanc .chercher input::placeholder { color: rgba(255,255,255,.4); } .flanc .chercher input:focus { outline: none; border-color: var(--bleu-clair); background: rgba(255,255,255,.16); } @media (max-width: 760px) { .colonnes-recherche { grid-template-columns: 1fr; } .flanc .chercher input { font-size: 16px; } } /* ---------- Le formulaire de decompte TVA ---------- */ /* Les numeros de rubrique sont ceux de l'AFC : un fiduciaire les lit sans avoir a chercher la correspondance. */ .formulaire-tva { width: 100%; border-collapse: collapse; } .formulaire-tva td { padding: 10px 16px; border-bottom: 1px solid var(--trait-fin); font-size: 13px; } .formulaire-tva .rang-num { width: 52px; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--discret); font-size: 11px; } .formulaire-tva .montant { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .formulaire-tva .sous-total td { border-top: 1px solid var(--trait); font-weight: 600; } .formulaire-tva .total-tva td { border-top: 2px solid var(--nuit); background: #f4f9fd; font-size: 15px; color: var(--nuit); } .formulaire-tva .total-tva .montant b { font-size: 17px; } /* ---------- Les familles du menu ---------- */ /* Seize entrees a la file se parcourent sans se lire. Le titre de famille est volontairement discret : il range, il ne parle pas. */ .flanc .famille { font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.32); padding: 14px 20px 5px; } .flanc .famille:first-of-type { padding-top: 8px; } @media (max-width: 760px) { .flanc .famille { padding: 16px 20px 6px; } } /* --- Le rangement du menu, dans les reglages -------------------------- */ /* Cinq familles et seize modules faisaient defiler trois ecrans. Les gestes sont les memes ; ils tiennent sur un. */ .carte-menu { padding-bottom: 0; } .famille-reglage { border-bottom: 1px solid var(--trait-fin); padding: 7px 12px 9px; } .famille-reglage:last-of-type { border-bottom: none; } .tete-famille { display: flex; align-items: center; gap: 3px; } .tete-famille .nommer { display: flex; align-items: center; flex: 1; min-width: 0; gap: 2px; } .tete-famille form { display: inline-flex; } .tete-famille input { flex: 1; min-width: 0; font-weight: 600; color: var(--nuit); border: 1px solid transparent; background: transparent; padding: 3px 6px; border-radius: var(--rayon-petit); font-size: 14px; } .tete-famille input:hover { border-color: var(--trait); } .tete-famille input:focus { border-color: var(--bleu); background: var(--panneau); outline: none; } .tete-famille .bouton.fantome { padding: 3px 7px; font-size: 12px; } .sans-famille { color: var(--nuit); font-size: 14px; padding: 3px 6px; } .rang-module { display: flex; align-items: center; gap: 5px; padding: 3px 6px 3px 10px; border-radius: var(--rayon-petit); font-size: 13px; } .rang-module:hover { background: var(--fond); } .rang-module form { display: inline-flex; } .rang-module .bouton.fantome { padding: 2px 7px; font-size: 12px; line-height: 1.4; } .rang-module select { border: 1px solid var(--trait); border-radius: var(--rayon-petit); padding: 2px 5px; font-size: 12px; color: var(--texte); background: var(--panneau); max-width: 130px; } .rang-module.vide-famille { padding-left: 10px; } .rang-module.vide-famille:hover { background: transparent; } .signe-module { width: 16px; text-align: center; color: var(--bleu-fonce); } .nom-module { flex: 1; min-width: 0; color: var(--nuit); } .rang-module.module-ferme .nom-module { color: var(--discret); } .ajouter-famille { display: flex; gap: 8px; padding: 11px 12px; border-top: 1px solid var(--trait); background: var(--fond); border-radius: 0 0 var(--rayon) var(--rayon); } .ajouter-famille input { flex: 1; min-width: 0; border: 1px solid var(--trait); border-radius: var(--rayon-petit); padding: 6px 9px; font-size: 13px; } /* Au doigt, les fleches doivent rester atteignables sans viser. Elles sont voisines et opposees : viser a cote, c'est deplacer dans l'autre sens. */ @media (max-width: 700px) { .rang-module { flex-wrap: wrap; padding: 5px 6px; } .rang-module .bouton.fantome, .tete-famille .bouton.fantome { min-width: 44px; min-height: 38px; } .rang-module select { max-width: none; flex: 1; min-height: 38px; } .nom-module { flex: 1 0 100%; } } /* --- Un module pas encore ouvert -------------------------------------- */ /* Il reste a sa place, dans sa famille : le client voit ce qui vient. Mais il ne se clique pas, et le mot « bientot » dit pourquoi — le gris seul se lit comme une panne. */ /* Mesure faite : le gris du texte courant tombait a 2,26 contre le fond du menu. Or ces entrees sont faites pour etre lues — c'est en les lisant que le client apprend ce qui arrive. 4,5 les rend lisibles, et les 11,5 des entrees ouvertes gardent l'ecart bien visible. */ .flanc .entree.ferme { color: #8fa4bb; cursor: default; } .flanc .entree.ferme:hover { background: transparent; } .flanc .entree.ferme .signe { opacity: .75; } /* Le titre du bas porte l'information une fois pour toutes : inutile de la repeter sur chacune des seize lignes. */ .flanc .famille.chantier { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); } /* Et dans les reglages, la meme information, en lecture seule : le client n'a pas a decider ce qui est fini. */ .marque-chantier { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: #8a6d24; background: #fdf5e3; border: 1px solid #e8d4a0; border-radius: 999px; padding: 2px 8px; white-space: nowrap; } /* Le bandeau d'un module encore en chantier. Pas rouge : ce n'est pas une erreur, c'est un avertissement. Le rouge use vite. */ .bandeau-chantier { background: #fdf5e3; border: 1px solid #e8d4a0; border-left: 4px solid var(--surveiller); border-radius: var(--rayon); padding: 12px 16px; margin-bottom: 14px; color: #6b5420; font-size: 14px; line-height: 1.5; } .bandeau-chantier b { color: #55420f; } /* Le bandeau de la demonstration. Bleu, parce que c'est une information sans jugement (D31) : rien ne va mal, rien n'attend d'action. Il colle en haut du contenu pour rester lisible dans une longue page — un visiteur qui a descendu trois ecrans doit toujours savoir qu'il est dans une demonstration, et pouvoir la reprendre a zero. */ .bandeau-demo { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #fdf3cf; border: 1px solid #ecd9a0; border-left: 4px solid var(--surveiller); border-radius: var(--rayon); padding: 12px 16px; margin-bottom: 14px; color: #5a4a1e; font-size: 14px; line-height: 1.5; } .bandeau-demo span { flex: 1; min-width: 240px; } .bandeau-demo b { color: #4a3c12; } .bandeau-demo form { flex: none; margin: 0; } .bandeau-demo button { font-family: inherit; font-size: 13px; font-weight: 500; color: #6b5420; background: #fff; border: 1px solid #e0c67e; border-radius: var(--rayon-petit); padding: 7px 14px; cursor: pointer; white-space: nowrap; } .bandeau-demo button:hover { background: var(--surveiller); border-color: var(--surveiller); color: #fff; } .rang-module.module-ferme .nom-module { color: var(--discret); } /* --- L'aide qu'on ouvre, jamais celle qu'on subit --------------------- */ /* Les explications longues encombraient les ecrans : utiles une fois, relues cent fois pour rien. Elles vivent derriere un « i » discret. */ .aide { position: relative; display: inline-flex; vertical-align: middle; } .aide-declencheur { width: 18px; height: 18px; padding: 0; margin-left: 6px; border: 1px solid var(--trait); border-radius: 50%; background: var(--panneau); color: var(--discret); font: 600 11px/1 Georgia, "Times New Roman", serif; cursor: pointer; flex: none; display: inline-flex; align-items: center; justify-content: center; transition: color .12s, border-color .12s, background .12s; } .aide-declencheur:hover, .aide-declencheur[aria-expanded="true"] { color: var(--bleu-fonce); border-color: var(--bleu-clair); background: var(--fond); } .aide-declencheur:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; } .bulle { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: max-content; max-width: min(340px, calc(100vw - 28px)); background: var(--panneau); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: 0 10px 28px rgba(30, 58, 95, .16); padding: 12px 14px; font-size: 13px; line-height: 1.55; color: var(--texte); text-align: left; white-space: normal; cursor: auto; } .bulle[hidden] { display: none; } .bulle-titre { display: block; color: var(--nuit); margin-bottom: 5px; font-size: 13px; } .bulle-corps { display: block; } .bulle-corps p { margin: 0 0 8px; } .bulle-corps p:last-child { margin-bottom: 0; } .bulle-corps b { color: var(--nuit); } .bulle-corps a { color: var(--bleu-fonce); } .bulle-corps ul { margin: 0; padding-left: 18px; } .bulle-corps li { margin-bottom: 5px; } .bulle-corps li:last-child { margin-bottom: 0; } /* Une petite fleche vers le « i », pour qu'on voie d'ou la bulle sort. */ .bulle::before { content: ""; position: absolute; top: -5px; left: 12px; width: 8px; height: 8px; background: var(--panneau); border-left: 1px solid var(--trait); border-top: 1px solid var(--trait); transform: rotate(45deg); } /* Sur le fond sombre du menu, le « i » s'inverse. */ .flanc .aide-declencheur { background: transparent; border-color: rgba(255,255,255,.28); color: #b3c3d6; } .flanc .aide-declencheur:hover, .flanc .aide-declencheur[aria-expanded="true"] { background: rgba(255,255,255,.1); border-color: #b3c3d6; color: #fff; } /* --- Une rangee de reglage --------------------------------------------- */ /* Le lien s'etend a toute la rangee par un pseudo-element, plutot que d'envelopper le contenu : un