/* ========================================================================= ePackPro Backoffice+ - REFONTE : feuille de style partagee (chrome commun) Sidebar, topbar, switches a pastille, horloges, cartes, tableaux. Utilisee par toutes les pages refonte/*.html. ========================================================================= */ :root{ --brand:#305754; --brand-700:#264744; --brand-300:#4f7d79; --lime:#9BF944; --lime-ink:#1b3a12; --blue:#3B82F6; --amber:#F7B32B; --red:#E02020; --green:#22C55E; --bg:#EDF1EC; --bg-grad1:#E6EEE7; --bg-grad2:#EEF1EC; --surface:#FFFFFF; --surface-2:#F6F8F5; --border:rgba(48,87,84,.14); --border-strong:rgba(48,87,84,.28); --text:#1E2E2C; --title:#24403D; --muted:#657D7A; --ring:rgba(48,87,84,.4); /* focus clair = deepgreen (sombre = lime, redefini plus bas) */ --row-hover:#E6EFE9; /* survol de ligne de tableau (distinct du zebra surface-2) */ --sb-thumb:var(--brand); --sb-track:transparent; --sb-thumb-hover:var(--lime); /* scrollbars */ color-scheme:light; /* calendrier natif (input date) et controles en rendu clair */ --hl:var(--brand); --hl-ink:#fff; /* mise en evidence (survol/selection d'un item). Clair : vert epack + blanc. */ --shadow:0 1px 2px rgba(20,40,38,.05), 0 8px 24px -12px rgba(20,40,38,.25); --shadow-lg:0 2px 6px rgba(20,40,38,.08), 0 24px 48px -20px rgba(20,40,38,.35); --nav-ink:#D7E4DE; } html.epp-dark{ --bg:#0E1917; --bg-grad1:#0C1614; --bg-grad2:#0F1B19; --surface:#15231F; --surface-2:#192924; --border:rgba(155,249,68,.14); --border-strong:rgba(155,249,68,.26); --text:#E2EBE6; --title:#F2F6F0; --muted:#93A8A2; --ring:rgba(155,249,68,.35); --row-hover:#213630; /* survol de ligne de tableau (distinct du zebra surface-2) */ --sb-thumb:#4f9b86; --sb-track:var(--brand); /* scrollbars sombre : thumb vert doux, track deepgreen */ color-scheme:dark; /* calendrier natif (input date) et controles en rendu sombre */ --hl:var(--brand); --hl-ink:var(--lime); /* sombre : vert teal doux (comme le bouton Options avancees) + texte lime, au lieu du lime flashy. */ --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7); --shadow-lg:0 2px 8px rgba(0,0,0,.5), 0 28px 56px -22px rgba(0,0,0,.8); --nav-ink:#CFe0D9; } *{box-sizing:border-box;} html,body{margin:0;padding:0;} /* Toujours afficher la scrollbar verticale (meme sans debordement) -> pas de decalage a la navigation. */ html{overflow-y:scroll;} body{font-family:"Helvetica Neue",Helvetica,"Segoe UI",system-ui,Arial,sans-serif; background:linear-gradient(160deg,var(--bg-grad1),var(--bg-grad2));color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;} /* Scrollbars aux couleurs ePackPro (clair : deepgreen, sombre : vert doux ; survol = plus clair). */ /* Couleurs pilotees par variables (--sb-*) -> suivent le theme meme pour la scrollbar de html (que les selecteurs descendants "html.epp-dark ..." ne ciblent pas). */ *{scrollbar-width:auto;scrollbar-color:var(--sb-thumb) var(--sb-track);} ::-webkit-scrollbar{width:16px;height:16px;background:var(--sb-track);} ::-webkit-scrollbar-track{background:var(--sb-track);} ::-webkit-scrollbar-button{background:var(--sb-track);} ::-webkit-scrollbar-thumb{background:var(--sb-thumb);border:2px solid transparent;border-radius:9px;background-clip:padding-box;} /* Survol ET action (drag) : vert flashy epack (lime). NB : ne fonctionne QUE sur les scrollbars internes (modales, tableaux) ; la scrollbar de page ne supporte pas :hover (limite Chromium). */ ::-webkit-scrollbar-thumb:hover,::-webkit-scrollbar-thumb:active{background:var(--sb-thumb-hover);background-clip:padding-box;} ::-webkit-scrollbar-corner{background:var(--sb-track);} a{color:inherit;text-decoration:none;} button{font-family:inherit;} .ico{width:20px;height:20px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;} .ico.sm{width:16px;height:16px;} .ico-nav{fill:currentColor;stroke:none;} .app{--sb-w:180px;display:grid;grid-template-columns:var(--sb-w) 1fr;min-height:100vh;transition:grid-template-columns .26s ease-in-out;} .app.no-anim{transition:none;} /* Etat reduit pre-applique dans le (avant 1er rendu) -> pas de flash a la navigation. */ html.epp-sb-pre .app{--sb-w:50px;grid-template-columns:50px 1fr;} /* ---------------- Sidebar ---------------- */ .side{position:sticky;top:0;align-self:start;height:100vh;background:linear-gradient(185deg,var(--brand),var(--brand-700)); color:var(--nav-ink);display:flex;flex-direction:column;padding:14px 12px 14px 8px;gap:4px;border-right:1px solid rgba(0,0,0,.15);overflow:hidden;z-index:210;} .brand{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:6px 11px 14px;position:relative;text-decoration:none;color:inherit;cursor:pointer;} .brand .logo{height:26px;width:auto;flex:0 0 auto;object-fit:contain;} .brand .logo-mini{display:none;height:40px;width:40px;border-radius:10px;} .app.sb .brand .logo-full{display:none;} .app.sb .brand .logo-mini{display:block;} .brand .bt{display:flex;flex-direction:column;line-height:1.05;white-space:nowrap;overflow:hidden;} .brand .bt b{color:var(--lime);font-size:15px;letter-spacing:.2px;} .brand .bt span{font-size:10.5px;font-style:italic;color:var(--lime);font-weight:700;letter-spacing:.3px;} /* Bouton de repli : en BAS de la sidebar (sous les menus), pleine largeur */ .collapse-btn{width:100%;height:36px;flex:0 0 auto;margin-top:4px;border-radius:10px;border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.15);color:var(--nav-ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;} .collapse-btn:hover{background:rgba(255,255,255,.12);color:#fff;} .collapse-btn .ico{width:18px;height:18px;transition:transform .18s;} /* Bouton doc (Notion) : en bas du menu, fond clair, icone deepgreen -> lime au survol. */ /* Bouton doc = cercle bleu plein + i blanc (repris du plugin : epp-cercle-bleu3). Survol bleu fonce. */ .side-doc{display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 auto;margin:4px auto 0;border-radius:50%;background:#3b82f6;color:#fff;border:none;transition:background .15s;} .side-doc:hover{background:#273a80;} .side-doc .ico{width:18px;height:18px;} .nav-lbl{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:rgba(215,228,222,.5);margin:12px 10px 3px;white-space:nowrap;} .nav-item{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:10px;cursor:pointer;color:var(--nav-ink); font-size:13.5px;font-weight:600;border:1px solid transparent;transition:.15s;white-space:nowrap;overflow:hidden;} .nav-item:hover{background:rgba(255,255,255,.08);color:#fff;} .nav-item.active{background:rgba(155,249,68,.14);color:#fff;border-color:rgba(155,249,68,.35);} .nav-item.active .ico{color:var(--lime);} .nav-item .ico{width:19px;height:19px;} .side .spacer{flex:1 1 auto;} /* Sous-menu "Outils" : flyout colle au bord droit de la sidebar (position:fixed -> echappe a overflow:hidden). */ .nav-wrap{position:relative;display:block;} .nav-wrap .nav-caret{width:14px;height:14px;margin-left:auto;flex:0 0 auto;opacity:.55;} .app.sb .nav-wrap .nav-caret{display:none;} .nav-flyout{position:fixed;left:0;top:0;min-width:214px;background:var(--surface);border:1px solid var(--border);border-radius:0 12px 12px 12px; box-shadow:var(--shadow-lg);padding:6px;z-index:200;opacity:0;visibility:hidden;transform:translateX(-6px); transition:opacity .15s ease-in-out,transform .15s ease-in-out,visibility .15s ease-in-out;} .nav-flyout.fly-open{opacity:1;visibility:visible;transform:none;} .nav-flyout .fly-head{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:800;padding:6px 12px 7px;} .nav-flyout .fly-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:var(--text);font-size:13px;font-weight:600;transition:background .12s,color .12s;} .nav-flyout .fly-item:hover{background:var(--hl);color:var(--hl-ink);} .nav-flyout .fly-item .ico{width:16px;height:16px;flex:0 0 auto;color:var(--brand);} html.epp-dark .nav-flyout .fly-item .ico{color:#4f9b86;} .nav-flyout .fly-item:hover .ico{color:inherit;} .app.sb{--sb-w:50px;grid-template-columns:50px 1fr;} .app.sb .collapse-btn{width:36px;height:36px;margin:4px auto 0;border-radius:9px;} .app.sb .brand .bt{display:none;} .app.sb .brand{align-items:center;padding:4px 0 14px;} .app.sb .collapse-btn .ico{transform:rotate(180deg);} .app.sb .nav-lbl{opacity:0;height:0;margin:0;padding:0;overflow:hidden;} .app.sb .nav-item{justify-content:center;padding:10px 0;gap:0;} .app.sb .nav-item span{display:none;} .app.sb .side{padding:14px 5px;} /* ---------------- Topbar ---------------- */ .main{display:flex;flex-direction:column;min-width:0;grid-column:2;} .side{grid-column:1;} .top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;padding:12px 24px; background:color-mix(in srgb,var(--bg) 80%, transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--border);} .top .head-txt{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;max-width:none;} .top h1{margin:0;font-size:18px;color:var(--title);font-weight:800;letter-spacing:.2px;line-height:1.18;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .top .crumb{color:var(--muted);font-size:12px;font-weight:600;margin-top:2px;} .search{margin-left:6px;flex:1 1 360px;max-width:460px;position:relative;display:flex;align-items:center;} .search .ico{position:absolute;left:12px;color:var(--muted);} .search input{width:100%;height:40px;border-radius:11px;border:1px solid var(--border);background:var(--surface);color:var(--text); padding:0 14px 0 40px;font-size:13.5px;outline:none;box-shadow:var(--shadow);transition:.15s;} .search input:focus{border-color:var(--ring);} .search input::placeholder{color:var(--muted);} .cluster{margin-left:auto;display:flex;align-items:center;gap:10px;} .locclock{display:flex;align-items:center;gap:9px;height:40px;padding:0 11px;border-radius:11px;border:1px solid var(--border); background:var(--surface);color:var(--title);cursor:pointer;transition:.15s;} .locclock:hover{border-color:var(--border-strong);} .locclock.open{border-color:var(--brand);box-shadow:0 0 0 3px rgba(48,87,84,.12);} html.epp-dark .locclock.open{border-color:var(--lime);box-shadow:0 0 0 3px rgba(155,249,68,.14);} .locclock .fl{width:22px;height:22px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.15);flex:0 0 auto;} .locclock .lc{display:flex;flex-direction:column;line-height:1.05;text-align:left;} .locclock .lc b{font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--title);} .locclock .lc small{font-size:10px;color:var(--muted);text-transform:capitalize;} .locclock .chev{width:14px;height:14px;color:var(--muted);transition:transform .18s;} .locclock.open .chev{transform:rotate(180deg);} .epp-settings-toggle{width:40px;height:40px;display:grid;place-items:center;flex:0 0 auto;border:1px solid var(--border-strong);border-radius:50%;background:var(--title);color:var(--bg);cursor:pointer;box-shadow:var(--shadow);transition:transform .16s,box-shadow .16s,background .16s,color .16s;} .epp-settings-toggle .ico{width:19px;height:19px;fill:currentColor;} .epp-settings-toggle:hover,.epp-settings-toggle.open{transform:rotate(18deg);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent);} .epp-settings-menu{position:absolute;z-index:80;top:100%;right:-8px;width:max-content;min-width:250px;max-width:calc(100vw - 32px);padding:10px 12px;border:1px solid var(--border);border-radius:0 0 12px 12px;background:var(--surface);color:var(--text);box-shadow:0 10px 26px rgba(16,35,33,.18);} .epp-settings-menu[hidden]{display:none!important;} .epp-settings-row{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:34px;font-size:13px;font-weight:700;color:var(--title);} .epp-settings-row+.epp-settings-row{border-top:1px solid var(--border);padding-top:7px;margin-top:7px;} .epp-settings-menu .epp-switch{flex:0 0 auto;}.epp-switch-col{display:flex;flex-direction:column;gap:6px;} .epp-switch{position:relative;width:64px;height:22px;border-radius:999px;cursor:pointer;flex:0 0 auto;user-select:none;transition:background .2s;} .epp-switch .epp-knob{position:absolute;top:2px;width:18px;height:18px;border-radius:50%;transition:left .2s, background .2s;z-index:1;box-shadow:0 1px 2px rgba(0,0,0,.4);} .epp-switch .epp-ic{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:13px;line-height:1;z-index:2;overflow:visible;} .epp-switch .epp-ic img{width:15px;height:15px;display:block;border-radius:50%;border:1px solid rgba(48,87,84,.75);box-sizing:border-box;} .switch_lang{background:rgba(55,62,64,1);} /* Theme clair : track du switch langue = gris clair (un peu plus fonce que le cadre blanc) + liseret exterieur plus sombre. */ html:not(.epp-dark) .switch_lang{background:#d8e0dc;box-shadow:0 0 0 1px rgba(48,87,84,.32);} .switch_lang .epp-ic-lang-fr{left:14px;} .switch_lang .epp-ic-lang-uk{left:50px;} .switch_lang .epp-knob{left:5px;background:rgba(34,197,94,1);} .switch_lang.epp-on .epp-knob{left:41px;} .epp-switch-theme .epp-ic-soleil{left:14px;} .epp-switch-theme .epp-ic-lune{left:50px;} html:not(.epp-dark) .epp-switch-theme{background:rgba(255,234,208,1);} html.epp-dark .epp-switch-theme{background:rgba(39,58,128,1);} .epp-switch-theme .epp-knob{background:rgba(100,116,139,1);left:5px;} html.epp-dark .epp-switch-theme .epp-knob{left:41px;} /* Liserets des switchs : theme clair sur les deux (comme le switch langue) ; theme sombre liseret sombre sur les deux. */ html:not(.epp-dark) .epp-switch-theme{box-shadow:0 0 0 1px rgba(48,87,84,.32);} html.epp-dark .switch_lang,html.epp-dark .epp-switch-theme{box-shadow:0 0 0 1px rgba(0,0,0,.5);} /* Switch on/off GENERIQUE (base pour tout futur switch oui/non). Meme habillage que les switchs langue / theme : track neutre fixe + pastille coloree qui glisse. Off = pastille grise (comme le switch theme), On = pastille verte (comme le switch langue). Etat porte par la classe .epp-on. */ .epp-switch-onoff{background:#d8e0dc;box-shadow:0 0 0 1px rgba(48,87,84,.32);} html.epp-dark .epp-switch-onoff{background:rgba(55,62,64,1);box-shadow:0 0 0 1px rgba(0,0,0,.5);} .epp-switch-onoff .epp-knob{left:5px;background:rgba(100,116,139,1);} .epp-switch-onoff.epp-on .epp-knob{left:41px;background:rgba(34,197,94,1);} /* Variante COMPACTE (switch specifique plus etroit) - la base .epp-switch reste inchangee. Deviendra la base de tout toggle oui/non une fois la largeur validee. */ .epp-switch-sm{width:42px;} .epp-switch-sm .epp-knob{left:3px;} .epp-switch-sm.epp-on .epp-knob{left:21px;} /* Switch compact ePack : la pastille = favicon ePackPro. Off = grise, On = couleur. A combiner avec .epp-switch.epp-switch-onoff.epp-switch-sm. Les pages standalone peuvent surcharger l'image via --epp-favicon (ex. base64) ; par defaut = web-base/img/icon32.png. */ /* Pastille = favicon ePackPro (disque deepgreen, "e" en negatif). Fond BLANC derriere l'image : le "e" ressort en blanc et le disque reste visible quel que soit le theme. Off = grise (grayscale), On = couleur. */ .epp-switch-epack .epp-knob{background-color:#fff!important;background-image:var(--epp-favicon,url("../img/icon32.png"))!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;filter:grayscale(1) opacity(.6);} .epp-switch-epack.epp-on .epp-knob{filter:none;} /* On : rail vert lime (le favicon deepgreen ressort nettement -> lecture "actif/vert" sans ambiguite). */ .epp-switch-epack.epp-on{background:#9BF944;box-shadow:none;} html.epp-dark .epp-switch-epack.epp-on{background:#9BF944;box-shadow:none;} /* Off : liseret 1px doux mais perceptible autour du track. */ .epp-switch-epack:not(.epp-on){box-shadow:0 0 0 1px rgba(48,87,84,.45);} html.epp-dark .epp-switch-epack:not(.epp-on){box-shadow:0 0 0 1px rgba(255,255,255,.3);} /* Case a cocher = case CARREE aux couleurs de la charte ePackPro (comme le plugin V5 Backoffice+). Clair : coche blanche sur fond deepgreen. Sombre : coche deepgreen sur fond lime. Radios inchanges. */ input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;box-sizing:border-box;width:18px;height:18px;min-width:18px;border:2px solid var(--border-strong);border-radius:5px;background:var(--surface);cursor:pointer;flex:0 0 auto;margin:0;padding:0;vertical-align:middle;transition:background .15s,border-color .15s;} input[type=checkbox]:hover{border-color:var(--brand);} input[type=checkbox]:checked{background:var(--brand);border-color:var(--brand);} input[type=checkbox]:checked::after{content:"";position:absolute;left:4px;top:0;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);} html.epp-dark input[type=checkbox]:hover{border-color:var(--lime);} html.epp-dark input[type=checkbox]:checked{background:var(--lime);border-color:var(--lime);} html.epp-dark input[type=checkbox]:checked::after{border-color:var(--lime-ink);} input[type=checkbox]:disabled{opacity:.55;cursor:not-allowed;} input[type=checkbox]:focus-visible{outline:2px solid var(--ring);outline-offset:2px;} /* Ligne du toggle dans la modale horloge locale (sous le titre). */ /* Ligne "Lieu / fuseau horaire" + toggle "afficher ma locale" aligne a droite. */ .em-lbl-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;margin-bottom:8px;} .em-lbl-row .em-lbl{margin-top:0;} .em-toggle{display:flex;align-items:center;gap:8px;flex:0 0 auto;} .em-toggle-lbl{font-size:11.5px;font-weight:700;color:var(--muted);white-space:nowrap;} .avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer;border:none;flex:0 0 auto; background:linear-gradient(135deg,var(--brand),var(--brand-300));color:#fff;font-weight:800;font-size:14px;box-shadow:var(--shadow);transition:box-shadow .15s,transform .15s;} .avatar:hover{box-shadow:var(--shadow-lg);} .avatar.open{box-shadow:0 0 0 3px var(--ring);} /* Theme sombre : liseret de l'avatar en vert lime epack. */ html.epp-dark .avatar{box-shadow:0 0 0 2px var(--lime),var(--shadow);} html.epp-dark .avatar:hover{box-shadow:0 0 0 2px var(--lime),var(--shadow-lg);} html.epp-dark .avatar.open{box-shadow:0 0 0 3px var(--lime);} /* Menu utilisateur : colle sous le header, coins hauts droits, coins bas arrondis. */ .user-menu{position:absolute;top:100%;right:24px;z-index:46;min-width:230px;background:var(--surface);border:1px solid var(--border);border-top:none; border-radius:0 0 14px 14px;box-shadow:var(--shadow-lg);padding:6px;display:none;flex-direction:column;gap:2px;} .user-menu.open{display:flex;} .um-head{padding:9px 11px 8px;border-bottom:1px solid var(--border);margin-bottom:4px;} .um-name{font-size:13px;font-weight:800;color:var(--title);} .um-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:7px 11px;border-radius:9px;} .um-row:hover{background:var(--surface-2);} .um-lbl{font-size:12.5px;font-weight:600;color:var(--text);} /* ---------------- Cadre horloges : tiroir pleine largeur (slide bas/haut) ---------------- */ .clock-pop{position:sticky;top:var(--topH,64px);z-index:35;overflow:hidden;max-height:0;transition:max-height .34s ease-in-out;} .clock-pop.open{max-height:82vh;} .cp-inner{padding:14px 24px 14px;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow);} .cp-head{display:flex;align-items:center;gap:9px;margin-bottom:12px;} .cp-head .ico{color:var(--brand);} html.epp-dark .cp-head .ico{color:var(--lime);} .cp-head h4{margin:0;font-size:14px;color:var(--title);font-weight:800;} .cp-head .count{margin-left:auto;font-size:11px;font-weight:800;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);padding:3px 9px;border-radius:999px;} .cp-gear{margin-left:auto;width:28px;height:28px;flex:0 0 auto;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--brand);cursor:pointer;display:inline-grid;place-items:center;padding:0;transition:.15s;} html.epp-dark .cp-gear{color:var(--lime);} .cp-gear:hover{border-color:var(--border-strong);} .cp-gear .ico{width:15px;height:15px;} /* Modale "Horloge locale" */ /* Fond opaque de modale : passe AU-DESSUS de tout le chrome (header, menu, panneau horloges, bouton remonter) -> z-index eleve. Exception : les bandeaux flash (.epp-flash) restent au-dessus (z-index superieur). */ .epp-modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:1050;padding:16px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease-in-out,visibility .22s ease-in-out;} .epp-modal-ov.open{opacity:1;visibility:visible;pointer-events:auto;} /* Bandeaux flash (messages de notification) : exception, restent au-dessus du fond de modale. */ .epp-flash{position:relative;z-index:1100;} /* Bandeaux infos flash : bande fixe tout en haut de la zone contenu, sur la ligne du header, au-dessus de TOUT (z-index > menu/modales). Vide par defaut -> invisible. Pile verticale si plusieurs. */ /* Bandeaux de notification : juste SOUS le header (top=--topH), fond translucide (faible opacite), icone coloree par type a gauche (reste en haut si plusieurs lignes), texte lisible. */ /* Overlay : par-dessus le contenu (ne pousse pas la page). Aligne sur la colonne contenu (left = largeur sidebar). */ .epp-flashbar{position:fixed;top:var(--topH,56px);left:var(--sb-w,180px);right:0;z-index:1300;display:flex;flex-direction:column;gap:8px;padding:8px 24px 0;pointer-events:none;transition:left .26s ease-in-out;} .epp-flashbar .epp-flash-item{pointer-events:auto;} .epp-flashbar:empty{display:none;} .epp-flash-item{display:flex;align-items:flex-start;gap:11px;padding:11px 14px;border-radius:12px;font-size:13px;font-weight:600;color:var(--text);box-shadow:var(--shadow);border:1px solid var(--border);} .epp-flash-item .fx-ic{flex:0 0 auto;width:18px;height:18px;margin-top:1px;} .epp-flash-item .fx-ic svg{width:18px;height:18px;display:block;} .epp-flash-item .fx-msg{flex:1;min-width:0;line-height:1.5;} .epp-flash-item.info{background:linear-gradient(rgba(23,102,239,.12),rgba(23,102,239,.12)),var(--surface);border-color:rgba(23,102,239,.4);} .epp-flash-item.info .fx-ic{color:#1766ef;} .epp-flash-item.ok{background:linear-gradient(rgba(46,158,91,.13),rgba(46,158,91,.13)),var(--surface);border-color:rgba(46,158,91,.44);} .epp-flash-item.ok .fx-ic{color:#1b7f45;} .epp-flash-item.warn{background:linear-gradient(rgba(234,138,51,.15),rgba(234,138,51,.15)),var(--surface);border-color:rgba(234,138,51,.46);} .epp-flash-item.warn .fx-ic{color:#b9700f;} .epp-flash-item.err{background:linear-gradient(rgba(224,32,32,.12),rgba(224,32,32,.12)),var(--surface);border-color:rgba(224,32,32,.42);} .epp-flash-item.err .fx-ic{color:#c0211a;} html.epp-dark .epp-flash-item.info{background:linear-gradient(rgba(23,102,239,.20),rgba(23,102,239,.20)),var(--surface);} html.epp-dark .epp-flash-item.info .fx-ic{color:#93c5fd;} html.epp-dark .epp-flash-item.ok{background:linear-gradient(rgba(46,158,91,.21),rgba(46,158,91,.21)),var(--surface);} html.epp-dark .epp-flash-item.ok .fx-ic{color:#86efac;} html.epp-dark .epp-flash-item.warn{background:linear-gradient(rgba(234,138,51,.21),rgba(234,138,51,.21)),var(--surface);} html.epp-dark .epp-flash-item.warn .fx-ic{color:#fcd34d;} html.epp-dark .epp-flash-item.err{background:linear-gradient(rgba(224,32,32,.20),rgba(224,32,32,.20)),var(--surface);} html.epp-dark .epp-flash-item.err .fx-ic{color:#fca5a5;} .epp-flash-close{flex:none;width:24px;height:24px;border:none;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:13px;line-height:1;padding:0;transition:background .15s;} .epp-flash-close:hover{background:rgba(0,0,0,.08);color:var(--red);} html.epp-dark .epp-flash-close:hover{background:rgba(255,255,255,.1);} .epp-modal{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:16px;width:min(420px,96vw);box-shadow:var(--shadow);overflow:visible;transform:translateY(8px) scale(.97);transition:transform .22s ease-in-out;} .epp-modal-ov.open .epp-modal{transform:translateY(0) scale(1);} .em-head{display:flex;align-items:center;gap:10px;padding:10px;border-radius:16px 16px 0 0;background:var(--surface);} .em-head .ico{color:var(--brand);} html.epp-dark .em-head .ico{color:var(--lime);} .em-head h4{margin:0;font-size:15px;color:var(--title);font-weight:800;} /* Bouton carre de fermeture : fond = inverse du fond de la modale (clair -> deepgreen, sombre -> clair), icone = couleur du fond de la modale ; survol = fond rouge. */ .em-close{margin-left:auto;width:30px;height:30px;border-radius:8px;border:none;background:var(--brand);color:var(--surface);cursor:pointer;font-size:20px;line-height:1;display:grid;place-items:center;padding:0;transition:background .15s,color .15s;} .em-close:hover{background:var(--red);color:#fff;} html.epp-dark .em-close{background:var(--lime);color:var(--brand);} html.epp-dark .em-close:hover{background:var(--red);color:#fff;} /* FOCUS : aucun effet par defaut sur tous les elements. Seules exceptions : champs texte (simple / multiligne) et menus deroulants (select natif + .epp-sel custom). Couleur = deepgreen (clair) / lime (sombre). */ :focus{outline:none;} .field:focus,textarea:focus,textarea.field:focus,select.field:focus,.epp-sel-btn:focus,.epp-sel-btn.open{ border-color:var(--brand);box-shadow:0 0 0 3px rgba(48,87,84,.18);} html.epp-dark .field:focus,html.epp-dark textarea:focus,html.epp-dark textarea.field:focus,html.epp-dark select.field:focus,html.epp-dark .epp-sel-btn:focus,html.epp-dark .epp-sel-btn.open{ border-color:var(--lime);box-shadow:0 0 0 3px rgba(155,249,68,.18);} .em-body{padding:16px;display:flex;flex-direction:column;gap:9px;} /* Modale de confirmation (window.eppConfirm) - meme composant que le plugin. */ .em-foot{display:flex;justify-content:flex-end;gap:10px;padding:10px;} .em-foot .btn{padding:8px 16px;border-radius:10px;font-weight:700;font-size:13px;} .epp-confirm-msg{font-size:14px;color:var(--text);line-height:1.55;} .epp-confirm-cancel{background:var(--surface-2);color:var(--title);border:1px solid var(--border);} .epp-confirm-ok{background:var(--brand);color:#fff;border:none;} html.epp-dark .epp-confirm-ok{background:#4f9b86;} /* Survol : fond plus fonce + texte blanc, PRIORITAIRE sur le .btn:hover{color:#333} de Bootstrap (la modale est hors du scope plugin). */ .epp-modal .epp-confirm-ok:hover,.epp-modal .epp-confirm-ok:focus{background:var(--brand-700)!important;color:#fff!important;filter:none;} html.epp-dark .epp-modal .epp-confirm-ok:hover,html.epp-dark .epp-modal .epp-confirm-ok:focus{background:#3f8870!important;color:#fff!important;} /* Le bouton confirmer/valider/sauvegarder garde la couleur primaire (jamais rouge), meme pour une action destructive (le rouge est reserve au bouton Annuler/negatif). */ .epp-confirm-ok.danger{background:var(--brand);color:#fff;} html.epp-dark .epp-confirm-ok.danger{background:#4f9b86;} .epp-modal .epp-confirm-ok.danger:hover,.epp-modal .epp-confirm-ok.danger:focus{background:var(--brand-700)!important;color:#fff!important;} html.epp-dark .epp-modal .epp-confirm-ok.danger:hover,html.epp-dark .epp-modal .epp-confirm-ok.danger:focus{background:#3f8870!important;color:#fff!important;} .epp-modal .epp-destructive:hover,.epp-modal .epp-destructive:focus,.epp-modal .epp-destructive:active{background:#c0211a!important;color:#fff!important;border-color:#c0211a!important;} .em-lbl{font-size:11.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-top:4px;} .em-tz{position:relative;} .em-tz input{width:100%;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);padding:0 12px;outline:none;font-size:13px;} .em-tz ul{list-style:none;margin:4px 0 0;padding:4px;position:absolute;left:0;right:0;top:100%;background:var(--surface);border:1px solid var(--border);border-radius:10px;max-height:190px;overflow:auto;z-index:1200;display:none;box-shadow:var(--shadow);} .em-tz li{padding:7px 10px;border-radius:7px;cursor:pointer;font-size:13px;} .em-tz li:hover{background:var(--hl);color:var(--hl-ink);} .em-current{font-size:12.5px;color:var(--muted);} .em-flags{display:flex;flex-wrap:wrap;gap:8px;} .em-flag{display:flex;flex-direction:column;align-items:center;gap:6px;width:76px;padding:9px 4px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);cursor:pointer;font-size:11px;transition:.15s;} .em-flag img{width:26px;height:26px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.15);} .em-flag:hover{border-color:var(--border-strong);} .em-flag.sel{border-color:var(--brand);box-shadow:0 0 0 2px rgba(48,87,84,.18);} html.epp-dark .em-flag.sel{border-color:var(--lime);box-shadow:0 0 0 2px rgba(155,249,68,.18);} .tz-search{position:relative;margin:0 auto 12px;max-width:340px;} #tz-input{width:100%;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);padding:0 34px 0 14px;font-size:13px;outline:none;} .tz-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;border:none;border-radius:50%;background:var(--border);color:var(--text);cursor:pointer;display:none;place-items:center;font-size:13px;line-height:1;padding:0;z-index:6;} .tz-search.has-val .tz-clear{display:grid;} .tz-clear:hover{background:var(--red);color:#fff;} #tz-input:focus{border-color:var(--ring);} #tz-input::placeholder{color:var(--muted);} .tz-results{list-style:none;margin:6px 0 0;padding:5px;position:absolute;top:100%;left:0;right:0;z-index:1200; background:var(--surface);border:1px solid var(--border);border-radius:12px;max-height:260px;overflow-y:auto;display:none;box-shadow:var(--shadow-lg);} .tz-results li{padding:9px 11px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--text);} .tz-results li:hover,.tz-results li.active{background:var(--hl);color:var(--hl-ink);} .tz-results li.tz-added{opacity:.4;} /* Horloges mondiales : cartes RONDES (style plugin). Drapeau centre sur la bordure haute, corbeille centree sur la bordure basse. */ .clock-grid{display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:28px 16px;max-height:52vh;overflow-y:auto;padding:16px 4px 22px;} .clock-card{position:relative;flex:0 0 118px;width:118px;height:118px;border-radius:50%;border:3px solid #3b82f6;background:var(--surface-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:10px;text-align:center;transition:border-color .15s;} html.epp-dark .clock-card{background:var(--surface);} .clock-card.local{border-color:var(--brand);} html.epp-dark .clock-card.local{border-color:var(--lime);} /* Theme clair : inverser bordure locale <-> autres (locale = bleu, autres = vert). */ html:not(.epp-dark) .clock-card{border-color:var(--brand);} html:not(.epp-dark) .clock-card.local{border-color:#3b82f6;} .clock-card .cflag{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;border:1px solid rgba(48,87,84,.75);object-fit:cover;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);z-index:2;} .clock-card .city{font-size:10.5px;font-weight:700;color:var(--title);line-height:1.1;max-width:96px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 1px;} .clock-card .time{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;color:#3b82f6;letter-spacing:.3px;line-height:1.15;} html.epp-dark .clock-card .time{color:var(--lime);} .clock-card .date{font-size:9.5px;color:var(--muted);text-transform:capitalize;line-height:1.1;} /* Couleur du pin locale = couleur de la bordure de l'horloge locale (clair : bleu, sombre : lime). */ .pin-local{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);width:20px;height:20px;z-index:3;color:#3b82f6;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3));pointer-events:none;} html.epp-dark .pin-local{color:var(--lime);} .pin-local svg{width:22px;height:22px;fill:currentColor;display:block;} /* Corbeille = cercle rouge + icone blanche, etat unique (pas de rollhover), centre pile sur le bas du cercle de l'horloge. Visible au survol de l'horloge. */ .btn-del{position:absolute;left:50%;bottom:-3px;transform:translate(-50%,50%);width:22px;height:22px;border-radius:50%;background:var(--red);border:none;cursor:pointer;display:grid;place-items:center;padding:0;z-index:3;opacity:0;pointer-events:none;transition:opacity .15s;box-shadow:0 1px 3px rgba(0,0,0,.35);} .clock-card:hover .btn-del,.clock-card:focus-within .btn-del{opacity:1;pointer-events:auto;} .btn-del svg{width:14px;height:14px;fill:#fff;display:block;} /* ---------------- Contenu commun ---------------- */ .content{padding:12px 24px 36px;display:flex;flex-direction:column;gap:20px;} .content.internal-page-content{min-height:0;flex:1;padding:0;gap:0;overflow:visible} .internal-page-frame{display:block;width:100%;min-height:100vh;height:100vh;border:0;border-radius:0;background:transparent;overflow:hidden} html.internal-page-embedded,body.internal-page-embedded{height:auto!important;min-height:100%;overflow-x:hidden!important;overflow-y:hidden!important} body.internal-page-embedded{margin:0!important} /* Si un conteneur Bootstrap centre est present dans le contenu : contenu pleine largeur, aligne a GAUCHE. */ .content .container,.content .container-fluid{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;} /* Contenu COLLE AU BORD GAUCHE : neutralise les decalages de colonnes Bootstrap (col-*-offset-*) qui centrent/indentent le contenu natif. */ .content [class*="col-"][class*="offset"]{margin-left:0!important;} .panel{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;} .panel-h{display:flex;align-items:center;gap:10px;padding:10px 10px 5px;flex-wrap:wrap;} .panel-h .ico{color:var(--brand);} html.epp-dark .panel-h .ico{color:var(--lime);} .panel-h h3{margin:0;font-size:15px;color:var(--title);font-weight:800;} .panel-h .count{margin-left:auto;font-size:11.5px;font-weight:800;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);padding:4px 10px;border-radius:999px;} .panel-b{padding:8px 18px 16px;} /* Filtres segmentes CANONIQUES (repris du plugin, charte-pages.css) : fond = version translucide de la couleur de bordure ; survol = selectionne (plein) ; boutons jointifs sans espacement, coins arrondis seulement a l'exterieur du groupe. */ .seg-ctl{display:inline-flex;align-items:stretch;border:1px solid var(--brand);border-radius:8px;overflow:hidden;background:transparent;} .seg-ctl button{border:none;border-radius:0;background:var(--surface);color:var(--brand);font:inherit;font-size:12.5px;font-weight:600;padding:4px 9px;min-height:28px;cursor:pointer;transition:background .15s,color .15s;} .seg-ctl button:hover,.seg-ctl button.active{background:var(--brand);color:#fff;} /* Sombre : vert doux #4f9b86 (pas le lime flashy) pour la selection/survol et la bordure. */ html.epp-dark .seg-ctl{border-color:#4f9b86;} html.epp-dark .seg-ctl button{background:var(--surface-2);color:var(--text);} html.epp-dark .seg-ctl button:hover,html.epp-dark .seg-ctl button.active{background:#4f9b86;color:#fff;} /* Boutons */ /* Gabarit bouton = plugin v5 Backoffice+ (btn-base/btn-rect) : radius 6px, hauteur 34px, 13px bold, border:none, transition background/couleur .15s, hover qui fonce, plat (pas d'effet bombe). */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:6px;cursor:pointer;min-height:34px;padding:0 13px;font-weight:700;font-size:13px;line-height:1;transition:background .15s,color .15s;white-space:nowrap;} .btn>svg{flex:none;} /* Tous les boutons : au survol, la couleur de fond initiale est ASSOMBRIE (changement net). */ .btn-brand{background:var(--brand);color:#fff;} .btn-brand:hover{background:var(--brand-700);} html.epp-dark .btn-brand{background:var(--lime);color:var(--lime-ink);} html.epp-dark .btn-brand:hover{background:#84e22f;} .btn-ghost{background:var(--surface-2);color:var(--title);border:1px solid var(--border-strong);} .btn-ghost:hover{border-color:var(--brand);background:var(--row-hover);} html.epp-dark .btn-ghost:hover{border-color:var(--lime);} .btn-oa{background:var(--brand);color:var(--lime);} .btn-oa:hover{background:var(--brand-700);} .btn-vert{background:#2e9e5b;color:#fff;} .btn-vert:hover{background:#25824a;} html.epp-dark .btn-vert{background:#2e9e5b;color:#fff;} html.epp-dark .btn-vert:hover{background:#3bb56c;} .btn-bleu{background:#273A80;color:#fff;} .btn-bleu:hover{background:#1d2c60;} html.epp-dark .btn-bleu{background:#3a53b0;color:#fff;} html.epp-dark .btn-bleu:hover{background:#2b3f87;} .btn-rouge{background:var(--red);color:#fff;} .btn-rouge:hover{background:#b91c1c;} /* v5 : boutons plats (pas d'effet bombe) ; seul un leger enfoncement au clic (comportement v5). */ .btn:active{transform:translateY(1px);} .iconbtn-sm{position:relative;width:28px;height:28px;border-radius:6px;border:1px solid rgba(48,87,84,.5);background:var(--surface);color:var(--title); cursor:pointer;display:inline-grid;place-items:center;transition:background .15s,color .15s,border-color .15s;} .iconbtn-sm.iconbtn-md{width:34px;height:34px} html.epp-dark .iconbtn-sm{border-color:rgba(155,249,68,.42);} /* Centrage par transform : evite l'arrondi sub-pixel du grid quand le bouton tombe sur un demi-pixel (marges egales garanties). */ .iconbtn-sm svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);} .iconbtn-sm:hover{border-color:var(--border-strong);color:var(--brand);} html.epp-dark .iconbtn-sm:hover{color:var(--lime);} /* Supprimer : texte rouge au repos -> fond rouge + texte blanc au survol. */ .iconbtn-sm.danger{color:var(--red);border-color:rgba(224,32,32,.4);} html.epp-dark .iconbtn-sm.danger{color:#fca5a5;} .iconbtn-sm.danger:hover{background:var(--red);border-color:var(--red);color:#fff;} html.epp-dark .iconbtn-sm.danger:hover{background:var(--red);border-color:var(--red);color:#fff;} /* Dé-associer : fond rouge plein au repos -> rouge plus fonce au survol (icone blanche). */ .iconbtn-sm.danger-solid{background:var(--red);border-color:var(--red);color:#fff;} .iconbtn-sm.danger-solid:hover{background:#b91c1c;border-color:#b91c1c;color:#fff;} html.epp-dark .iconbtn-sm.danger-solid{background:var(--red);border-color:var(--red);color:#fff;} html.epp-dark .iconbtn-sm.danger-solid:hover{background:#b91c1c;border-color:#b91c1c;color:#fff;} /* Actions liste solutions : Voir -> fond bleu, Modifier -> fond vert, icone blanche (specificite relevee pour battre le hover sombre generique) */ /* Survol "Voir" = bleu de fond des boutons Manager (clair #273a80 / sombre #4f67c4). */ .iconbtn-sm.act-view:hover{background:#273a80;border-color:#273a80;color:#fff;} html.epp-dark .iconbtn-sm.act-view:hover{background:#4f67c4;border-color:#4f67c4;color:#fff;} .iconbtn-sm.act-edit:hover, html.epp-dark .iconbtn-sm.act-edit:hover{background:rgb(46,158,91);border-color:rgb(46,158,91);color:#fff;} /* Debloquer (vert) / Reinitialiser (bleu nuit) : couleur plugin au survol seulement. */ .iconbtn-sm.act-unlock:hover, html.epp-dark .iconbtn-sm.act-unlock:hover{background:rgb(46,158,91);border-color:rgb(46,158,91);color:#fff;} .iconbtn-sm.act-reset:hover, html.epp-dark .iconbtn-sm.act-reset:hover{background:#273a80;border-color:#273a80;color:#fff;} /* Champs */ /* Fond par defaut un peu plus sombre (surface-2) ; au focus, fond initial plus clair (surface) ; au blur, retour au fond plus sombre. */ .field{height:38px;border-radius:10px;border:1px solid var(--border);background-color:var(--surface-2);color:var(--text);padding:0 12px;font-size:13px;outline:none;transition:border-color .15s,background-color .15s;} .field:focus{border-color:var(--brand);background-color:var(--surface);} html.epp-dark .field:focus{border-color:var(--lime);} /* Champ multiligne : toujours une hauteur par defaut pour ~5 lignes, redimensionnable verticalement. */ textarea,textarea.field{height:auto;min-height:7.8em;line-height:1.5;padding:9px 12px;resize:vertical;font-family:inherit;} /* Selecteur de fichier (input[type=file]) : bouton natif stylise a la charte via ::file-selector-button. */ /* Bordure tiretee (traits) autour du champ fichier (deepgreen clair / lime sombre) : encadre le nom du fichier. */ input[type=file]{font-size:13px;color:var(--text);max-width:100%;cursor:pointer;border:1.5px dashed var(--brand);border-radius:8px;padding:5px 12px 5px 5px;} html.epp-dark input[type=file]{border-color:var(--lime);} /* Zone de glisser-deposer de fichiers (.epp-dropzone). Reskin charte de la Dropzone : bordure tiretee deepgreen (clair) / lime (sombre), fond sombre lisible en theme sombre, etat "dragover" mis en evidence. */ .epp-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center; border:2px dashed var(--brand);border-radius:14px;background:var(--surface-2);color:var(--text); padding:26px 22px;cursor:pointer;min-height:148px;transition:border-color .15s,background .15s,color .15s;} html.epp-dark .epp-dropzone{border-color:var(--lime);background:rgba(29,47,45,1);} .epp-dropzone:hover{background:var(--row-hover);} .epp-dropzone.dragover{border-color:var(--brand);background:rgba(48,87,84,.09);} html.epp-dark .epp-dropzone.dragover{border-color:var(--lime);background:rgba(155,249,68,.12);} .epp-dz-ic{width:46px;height:46px;flex:0 0 auto;color:var(--brand);} html.epp-dark .epp-dz-ic{color:var(--lime);} .epp-dz-ic svg{width:46px;height:46px;display:block;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;} .epp-dz-title{font-size:14px;font-weight:800;color:var(--title);} .epp-dz-sub{font-size:12.5px;color:var(--muted);} .epp-dz-sub b{color:var(--brand);} html.epp-dark .epp-dz-sub b{color:var(--lime);} .epp-dz-file{margin-top:6px;font-size:13px;font-weight:700;color:var(--brand);display:inline-flex;align-items:center;gap:7px;} html.epp-dark .epp-dz-file{color:var(--lime);} .epp-dz-file svg{width:16px;height:16px;flex:0 0 auto;} /* Typographie reutilisable (.epp-prose) : titres, citations, code, listes... a la charte ePackPro. */ .epp-prose{color:var(--text);font-size:14px;line-height:1.6;} .epp-prose>:first-child{margin-top:0;} .epp-prose>:last-child{margin-bottom:0;} .epp-prose h1{font-size:25px;font-weight:800;color:var(--title);margin:0 0 10px;line-height:1.2;} .epp-prose h2{font-size:19px;font-weight:800;color:var(--title);margin:20px 0 8px;line-height:1.25;} .epp-prose h3{font-size:14px;font-weight:800;color:var(--title);margin:16px 0 6px;text-transform:uppercase;letter-spacing:.5px;} .epp-prose .lead{font-size:15.5px;color:var(--muted);margin:0 0 14px;font-weight:600;} .epp-prose p{margin:0 0 11px;} .epp-prose a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;font-weight:600;} html.epp-dark .epp-prose a{color:var(--lime);} .epp-prose strong{font-weight:800;color:var(--title);} .epp-prose em{font-style:italic;} .epp-prose small{font-size:12px;color:var(--muted);} .epp-prose mark{background:rgba(155,249,68,.5);color:var(--title);padding:0 3px;border-radius:3px;} /* Citation : largeur = contenu (max 500px), liseret gauche vert flashy epack. */ .epp-prose blockquote{width:max-content;max-width:500px;margin:0 0 12px;padding:9px 15px;border-left:3px solid var(--lime);background:var(--surface-2);border-radius:0 8px 8px 0;font-style:italic;} .epp-prose blockquote p{margin:0;} .epp-prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;background:var(--surface-2);border:1px solid var(--border);border-radius:5px;padding:1px 6px;color:var(--brand);} html.epp-dark .epp-prose code{color:var(--lime);} /* Bloc de code : meme rendu que l'affichage des prompts du tableau de bord projets (fond sombre, texte lime). Largeur = contenu (max 500px). */ .epp-prose pre{position:relative;width:max-content;max-width:500px;margin:0 0 12px;padding:38px 16px 14px;background:#0f1b19;color:#d7f7c0;border:1px solid var(--border-strong);border-radius:12px;overflow:auto;} .epp-prose pre code{background:none;border:none;padding:0;color:inherit;font-size:12px;line-height:1.55;display:block;white-space:pre;} /* Bouton Copier des blocs de code (meme rendu que l'affichage des prompts). Ajoute par JS (ui.js enhanceCodeBlocks). */ .epp-code-copy{position:absolute;top:8px;right:8px;background:var(--lime);color:var(--lime-ink);border:none;border-radius:8px;padding:5px 11px;font-size:11px;font-weight:800;cursor:pointer;white-space:nowrap;transition:filter .15s,background .15s,color .15s;z-index:1;} .epp-code-copy:hover{filter:brightness(1.06);} .epp-code-copy.ok{background:#2e9e5b;color:#fff;} .epp-prose ul,.epp-prose ol{margin:0 0 12px;padding-left:22px;} .epp-prose li{margin:3px 0;} .epp-prose hr{border:none;border-top:1px solid var(--brand);margin:16px 0;} html.epp-dark .epp-prose hr{border-top-color:var(--lime);} .epp-prose h4{font-size:13.5px;font-weight:800;color:var(--title);margin:14px 0 6px;} .epp-prose h5{font-size:12.5px;font-weight:800;color:var(--title);margin:12px 0 5px;} .epp-prose h6{font-size:11.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin:12px 0 5px;} .epp-prose del,.epp-prose s{color:var(--muted);text-decoration:line-through;} .epp-prose img{max-width:100%;height:auto;border-radius:10px;} .epp-prose table{border-collapse:collapse;font-size:13px;margin:0 0 12px;} .epp-prose th,.epp-prose td{border:1px solid var(--border-strong);padding:6px 11px;text-align:left;} .epp-prose thead th{background:var(--surface-2);font-weight:800;color:var(--title);} input[type=file]::file-selector-button{display:inline-flex;align-items:center;gap:7px;background:var(--brand);color:#fff;border:none;border-radius:10px;padding:8px 14px;margin-right:10px;font-weight:700;font-size:12.5px;cursor:pointer;transition:background .15s;} input[type=file]::file-selector-button:hover{background:var(--brand-700);} input[type=file]::-webkit-file-upload-button{display:inline-flex;align-items:center;background:var(--brand);color:#fff;border:none;border-radius:10px;padding:8px 14px;margin-right:10px;font-weight:700;font-size:12.5px;cursor:pointer;} html.epp-dark input[type=file]::file-selector-button{background:#4f9b86;color:#fff;} html.epp-dark input[type=file]::file-selector-button:hover{background:#3f8870;} html.epp-dark input[type=file]::-webkit-file-upload-button{background:#4f9b86;color:#fff;} /* Champ de recherche principal de la page (liste) mis en avant : bordure coloree d'emblee (clair = bleu, sombre = lime flashy). */ .field.search-main{border-width:2px;border-color:#3b82f6;} .field.search-main:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(48,87,84,.18);} html.epp-dark .field.search-main{border-color:var(--lime);} html.epp-dark .field.search-main:focus{border-color:var(--lime);box-shadow:0 0 0 3px rgba(155,249,68,.18);} /* Largeur homogene du champ de recherche de contenu sur toutes les pages (reference : Utilisateurs). Non extensible (flex-grow 0), aligne a gauche ; .content prefixe -> prime sur les .xxx-toolbar .grow par page. */ .content .grow:has(> .search-main){flex:0 1 680px;} /* Barre de filtres dediee (placee juste au-dessus de la pagination du haut). Commune aux listes. */ .filter-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;} .filter-bar .flt-lbl{font-size:12px;font-weight:700;color:var(--muted);margin-right:-2px;} /* Dropdowns custom (facon projet Division 2) : fleche SVG a l'accent, pas de fleche native. */ select.field{cursor:pointer;appearance:none;-webkit-appearance:none;padding-right:34px;background-repeat:no-repeat;background-position:right 11px center;background-size:14px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23305754' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");} html.epp-dark select.field{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BF944' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");} select.field:hover{border-color:var(--border-strong);} select.field option{background:var(--surface);color:var(--text);} /* Filtres */ .filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;} .filters .grow{flex:1 1 220px;min-width:160px;position:relative;display:flex;align-items:center;} .filters .grow .ico{position:absolute;left:11px;color:var(--muted);} .filters .grow input{width:100%;padding-left:36px;} /* Badges & pastilles */ .badge{display:inline-block;font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:6px;white-space:nowrap;line-height:1.3;color:#fff;} /* Badges de version = couleur de la generation (meme code couleur partout). */ .b-v5{background:var(--brand);color:#fff;} .b-v4{background:var(--blue);color:#fff;} .b-v3{background:#6b7b86;color:#fff;} .b-autre{background:var(--amber);color:#4a2f02;} html.epp-dark .b-v5{background:#4f9b86;} .b-al{background:var(--red);color:#fff;} .b-soft{background:var(--surface-2);color:var(--muted);border:1px solid var(--border);} .pill-status{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:999px;} .st-ok{background:rgba(34,197,94,.14);color:#1b7f45;} html.epp-dark .st-ok{color:#86efac;} .st-off{background:rgba(158,152,146,.18);color:#6b645e;} html.epp-dark .st-off{color:#c7c0b8;} .st-block{background:var(--red);color:#fff;} .dot{width:12px;height:12px;border-radius:50%;display:inline-block;vertical-align:middle;box-shadow:0 0 0 2px var(--surface);} .dot-g{background:var(--green);} .dot-o{background:var(--amber);} .dot-r{background:var(--red);} /* Type synchro (OLD/NEW) et sonde */ .b-new{background:var(--brand);color:#fff;} html.epp-dark .b-new{background:#4f9b86;} .b-old{background:rgba(124,115,104,1);color:#fff;} .b-probe{background:var(--surface-2);color:var(--muted);border:1px solid var(--border);} /* Copier/coller (helper partage eppMakeCopyBtn) */ /* Largeur fixe (englobe le "OK") -> le passage icone<->OK ne reflow plus la colonne. */ .epp-cell-copy{width:13px;min-width:13px;height:13px;background:none;border:none;cursor:pointer;padding:0;margin:0 0 0 3px;opacity:.5;vertical-align:middle;line-height:1;color:var(--brand);transition:opacity .12s,color .12s;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;} html.epp-dark .epp-cell-copy{color:var(--muted);} .epp-cell-copy:hover{opacity:1;color:var(--blue);} html.epp-dark .epp-cell-copy:hover{color:var(--lime);} .epp-cell-copy svg{width:11px;height:11px;fill:currentColor;display:block;} .epp-copy-ok{font-size:10px;color:#2e9e5b;font-weight:700;} html.epp-dark .epp-copy-ok{color:var(--lime);} .cv{color:inherit;} .cv.link{text-decoration:underline;text-underline-offset:2px;cursor:pointer;color:var(--brand);} html.epp-dark .cv.link{color:var(--mint,#86efac);} .cv.link:hover{filter:brightness(1.1);} .two-line{display:flex;flex-direction:column;gap:3px;} .two-line .ln{display:inline-flex;align-items:center;white-space:nowrap;} .two-line .tag{font-size:10px;font-weight:800;color:var(--muted);margin-right:5px;display:inline-flex;align-items:center;} .two-line .tag .trend{width:10px;height:10px;fill:currentColor;flex:0 0 auto;} /* Theme clair : fleches plus vives/petantes (vert transmission / bleu reception). */ .two-line .tag-up{color:#0fa84c;} .two-line .tag-dn{color:#1766ef;} html.epp-dark .two-line .tag-up{color:#86efac;} html.epp-dark .two-line .tag-dn{color:#93c5fd;} /* Tableau refonte */ .tbl-wrap{width:100%;overflow-x:auto;} table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;} table.tbl th,table.tbl td{padding:11px 14px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--border);vertical-align:middle;} /* Lignes du corps : padding vertical reduit (l'en-tete garde 11px). */ table.tbl tbody td{padding-top:6px;padding-bottom:6px;} /* En-tete de colonnes : fond deepgreen (charte ePackPro), texte clair. */ table.tbl thead th{position:sticky;top:0;background:var(--brand);color:#eef3f0;font-size:11px;font-weight:800; text-transform:uppercase;letter-spacing:.6px;cursor:default;z-index:1;} html.epp-dark table.tbl thead th{background:#223f39;color:#eef3f0;} /* En-tete (1ere ligne) : coins superieurs arrondis + bordure bas deepgreen (clair) / vert flashy (sombre). */ table.tbl thead th:first-child{border-top-left-radius:10px;} table.tbl thead th:last-child{border-top-right-radius:10px;} table.tbl thead th{border-bottom:1px solid var(--brand);} html.epp-dark table.tbl thead th{border-bottom:1px solid var(--lime);} /* Bord gauche de chaque ligne du CORPS (en-tete exclu) : deepgreen (clair) / vert flashy (sombre). */ table.tbl tbody td:first-child{border-left:1px solid var(--brand);} html.epp-dark table.tbl tbody td:first-child{border-left-color:var(--lime);} table.tbl thead th.sortable{cursor:pointer;} table.tbl thead th.sortable:hover{color:var(--lime);} html.epp-dark table.tbl thead th.sortable:hover{color:var(--lime);} table.tbl tbody tr{transition:background .12s;} /* Zebra : 1 ligne sur 2 change de fond (la 1ere garde le fond courant). */ table.tbl tbody tr:nth-child(2n){background:var(--surface-2);} /* Survol (garde l'effet, distinct du zebra). */ table.tbl tbody tr:hover{background:var(--row-hover);} /* Shade each cell so row striping and semantic row colors cannot hide hover. */ table.tbl tbody tr:hover>td,.as-demo-table tbody tr:hover>td,.as-country-table tbody tr:hover>td{background-image:linear-gradient(rgba(0,0,0,.075),rgba(0,0,0,.075))!important;} table.tbl td.c,table.tbl th.c{text-align:center;} table.tbl .ens{font-weight:700;color:var(--title);} table.tbl .sub{font-size:11px;color:var(--muted);font-weight:600;} /* Lignes a fond specifique (solution cloturee / compte bloque) : fond rouge pale applique sur les TD -> prime sur le zebra ET le survol (td peint par-dessus tr). */ table.tbl tbody tr.closed td,table.tbl tbody tr.blocked td{background:rgba(224,32,32,.07);} table.tbl tbody tr.closed:hover td,table.tbl tbody tr.blocked:hover td{background:rgba(224,32,32,.12);} html.epp-dark table.tbl tbody tr.closed td,html.epp-dark table.tbl tbody tr.blocked td{background:rgba(224,32,32,.14);} html.epp-dark table.tbl tbody tr.closed:hover td,html.epp-dark table.tbl tbody tr.blocked:hover td{background:rgba(224,32,32,.2);} .rownum{color:var(--muted);font-size:11px;font-weight:700;} .cbx{width:16px;height:16px;accent-color:var(--brand);cursor:pointer;} .actions{display:inline-flex;gap:4px;} /* Pagination */ /* Padding vertical SYMETRIQUE : sinon les elements en absolu (info, bouton Verifier) centres sur top:50% du padding-box ne s'alignent pas avec les boutons de page centres dans le content-box. */ .pager{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 18px;flex-wrap:wrap;} .pager .info{position:absolute;left:18px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--muted);font-weight:600;} /* Pagination AU-DESSUS du tableau (dans le corps deja padde) : pas de padding horizontal, info calee a gauche. */ /* Espacement pagination haut -> tableau = espacement tableau -> pagination bas = 12px. */ .pager.pager-top{padding:0;margin-bottom:12px;} .pager.pager-top .info{left:0;} /* ---- Conteneur "fit" : filtres + sous-filtres + paginations cales sur la largeur reelle du tableau. La largeur de .epp-fit est posee en JS (eppSyncFits) = min(largeur tableau, place dispo). ---- */ .epp-fit{display:block;max-width:100%;} .epp-fit > .filter-bar,.epp-fit > .cfg-filters,.epp-fit > .pager,.epp-fit > .oa{width:100%;box-sizing:border-box;} .epp-fit > .pager{padding:0;} .epp-fit > .pager .info{left:0;} .epp-fit > .pager:not(.pager-top){margin-top:12px;} /* pagination du bas (dans le fit) : 12px sous le tableau */ /* Bouton "Verifier ..." colle au bord droit de la ligne de pagination du haut (= bord droit du tableau), reduit a la hauteur des boutons de page (30px). */ .pager.pager-top .pager-verify{position:absolute;right:0;top:50%;transform:translateY(-50%);height:30px;padding:0 9px;gap:5px;font-weight:400;} /* Boutons "Verifier ..." : texte + icone en blanc (lisible sur le fond vert du plugin). */ .btn-oa.pager-verify{color:#fff;} html.epp-dark .btn-oa.pager-verify{color:#fff;} /* Pagination : meme systeme segmente que les filtres (.seg-ctl) - groupe borde, boutons jointifs sans espacement, coins arrondis seulement a l'exterieur. */ .pages{display:inline-flex;align-items:stretch;border:1px solid var(--brand);border-radius:8px;overflow:hidden;} html.epp-dark .pages{border-color:#4f9b86;} .pages button,.pages .pg-dots{min-width:30px;min-height:28px;padding:4px 9px;border:none;border-radius:0;background:var(--surface);color:var(--brand); font-size:12.5px;font-weight:600;line-height:1;cursor:pointer;transition:background .15s,color .15s;display:inline-flex;align-items:center;justify-content:center;} html.epp-dark .pages button,html.epp-dark .pages .pg-dots{background:var(--surface-2);color:var(--text);} .pages button:hover:not(:disabled),.pages button.active{background:var(--brand);color:#fff;} html.epp-dark .pages button:hover:not(:disabled),html.epp-dark .pages button.active{background:#4f9b86;color:#fff;} .pages button:disabled{opacity:.4;cursor:not-allowed;} /* Fleches en SVG (centrage identique garanti, contrairement aux glyphes ‹ ›). */ .pages .pg-arrow{padding:4px 8px;} .pages .pg-arrow svg{width:13px;height:13px;display:block;} .pages .pg-dots{color:var(--muted);font-weight:700;user-select:none;cursor:default;} .pg-todo{padding:48px 24px;text-align:center;color:var(--muted);font-size:14px;font-style:italic;} /* Bouton "Remonter en haut" (repris du plugin : deepgreen + chevron lime, survol bleu fonce). */ #epp-scroll-top{position:fixed;right:22px;bottom:22px;width:44px;height:44px;border-radius:50%;border:none;background:var(--brand);color:var(--lime);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,.3);z-index:1040;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s,visibility .2s,transform .2s,background .2s,color .2s;} #epp-scroll-top.show{opacity:1;visibility:visible;transform:translateY(0);} #epp-scroll-top:hover{background:#273a80;color:#fff;transform:translateY(-2px);} #epp-scroll-top svg{width:20px;height:20px;fill:currentColor;display:block;} /* Options avancees (panneau repliable) */ .oa{border:1px solid var(--border);border-radius:14px;background:var(--surface-2);overflow:hidden;} .oa-h{display:flex;align-items:center;gap:10px;padding:12px 15px;cursor:pointer;font-weight:800;color:var(--title);font-size:13px;} .oa-h .chev{margin-left:auto;transition:transform .18s;width:16px;height:16px;color:var(--muted);} .oa.open .oa-h .chev{transform:rotate(180deg);} .oa-b{display:grid;max-height:0;opacity:0;overflow:hidden;padding:0 15px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;transition:max-height .3s ease-in-out,opacity .22s ease-in-out,padding .3s ease-in-out;} .oa.open .oa-b{max-height:340px;opacity:1;padding:0 15px 15px;} .oa-b label{display:flex;flex-direction:column;gap:5px;font-size:11.5px;font-weight:700;color:var(--muted);} /* Les champs des options avancees remplissent leur cellule pour rester lisibles (placeholder non tronque). */ .oa-b label .field,.oa-b label .epp-sel,.oa-b label select{width:100%;box-sizing:border-box;} .foot{text-align:center;padding:8px 0 2px;font-size:11.5px;color:var(--muted);} .foot b{color:var(--brand);} html.epp-dark .foot b{color:var(--lime);} .foot-logo{height:22px;width:auto;vertical-align:middle;} .foot-logo-w{display:none;} html.epp-dark .foot-logo-dg{display:none;} html.epp-dark .foot-logo-w{display:inline;} /* ---- Calendrier custom (charte ePackPro) : remplace le picker natif ---- */ .epp-datefield{position:relative;display:inline-flex;align-items:center;} .epp-datefield .epp-date-input{padding-right:34px;cursor:pointer;} .epp-cal-btn{position:absolute;right:5px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:none;background:transparent;color:var(--brand);cursor:pointer;border-radius:7px;padding:0;} html.epp-dark .epp-cal-btn{color:var(--lime);} .epp-cal-btn:hover{background:var(--row-hover);} .epp-cal-btn svg{width:17px;height:17px;} .epp-cal{position:fixed;z-index:1200;width:266px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:11px;display:none;} .epp-cal.open{display:block;} .epp-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;} .epp-cal-title{font-weight:800;color:var(--title);font-size:13.5px;} .epp-cal-nav{width:28px;height:28px;border:1px solid var(--border);background:var(--surface);border-radius:8px;color:var(--title);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;} .epp-cal-nav:hover{background:var(--brand);border-color:var(--brand);color:#fff;} html.epp-dark .epp-cal-nav:hover{background:#4f9b86;border-color:#4f9b86;color:#fff;} .epp-cal-nav svg{width:17px;height:17px;} .epp-cal-wds,.epp-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);} .epp-cal-wds{margin-bottom:3px;} .epp-cal-wd{text-align:center;font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;padding:3px 0;} .epp-cal-day{height:32px;border:none;background:transparent;border-radius:8px;color:var(--title);font-size:12.5px;font-weight:600;cursor:pointer;padding:0;} .epp-cal-day.oth{opacity:.4;} .epp-cal-day.we:not(.sel){color:var(--brand);} html.epp-dark .epp-cal-day.we:not(.sel){color:#4f9b86;} .epp-cal-day:hover{background:var(--row-hover);} .epp-cal-day.today:not(.sel){box-shadow:inset 0 0 0 1.5px var(--brand);} html.epp-dark .epp-cal-day.today:not(.sel){box-shadow:inset 0 0 0 1.5px var(--lime);} .epp-cal-day.sel{background:var(--brand);color:#fff;} html.epp-dark .epp-cal-day.sel{background:var(--lime);color:var(--lime-ink);} .epp-cal-foot{display:flex;justify-content:space-between;margin-top:9px;padding-top:9px;border-top:1px solid var(--border);} .epp-cal-clear,.epp-cal-today{border:none;background:transparent;font-size:12px;font-weight:700;cursor:pointer;padding:5px 9px;border-radius:8px;} .epp-cal-clear{color:var(--muted);} .epp-cal-clear:hover{color:#fff;background:var(--red);} .epp-cal-today{color:var(--brand);} html.epp-dark .epp-cal-today{color:var(--lime);} .epp-cal-today:hover{background:var(--row-hover);} /* ---- Menu deroulant custom (charte ePackPro) : remplace la liste native des