/* Le clair reste la reference : c'est lui qu'on imprime, et ce que le cabinet comptable verra s'il choisit ce reglage. */ :root{ --ground:#f7f8f9; --panel:#fff; --ink:#161a1d; --ink-2:#4a545c; --ink-3:#666f78; --rule:#dde2e6; --rule-strong:#c3cbd2; --accent:#1f3a5f; --accent-soft:#dfe6ef; --bon:#2f6b46; --bon-soft:#dcebe1; --alerte:#8a6212; --alerte-soft:#f4e9cf; --danger:#8c2f2a; --danger-soft:#f3dedc; --gris:#7d8892; --gris-soft:#e7eaed; --sur-plein:#fff; } /* Sombre par defaut : c'est l'affichage retenu, on n'attend pas que Windows le dise. `systeme` rend la main au reglage du poste, `clair` force le clair. */ :root, :root[data-theme="sombre"]{ --ground:#14181c; --panel:#1b2026; --ink:#dfe5eb; --ink-2:#a4aeb7; --ink-3:#8d97a0; --rule:#2c343c; --rule-strong:#3d4750; --accent:#9db9dd; --accent-soft:#22303f; --bon:#77c393; --bon-soft:#1d2f25; --alerte:#dcb45f; --alerte-soft:#332a17; --danger:#e08a83; --danger-soft:#33211f; --gris:#8b959e; --gris-soft:#242b32; --sur-plein:#14181c; } :root[data-theme="clair"]{ --ground:#f7f8f9; --panel:#fff; --ink:#161a1d; --ink-2:#4a545c; --ink-3:#666f78; --rule:#dde2e6; --rule-strong:#c3cbd2; --accent:#1f3a5f; --accent-soft:#dfe6ef; --bon:#2f6b46; --bon-soft:#dcebe1; --alerte:#8a6212; --alerte-soft:#f4e9cf; --danger:#8c2f2a; --danger-soft:#f3dedc; --gris:#7d8892; --gris-soft:#e7eaed; --sur-plein:#fff; } :root[data-theme="systeme"]{ --ground:#f7f8f9; --panel:#fff; --ink:#161a1d; --ink-2:#4a545c; --ink-3:#666f78; --rule:#dde2e6; --rule-strong:#c3cbd2; --accent:#1f3a5f; --accent-soft:#dfe6ef; --bon:#2f6b46; --bon-soft:#dcebe1; --alerte:#8a6212; --alerte-soft:#f4e9cf; --danger:#8c2f2a; --danger-soft:#f3dedc; --gris:#7d8892; --gris-soft:#e7eaed; --sur-plein:#fff; } @media (prefers-color-scheme: dark){ :root[data-theme="systeme"]{ --ground:#14181c; --panel:#1b2026; --ink:#dfe5eb; --ink-2:#a4aeb7; --ink-3:#8d97a0; --rule:#2c343c; --rule-strong:#3d4750; --accent:#9db9dd; --accent-soft:#22303f; --bon:#77c393; --bon-soft:#1d2f25; --alerte:#dcb45f; --alerte-soft:#332a17; --danger:#e08a83; --danger-soft:#33211f; --gris:#8b959e; --gris-soft:#242b32; --sur-plein:#14181c; } } /* A l'impression, toujours du noir sur blanc : les releves partent au cabinet. */ @media print{ :root{ --ground:#fff; --panel:#fff; --ink:#000; --ink-2:#333; --ink-3:#555; --rule:#bbb; --rule-strong:#888; --accent:#1f3a5f; --accent-soft:#eef2f7; --bon:#2f6b46; --bon-soft:#fff; --alerte:#8a6212; --alerte-soft:#fff; --danger:#8c2f2a; --danger-soft:#fff; --gris:#555; --gris-soft:#fff; } } *{box-sizing:border-box} /* La taille de base est portee par : les `rem` s'y referent, donc tout suit. Posee sur , elle laisserait les tableaux et les libelles a leur ancienne taille. */ html{font-size:17px} html[data-taille="grand"]{font-size:19px} html[data-taille="tres-grand"]{font-size:21px} body{margin:0;background:var(--ground);color:var(--ink); font-family:"Zen Kaku Gothic New","Segoe UI",system-ui,sans-serif;font-size:1rem; line-height:1.55} a{color:var(--accent)} .num{font-variant-numeric:tabular-nums;font-family:ui-monospace,"Consolas",monospace} header.top{background:var(--panel);border-bottom:1px solid var(--rule-strong); padding:0 24px;display:flex;align-items:center;gap:28px;flex-wrap:wrap} header.top .marque{font-weight:700;letter-spacing:.02em;padding:14px 0;white-space:nowrap} header.top .marque small{display:block;font-size:0.82rem;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-3);font-weight:600} nav{display:flex;gap:2px;flex-wrap:wrap;flex:1} /* Menu en six groupes. Le survol suffit a la souris ; la classe `deplie`, posee au clic, sert au tactile et au clavier — sans elle le menu serait inutilisable sur telephone, ou il n'y a pas de survol. */ nav .groupe{position:relative} nav .groupe-titre{background:none;border:0;font:inherit;font-size:.88rem;cursor:pointer; padding:16px 12px;color:var(--ink-2);border-bottom:2px solid transparent; white-space:nowrap} nav .groupe-titre:hover{color:var(--ink)} nav .groupe.actif > .groupe-titre{color:var(--ink);border-bottom-color:var(--accent); font-weight:600} nav .sous-menu{display:none;position:absolute;top:100%;left:0;z-index:40;min-width:210px; background:var(--panel);border:1px solid var(--rule-strong);border-radius:3px; padding:5px 0;box-shadow:0 6px 18px rgba(0,0,0,.22)} nav .groupe:hover .sous-menu, nav .groupe.deplie .sous-menu{display:block} nav .sous-menu a{display:flex;justify-content:space-between;align-items:center;gap:10px; padding:9px 14px;text-decoration:none;color:var(--ink-2);font-size:.88rem; white-space:nowrap} nav .sous-menu a:hover{color:var(--ink);background:var(--accent-soft)} nav .sous-menu a.actif{color:var(--ink);font-weight:600; border-left:2px solid var(--accent);padding-left:12px} /* Sur telephone, un menu flottant n'a pas de place : les groupes se deroulent dans le flux, les uns sous les autres. */ @media (max-width:700px){ nav{width:100%} nav .groupe{width:100%} nav .groupe-titre{width:100%;text-align:left;padding:11px 0} nav .sous-menu{position:static;border:0;box-shadow:none;padding:0 0 8px 14px; background:none;min-width:0} } /* La pastille vit maintenant sur un titre de groupe autant que sur un lien : la regle ne peut plus etre attachee a `nav a`. */ .pastille{background:var(--danger);color:var(--sur-plein);border-radius:9px;padding:0 6px; font-size:0.82rem;margin-left:5px} .identite{font-size:0.82rem;color:var(--ink-3);text-align:right;padding:10px 0} .identite a{color:var(--ink-3)} main{max-width:1240px;margin:0 auto;padding:28px 24px 64px} h1{font-size:1.45rem;margin:0 0 4px} h2{font-size:1.02rem;margin:0 0 12px} .sous{color:var(--ink-2);margin:0 0 24px;font-size:.9rem} .grid{display:grid;gap:14px;margin-bottom:24px} .g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} @media (max-width:900px){.g4,.g3,.g2{grid-template-columns:repeat(2,1fr)}} @media (max-width:600px){.g4,.g3,.g2{grid-template-columns:1fr}} .carte{background:var(--panel);border:1px solid var(--rule);border-left:3px solid var(--rule-strong); border-radius:3px;padding:14px 16px} .carte.bon{border-left-color:var(--bon)}.carte.alerte{border-left-color:var(--alerte)} .carte.danger{border-left-color:var(--danger)} .carte .lab{font-size:0.82rem;color:var(--ink-2)} .carte .val{font-size:1.5rem;font-weight:500;display:block;margin-top:4px} .carte .sub{font-size:0.82rem;color:var(--ink-3);margin-top:4px} .bloc{background:var(--panel);border:1px solid var(--rule);border-radius:3px; padding:18px 20px;margin-bottom:22px} table{width:100%;border-collapse:collapse;font-size:.85rem} .scroll{overflow-x:auto} th{text-align:left;font-size:0.82rem;letter-spacing:.07em;text-transform:uppercase; color:var(--ink-3);border-bottom:1px solid var(--rule-strong);padding:0 10px 7px 0; white-space:nowrap} td{padding:7px 10px 7px 0;border-bottom:1px solid var(--rule);vertical-align:middle} td.r,th.r{text-align:right} tr:last-child td{border-bottom:none} .puce{display:inline-block;font-size:0.82rem;font-weight:600;letter-spacing:.05em; text-transform:uppercase;padding:2px 7px;border-radius:2px;white-space:nowrap} .p-bon{background:var(--bon-soft);color:var(--bon)} .p-alerte{background:var(--alerte-soft);color:var(--alerte)} .p-danger{background:var(--danger-soft);color:var(--danger)} .p-gris{background:var(--gris-soft);color:var(--gris)} form.ligne{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end} label{display:block;font-size:0.82rem;color:var(--ink-2);margin-bottom:3px} input,select,textarea{font:inherit;font-size:.87rem;padding:7px 9px;border:1px solid var(--rule-strong); border-radius:2px;background:var(--panel);color:var(--ink);min-width:120px} input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px} button{font:inherit;font-size:.87rem;font-weight:600;padding:8px 16px;border:1px solid var(--accent); background:var(--accent);color:var(--sur-plein);border-radius:2px;cursor:pointer} button.discret{background:transparent;color:var(--accent);border-color:var(--rule-strong)} button:hover{opacity:.9} .message{padding:11px 15px;border-radius:2px;margin-bottom:16px;font-size:.88rem; border-left:3px solid} .m-bon{background:var(--bon-soft);border-color:var(--bon);color:var(--bon)} .m-alerte{background:var(--alerte-soft);border-color:var(--alerte);color:var(--alerte)} .m-danger{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)} .connexion{max-width:360px;margin:12vh auto;background:var(--panel);border:1px solid var(--rule); border-radius:3px;padding:30px} .connexion h1{font-size:1.2rem} .connexion input{width:100%;margin-bottom:14px} .connexion button{width:100%} .note{font-size:0.82rem;color:var(--ink-3);margin-top:14px} .onglets{display:flex;gap:2px;margin-bottom:18px;border-bottom:1px solid var(--rule-strong)} .onglets a{padding:9px 16px;text-decoration:none;color:var(--ink-2);font-size:.88rem; border:1px solid transparent;border-bottom:none;border-radius:3px 3px 0 0;margin-bottom:-1px} .onglets a.actif{background:var(--panel);border-color:var(--rule-strong);color:var(--ink); font-weight:600;border-bottom:1px solid var(--panel)} .saisie-ligne{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end; padding:12px;background:var(--accent-soft);border-radius:3px;margin-bottom:12px} .saisie-ligne > div{display:flex;flex-direction:column} .saisie-ligne .large{flex:1;min-width:200px} .saisie-ligne .large input,.saisie-ligne .large select{width:100%} .saisie-ligne input,.saisie-ligne select{min-width:0} .saisie-ligne label{white-space:nowrap} .saisie-ligne button{height:35px} table.recap{margin-top:18px} table.recap th{font-size:0.82rem} table.recap td{padding:5px 10px 5px 0;font-size:0.82rem} .reglages{padding:10px 12px;background:var(--gris-soft);border-radius:3px;margin-top:10px; align-items:center} .titre-reglage{font-size:0.82rem;color:var(--ink-2)} textarea{min-width:0} .entete-grille{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between} .reglages-grille{display:flex;gap:14px;flex-wrap:wrap;align-items:center} .reglages-grille label{display:flex;align-items:center;gap:6px;font-size:0.82rem;color:var(--ink-2); margin:0;white-space:nowrap} .reglages-grille input,.reglages-grille select{min-width:0} table.grille{border-collapse:separate;border-spacing:0;font-size:.85rem; border:1px solid var(--rule-strong);border-radius:3px;overflow:hidden} table.grille th{background:var(--gris-soft);padding:7px 8px; border-bottom:1px solid var(--rule-strong);border-right:1px solid var(--rule);font-size:0.82rem} table.grille td{padding:0;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule)} table.grille td:last-child,table.grille th:last-child{border-right:none} table.grille tr:last-child td{border-bottom:none} table.grille td.rang{text-align:center;color:var(--ink-3);font-size:0.82rem; background:var(--gris-soft);font-variant-numeric:tabular-nums;padding:0 4px} table.grille input,table.grille select{border:none;border-radius:0;width:100%;padding:6px 8px; background:transparent;color:var(--ink);font-size:.85rem} table.grille input:focus,table.grille select:focus{outline:2px solid var(--accent); outline-offset:-2px;background:var(--panel)} table.grille input.droite{text-align:right;font-variant-numeric:tabular-nums} .barre-grille{display:flex;gap:14px;align-items:center;margin-top:14px} .barre-grille .note{flex:1} table.grille input.auto-rempli{background:var(--gris-soft);color:var(--ink-2);cursor:default} table.grille th .auto{font-size:0.82rem;letter-spacing:.06em;color:var(--ink-3); border:1px solid var(--rule-strong);border-radius:2px;padding:0 3px;margin-left:4px} .barres{display:flex;align-items:flex-end;gap:3px;height:140px;padding:10px 0; border-bottom:1px solid var(--rule-strong)} .barre{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end; height:100%;min-width:14px} .barre .tige{width:100%;background:var(--accent);border-radius:2px 2px 0 0;min-height:2px; transition:opacity .15s} .barre .tige:hover{opacity:.75} .barre .jour{font-size:0.82rem;color:var(--ink-3);margin-top:4px; font-variant-numeric:tabular-nums} /* choix de langue : discret, dans l'en-tete et sous le formulaire de connexion */ .langues{display:inline-block;letter-spacing:.02em} .langues a{color:var(--ink-3);text-decoration:none;opacity:.65} .langues a:hover{opacity:1;text-decoration:underline} .langues a.actif{opacity:1;font-weight:600;text-decoration:none} .langues-connexion{margin-top:18px;text-align:center;font-size:0.82rem} /* questionnaire de projet : une question par bloc, aeree, sans decoration */ .question{margin:0 0 20px;max-width:820px} .question label{display:block;font-weight:600;margin-bottom:4px;line-height:1.45} .question .aide{display:block;font-size:0.82rem;color:var(--ink-3);margin-bottom:6px} .question .horodate{margin-top:4px;margin-bottom:0;font-style:italic} .question textarea{width:100%;font:inherit;font-size:.9rem;line-height:1.5;padding:8px 10px; border:1px solid var(--bord);border-radius:4px;background:var(--fond-2);color:var(--ink); resize:vertical} .question textarea:focus{outline:none;border-color:var(--accent)} .sommaire{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px} .sommaire a{font-size:.82rem;color:var(--ink-2);text-decoration:none;padding:4px 10px; border:1px solid var(--bord);border-radius:3px} .sommaire a:hover{border-color:var(--accent);color:var(--ink)} /* graphiques : SVG etire en largeur, texte en HTML pour rester lisible et traduisible */ .graph{margin:0 0 6px} .graph-svg{width:100%;height:170px;display:block} .graph-barre{fill:var(--accent);opacity:.85} .graph-barre.bon{fill:var(--bon)} .graph-barre.danger{fill:var(--danger);opacity:.55} .graph-barre:hover{opacity:1} .graph-seuil{stroke:var(--alerte);stroke-width:.8;stroke-dasharray:2 2;vector-effect:non-scaling-stroke} .graph-legende{display:flex;margin-top:2px} .graph-legende span{flex:1;text-align:center;font-size:0.82rem;color:var(--ink-3);line-height:1.35} .graph-legende b{display:block;font-size:.82rem;color:var(--ink-2);font-weight:600} .graph-note{font-size:0.82rem;color:var(--ink-3);margin:6px 0 0} .grid.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px} .bloc h3{font-size:.85rem;font-weight:600;color:var(--ink-2);margin:0 0 8px} /* series d'un graphique empile : une pastille de couleur par serie */ .graph-series{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px} .graph-series .serie{font-size:0.82rem;color:var(--ink-3);display:inline-flex;align-items:center} .graph-series .serie::before{content:"";width:9px;height:9px;border-radius:2px;margin-right:5px} .graph-barre.serie-a{fill:var(--accent)} .graph-series .serie-a::before{background:var(--accent)} .graph-barre.serie-b{fill:var(--bon)} .graph-series .serie-b::before{background:var(--bon)} .graph-barre.serie-c{fill:var(--alerte)} .graph-series .serie-c::before{background:var(--alerte)} .graph-barre.serie-d{fill:var(--ink-3)} .graph-series .serie-d::before{background:var(--ink-3)} /* rappel permanent, plus visible qu'une note : c'est une obligation, pas un conseil */ .rappel{border-left:3px solid var(--alerte);background:var(--fond-2);padding:12px 16px; margin:0 0 22px;font-size:.85rem;line-height:1.55;color:var(--ink-2)} .rappel b{color:var(--ink)} /* champ libre du classement : sous le menu, pour repondre quand aucune case ne convient */ input.expl{display:block;margin-top:5px;width:100%;min-width:210px;font:inherit; font-size:0.82rem;padding:5px 8px;border:1px solid var(--bord);border-radius:3px; background:var(--fond-2);color:var(--ink)} input.expl:focus{outline:none;border-color:var(--accent)} .graph-zero{stroke:var(--ink-3);stroke-width:.6;opacity:.5;vector-effect:non-scaling-stroke} .theme{background:none;border:0;padding:0;font:inherit;font-size:0.82rem; color:var(--ink-3);cursor:pointer;text-decoration:underline;text-underline-offset:2px} .theme:hover{color:var(--ink-2)} /* Messages : le fil se lit de haut en bas, les siens marques d'un liseré. */ .message{padding:10px 0;border-bottom:1px solid var(--rule)} .message:last-of-type{border-bottom:0} .message.moi{border-left:2px solid var(--accent);padding-left:12px} .message .texte{margin-top:3px;white-space:pre-wrap} .gris{color:var(--ink-3)} /* Planning : sept colonnes de largeur egale, le jour courant marque. */ table.semaine{table-layout:fixed} table.semaine th{text-align:center;padding-bottom:8px} table.semaine th.jour-actuel{color:var(--ink);border-bottom:2px solid var(--accent)} td.case-jour{vertical-align:top;padding:6px;border-left:1px solid var(--rule); min-width:130px} td.case-jour.jour-actuel{background:var(--accent-soft)} .shift,.rdv{border-left:3px solid var(--rule-strong);padding:5px 8px;margin-bottom:6px; border-radius:2px;background:var(--ground)} .shift{border-left-color:var(--bon)} .rdv{border-left-color:var(--accent)} /* Une ligne annulee reste affichee — elle explique souvent pourquoi le stock est la — mais elle ne doit pas se lire comme un prix paye. */ tr.annule td{opacity:.55;text-decoration:line-through} tr.annule td:last-child{text-decoration:none} a.bouton{display:inline-block;background:var(--accent);color:var(--sur-plein); padding:9px 16px;border-radius:2px;text-decoration:none;font-size:0.88rem} /* La ligne « non ventile » n'est pas une activite : elle mesure ce qui reste a faire. */ tr.non-ventile td{color:var(--ink-3);font-style:italic} /* Les droits, une case par module. Deux colonnes suffisent a garder chaque intitule lisible : une grille plus dense obligerait a couper les explications, qui sont justement ce qui permet de cocher sans se tromper. */ .cases{display:grid; gap:10px 22px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .case{display:flex; gap:9px; align-items:flex-start; line-height:1.35} .case input{margin-top:3px; flex:none}