/* =================================================================== Nodus 3 — feuille de style Les variables du theme (--sb-*, --acc*) sont injectees par PHP dans le a partir des deux couleurs choisies par l utilisateur. Ne pas les redefinir ici : seules les valeurs de repli le sont. =================================================================== */ :root{ --f-ui:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --f-num:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --bg:#F3F2F0; --surface:#FFFFFF; --line:#E4E2DF; --line-2:#CFCCC8; --ink:#1B1A1C; --ink-2:#57545A; --ink-3:#8C878E; --ok:#3F6B54; --ok-t:#E9F1EC; --warn:#B26A1F; --warn-t:#FAF0E2; --stop:#9E332C; --stop-t:#F8E8E6; --sb-w:250px; /* replis si le theme n est pas injecte */ --sb-bg:#141310; --sb-fg:#F2EFE8; --sb-dim:#9C978B; --sb-hov:#211F1A; --sb-line:#2B2822; --sb-on-bg:#2A261C; --sb-on-fg:#E8C877; --sb-mark:#B8944A; --sb-badge:#B8944A; --sb-badge-fg:#141310; --acc:#8A6D18; --acc-2:#6E5613; --acc-tint:#F7F1DF; } *{box-sizing:border-box} html,body{margin:0} body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} button,input,select,textarea{font-family:inherit} button{cursor:pointer} :focus-visible{outline:2px solid var(--acc);outline-offset:2px} .muted{color:var(--ink-3)} .mono{font-family:var(--f-num);font-variant-numeric:tabular-nums} /* ---------------- sidebar ---------------- */ .sb{position:fixed;inset:0 auto 0 0;width:var(--sb-w);background:var(--sb-bg);color:var(--sb-fg); display:flex;flex-direction:column;z-index:40;border-right:1px solid var(--sb-line)} .sb-h{padding:16px 16px 14px;border-bottom:1px solid var(--sb-line)} .brand{display:block;text-align:center} .brand img{width:100%;max-width:186px;height:auto;display:block;margin:0 auto} .brand span{display:block;font-size:10px;letter-spacing:.34em;text-transform:uppercase; color:var(--sb-dim);font-weight:700;margin-top:9px;padding-left:.34em} .sb-n{flex:1;overflow-y:auto;padding:8px} .sec{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--sb-dim); padding:15px 10px 6px;font-weight:700} .sb-n .sec:first-child{padding-top:4px} .it{display:block;padding:8px 10px;border-radius:8px;font-size:13px;font-weight:500; color:var(--sb-fg);opacity:.82;position:relative;margin-bottom:1px} .it:hover{background:var(--sb-hov);opacity:1} .it.on{background:var(--sb-on-bg);color:var(--sb-on-fg);opacity:1;font-weight:700} .it.on::before{content:"";position:absolute;left:-8px;top:7px;bottom:7px;width:3px; border-radius:0 3px 3px 0;background:var(--sb-mark)} .sb-f{border-top:1px solid var(--sb-line);padding:11px 14px;display:flex;align-items:center;gap:10px} .av{width:32px;height:32px;border-radius:50%;background:var(--sb-badge);color:var(--sb-badge-fg); display:grid;place-items:center;font-weight:700;font-size:11px;flex:none} .who{font-size:12.5px;font-weight:600} .who span{display:block;font-size:11px;color:var(--sb-dim);font-weight:400;margin-top:1px} .who a{color:var(--sb-dim)} .who a:hover{color:var(--sb-fg)} /* ---------------- shell ---------------- */ .main{margin-left:var(--sb-w)} .top{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30; display:flex;align-items:center;gap:12px;padding:12px 22px} .top h1{font-size:20px;font-weight:700;margin:0;letter-spacing:-.01em} .top .sub{font-size:12px;color:var(--ink-3);margin-top:1px} .tr{margin-left:auto;display:flex;gap:8px;align-items:center} .mt{display:none;width:34px;height:34px;border:1px solid var(--line-2);background:var(--surface); border-radius:8px;font-size:16px;line-height:1} .wrap{padding:20px 22px 60px;max-width:1400px} /* ---------------- composants ---------------- */ .btn{display:inline-block;border:1px solid var(--line-2);background:var(--surface);border-radius:8px; padding:8px 13px;font-size:13px;font-weight:600;color:var(--ink)} .btn:hover{border-color:var(--ink-3)} .btn-p{background:var(--acc);border-color:var(--acc);color:#fff} .btn-p:hover{background:var(--acc-2);border-color:var(--acc-2)} .btn-d{color:var(--stop);border-color:#E8C4C0} .btn-d:hover{background:var(--stop-t);border-color:var(--stop)} .btn-s{padding:5px 10px;font-size:12px} .card{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:16px} .ch{padding:13px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px} .ch h2{margin:0;font-size:13.5px;font-weight:700} .ch .m{margin-left:auto;font-size:11px;color:var(--ink-3);font-weight:500} .cb{padding:16px} .g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;align-items:start} table{width:100%;border-collapse:collapse} th{text-align:left;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3); font-weight:700;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap} td{padding:11px 14px;border-bottom:1px solid var(--line);font-size:13.2px} tbody tr:last-child td{border-bottom:0} tbody tr:hover{background:#FBFBFA} .tag{display:inline-block;padding:3px 9px;border-radius:5px;font-size:11px;font-weight:700;white-space:nowrap} .t-ok{background:var(--ok-t);color:var(--ok)} .t-wa{background:var(--warn-t);color:var(--warn)} .t-st{background:var(--stop-t);color:var(--stop)} .t-nu{background:var(--bg);color:var(--ink-2)} .t-ac{background:var(--acc-tint);color:var(--acc)} .alert{padding:12px 15px;border-radius:8px;font-size:13.5px;margin-bottom:16px;font-weight:500} .alert-ok{background:var(--ok-t);color:var(--ok);border:1px solid #A8D8BC} .alert-err{background:var(--stop-t);color:var(--stop);border:1px solid #F0C0BA} .alert-info{background:var(--acc-tint);color:var(--acc);border:1px solid var(--acc)} .fg{margin-bottom:16px} .fg label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px} .fg .hint{font-size:12px;color:var(--ink-3);margin-top:5px} .in{width:100%;height:44px;border:1.5px solid var(--line-2);border-radius:8px;padding:0 12px; font-size:14px;background:var(--surface);color:var(--ink);outline:none} .in:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-tint)} select.in{padding:0 8px} textarea.in{height:auto;padding:10px 12px;resize:vertical} /* ---------------- page de connexion ---------------- */ .login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:var(--bg)} .login-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--line); border-radius:12px;padding:36px 32px 32px} .login-head{text-align:center;margin-bottom:28px} .login-logo{display:block;width:100%;max-width:250px;height:auto;margin:0 auto 18px} .login-head h1{font-size:15px;font-weight:700;letter-spacing:.3em;text-transform:uppercase; margin:0 0 6px;padding-left:.3em;color:var(--ink-2)} .login-rule{width:28px;height:2px;background:var(--sb-mark);margin:10px auto} .login-head p{font-size:12.5px;color:var(--ink-3);margin:0} .login-foot{text-align:center;margin-top:18px;font-size:11.5px;color:var(--ink-3)} /* ---------------- theme : selecteur de couleurs ---------------- */ .pick{display:flex;align-items:center;gap:9px} .pick input[type=color]{width:46px;height:44px;padding:0;border:1px solid var(--line-2);border-radius:8px;background:none} .swatches{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px} .sw{border:1px solid var(--line-2);background:var(--surface);border-radius:20px; padding:4px 11px 4px 5px;font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:6px} .sw b{width:14px;height:14px;border-radius:50%;display:block;border:1px solid rgba(0,0,0,.14)} .sw:hover{border-color:var(--ink-3)} .preview{border:1px solid var(--line);border-radius:10px;overflow:hidden} .preview .ph{background:var(--sb-bg);color:var(--sb-fg);padding:11px 13px;font-size:12.5px;font-weight:700} .preview .pi{padding:8px 13px;background:var(--sb-bg);color:var(--sb-fg);opacity:.82;font-size:12.5px} .preview .pi.on{background:var(--sb-on-bg);color:var(--sb-on-fg);opacity:1;font-weight:700} .preview .pf{padding:12px 13px;background:var(--surface);display:flex;gap:8px;align-items:center} .cr{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:12.5px} .cr .ic{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;flex:none; font-size:11px;font-weight:700;color:#fff} .cr .ic.y{background:var(--ok)} .cr .ic.n{background:var(--stop)} .cr .rt{margin-left:auto;font-family:var(--f-num);font-size:11.5px;color:var(--ink-3)} /* ---------------- responsive ---------------- */ @media(max-width:860px){ .sb{transform:translateX(-100%);transition:transform .22s;box-shadow:0 0 40px rgba(0,0,0,.2)} .sb.open{transform:none} .main{margin-left:0} .mt{display:grid;place-items:center} .top{padding:10px 14px} .wrap{padding:15px 14px 60px} .scroll{overflow-x:auto} .scroll table{min-width:680px} .in{font-size:16px} /* bloque le zoom automatique iOS */ } @media(prefers-reduced-motion:reduce){*{transition:none!important}} /* ---------------- selecteur de langue ---------------- */ .lang{position:relative} .lang-menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface); border:1px solid var(--line-2);border-radius:10px;padding:5px;min-width:160px; box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:60} .lang-item{display:block;width:100%;text-align:left;border:0;background:none;padding:7px 10px; border-radius:7px;font-size:13px;color:var(--ink)} .lang-item:hover{background:var(--bg)} .lang-item.on{background:var(--acc-tint);color:var(--acc);font-weight:700} /* Le widget Google Translate insere une barre en haut de page et decale le corps : on neutralise les deux, le selecteur suffit. */ .goog-te-banner-frame,.skiptranslate{display:none!important} body{top:0!important} #gt-host{display:none} font[style]{background:none!important;box-shadow:none!important} /* ---------------- sous-onglets ---------------- */ .subtabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto} .stab{padding:9px 15px;font-size:13.5px;font-weight:600;color:var(--ink-2); border-bottom:2px solid transparent;white-space:nowrap} .stab:hover{color:var(--ink)} .stab.on{color:var(--acc);border-bottom-color:var(--acc)} /* ---------------- lignes cliquables ---------------- */ .rows tbody tr.ligne{cursor:pointer} .rows tbody tr.ligne:hover{background:var(--acc-tint)} .rows tbody tr.ligne:focus{outline:2px solid var(--acc);outline-offset:-2px} .rows td.chev{text-align:right;color:var(--ink-3);font-size:20px;line-height:1;width:28px} /* ---------------- tiroir lateral ---------------- */ /* L attribut hidden doit l emporter : une regle display de la feuille de style est plus specifique que le display:none du navigateur. */ .dw[hidden],.dw-ov[hidden],[hidden]{display:none!important} .dw-ov{position:fixed;inset:0;background:rgba(20,19,16,.35);z-index:80} .dw{position:fixed;top:0;right:0;bottom:0;width:560px;max-width:100vw;background:var(--surface); border-left:1px solid var(--line);z-index:85;display:flex;flex-direction:column; box-shadow:-12px 0 32px rgba(0,0,0,.10)} .dw-grip{position:absolute;left:0;top:0;bottom:0;width:6px;cursor:col-resize;background:transparent} .dw-grip:hover{background:var(--acc-tint)} .dw-h{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)} .dw-t{font-size:16px;font-weight:700;line-height:1.2} .dw-s{font-size:11.5px;color:var(--ink-3);margin-top:3px} .dw-x{margin-left:auto;border:0;background:none;font-size:24px;line-height:1;color:var(--ink-3);padding:0 4px} .dw-x:hover{color:var(--ink)} .dw-b{flex:1;overflow-y:auto;padding:18px} .dw-sec{margin-bottom:24px} .dw-sec h3{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3); margin:0 0 12px;font-weight:700} .dw-2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .dw-form{border:1px solid var(--line);border-radius:10px;padding:14px;background:#FCFCFB;margin-bottom:14px} .dw-list{border:1px solid var(--line);border-radius:10px;overflow:hidden} .dw-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)} .dw-row:last-child{border-bottom:0} .dw-row.off{background:#FAFAF9} .dw-row.off .dw-row-t{color:var(--ink-3);text-decoration:line-through} .dw-row-main{min-width:0;flex:1} .dw-row-t{font-size:13.5px;font-weight:600} .dw-row-s{font-size:11.5px;color:var(--ink-3);margin-top:2px;word-break:break-all} .dw-row-a{display:flex;gap:5px;flex:none} @media(max-width:700px){ .dw{width:100%!important} .dw-grip{display:none} .dw-row{flex-wrap:wrap} .dw-row-a{width:100%} } .dw-num{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:5px; background:var(--acc-tint);color:var(--acc);font-family:var(--f-num); font-size:11.5px;font-weight:700} /* ---------------- barre de filtres ---------------- */ .filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .filters .in{height:38px;width:auto;min-width:150px} .filters .f-search{flex:1;min-width:220px} .filters .f-search .in{width:100%} @media(max-width:760px){ .filters{flex-direction:column;align-items:stretch} .filters .in{width:100%} } /* ---------------- selecteur multiple ---------------- */ /* Une carte coupe ce qui depasse (overflow:hidden) : les menus deroulants qu elle contient doivent pouvoir en sortir. */ .card.no-clip{overflow:visible} .ms{position:relative} .ms-btn{display:flex;align-items:center;gap:8px;min-width:190px;height:38px;cursor:pointer; text-align:left;font-size:13px;color:var(--ink);background:var(--surface)} .ms-btn .ms-car{margin-left:auto;color:var(--ink-3)} .ms-panel{position:absolute;left:0;top:calc(100% + 6px);z-index:60;width:300px;max-width:88vw; background:var(--surface);border:1px solid var(--line-2);border-radius:10px; box-shadow:0 10px 28px rgba(0,0,0,.13);padding:8px} .ms-search{height:34px;margin-bottom:6px} .ms-list{max-height:280px;overflow-y:auto} .ms-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;font-size:13px;cursor:pointer} .ms-item:hover{background:var(--bg)} .ms-item span:nth-child(2){flex:1} .ms-n{color:var(--ink-3);font-size:11px} .ms-foot{display:flex;gap:6px;justify-content:flex-end;border-top:1px solid var(--line);padding-top:8px;margin-top:6px} /* ---------------- bandeau de consentement ---------------- */ .consent{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:11px;margin-bottom:16px; border:1px solid var(--line)} .consent.on{background:var(--ok-t);border-color:#A8D8BC} .consent.off{background:var(--stop-t);border-color:#E8A9A2} .consent-t{font-weight:700;font-size:14px} .consent.on .consent-t{color:var(--ok)} .consent.off .consent-t{color:var(--stop)} .consent-s{font-size:12.5px;color:var(--ink-2);margin-top:2px} .sw-toggle{margin-left:auto;flex:none;width:52px;height:29px;border-radius:15px;border:0; background:var(--stop);position:relative;transition:background .18s;cursor:pointer} .sw-toggle.on{background:var(--ok)} .sw-knob{position:absolute;top:3px;left:3px;width:23px;height:23px;border-radius:50%;background:#fff; transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.25)} .sw-toggle.on .sw-knob{transform:translateX(23px)} /* ---------------- chiffres clefs du tiroir ---------------- */ .kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px} .kpi-b{border:1px solid var(--line);border-radius:10px;padding:11px 13px;background:#FCFCFB} .kpi-v{font-size:19px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums} .kpi-l{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-top:3px} /* ---------------- formulaire en grille ---------------- */ .grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px} .grid .fg{margin-bottom:14px} /* ---------------- histogramme par producteur ---------------- */ .hist{border:1px solid var(--line);border-radius:10px;overflow:hidden} .hist-row{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:0; border-bottom:1px solid var(--line);background:var(--surface);text-align:left;cursor:pointer} .hist-row:last-child{border-bottom:0} .hist-row:hover{background:var(--acc-tint)} .hist-row.on{background:var(--acc-tint);box-shadow:inset 3px 0 0 var(--acc)} .hist-lb{width:34%;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hist-tr{flex:1;height:16px;background:var(--bg);border-radius:4px;overflow:hidden} .hist-fl{display:block;height:100%;background:var(--acc);border-radius:4px} .hist-n{width:52px;text-align:right;font-size:12.5px;font-weight:700} .hist-d{width:74px;text-align:right;font-size:11px;color:var(--ink-3)} @media(max-width:620px){ .grid,.kpi-row{grid-template-columns:1fr} .hist-lb{width:44%} .hist-d{display:none} }