/* Couche UI commune XRbentsh (dash + OPS). Tout est prefixe x- : aucun selecteur existant n est touche, les pages gardent leur CSS inline. Tokens AA : --ter a 5,1:1 sur --card, --mut a 6,2:1. */ :root{color-scheme:dark;--bg:#0a0e13;--card:#10161d;--card2:#161e27;--line:#1e2833;--line2:#273240; --txt:#e8edf2;--mut:#8b98a5;--ter:#7d8a97;--blue:#3d9ed7;--blueb:#5db4e8;--grn:#4ade80;--amb:#e3b341;--red:#f0736a; --ok:var(--grn);--warn:var(--amb);--danger:var(--red);--info:var(--blue); --fs-xs:12px;--fs-sm:13px;--fs-md:15px;--fs-lg:17px;--fs-xl:24px;--r-sm:8px;--r-md:12px;--r-lg:14px; --sh:0 8px 24px rgba(0,0,0,.35)} /* Theme jour (Lucas 17/09) : UN seul choix pour le dash et OPS. xr.js pose avant tout rendu : cookie theme sur .xrbentsh.com, sinon le reglage du telephone. Les pages ne redefinissent que leurs tokens sombres ; cette palette gagne par specificite. AA : --ter 4,8:1 sur --card2. */ :root[data-theme="light"]{color-scheme:light;--bg:#f4f6f9;--card:#ffffff;--card2:#f0f3f7;--line:#dde3ea;--line2:#c9d2dc; --txt:#14202b;--mut:#5b6773;--ter:#5f6b77;--blue:#1f6fb2;--blueb:#2b86cf;--grn:#1d8f4e;--amb:#b07a00;--red:#b3261e; --sh:0 4px 14px rgba(20,32,43,.08)} :root[data-theme="light"] .x-btn.pri{color:#fff} /* etiquette PUSH ON / OFF (mail a chaque candidat pousse) : la meme sur le dash et OPS */ .gtag{font-size:12px;font-weight:800;padding:2px 7px;border-radius:6px;letter-spacing:.5px;white-space:nowrap} .gtag.on{background:rgba(74,222,128,.15);color:var(--grn);border:1px solid rgba(74,222,128,.4)} .gtag.off{background:var(--card2);color:var(--ter);border:1px solid var(--line)} /* barre d onglets du dash en theme jour */ :root[data-theme="light"] .x-tabbar{background:rgba(244,246,249,.96);border-top-color:#dde3ea} :root[data-theme="light"] .x-tabbar a{color:#5b6773}:root[data-theme="light"] .x-tabbar a.on{color:#1f6fb2} /* bouton jour / nuit (xr.theme.bouton, rempli par xr.js) */ .x-theme{min-height:36px;padding:6px 11px;font-size:13px;gap:6px;flex:none} .x-theme svg{width:16px;height:16px} /* l attribut hidden gagne toujours, meme sur un element en display:flex (.selcol) */ [hidden]{display:none!important} :focus-visible{outline:2px solid var(--blueb);outline-offset:2px} @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}} .x-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .x-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%} /* boutons */ .x-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:10px 14px; border-radius:var(--r-md);border:1px solid var(--line2);background:var(--card2);color:var(--txt); font-family:inherit;font-size:14px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer; touch-action:manipulation;-webkit-tap-highlight-color:transparent;width:auto;white-space:nowrap} .x-btn svg{width:18px;height:18px;flex:none} .x-btn:active{opacity:.7} .x-btn[disabled],.x-btn.occupe{opacity:.5;pointer-events:none} .x-btn.pri{background:var(--blue);border-color:var(--blue);color:#04121c} .x-btn.dgr{background:rgba(240,115,106,.1);border-color:rgba(240,115,106,.35);color:var(--red)} .x-btn.ghost{background:transparent;border-color:transparent;color:var(--mut)} .x-btn.sm{min-height:36px;padding:6px 12px;font-size:13px} .x-row{display:flex;gap:8px;align-items:stretch} .x-row>.x-btn{flex:1;min-width:0} .x-row>.x-menu{flex:none} /* menu "plus d actions" : details natif, ferme au clic dehors et a Echap (xr.js) */ .x-menu{position:relative;display:inline-block} .x-menu>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px; border-radius:var(--r-md);border:1px solid var(--line2);background:var(--card2);color:var(--txt);cursor:pointer; touch-action:manipulation;-webkit-tap-highlight-color:transparent;font-size:20px;font-weight:700;line-height:1} .x-menu>summary::-webkit-details-marker{display:none} .x-menu>summary svg{width:20px;height:20px} .x-menu[open]>summary{border-color:var(--blue);color:var(--blueb)} .x-list{position:absolute;right:0;top:calc(100% + 6px);min-width:230px;background:var(--card);border:1px solid var(--line2); border-radius:var(--r-md);box-shadow:0 14px 40px rgba(0,0,0,.55);padding:6px;z-index:30; max-height:calc(100dvh - 160px);overflow-y:auto;overscroll-behavior:contain} .x-menu.up .x-list{top:auto;bottom:calc(100% + 6px)} .x-menu.left .x-list{right:auto;left:0} .x-item{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:10px 12px;border:0;border-radius:var(--r-sm); background:none;color:var(--txt);font-family:inherit;font-size:14px;font-weight:500;line-height:1.3;text-align:left; text-decoration:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;white-space:nowrap} .x-item svg{width:18px;height:18px;flex:none;color:var(--mut)} .x-item:active,.x-item:hover{background:var(--card2)} .x-item.dgr{color:var(--red)}.x-item.dgr svg{color:var(--red)} .x-item.ok{color:var(--grn)}.x-item.ok svg{color:var(--grn)} .x-item.warn{color:var(--amb)}.x-item.warn svg{color:var(--amb)} /* section repliable */ .x-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px; min-height:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent} .x-fold>summary::-webkit-details-marker{display:none} .x-fold>summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut); transform:rotate(45deg);margin:0 6px 4px 0;transition:transform .15s} .x-fold[open]>summary::after{transform:rotate(-135deg);margin:4px 6px 0 0} /* confirmation centree et feuille en bas d ecran */ .x-dialog,.x-sheet{border:0;padding:0;background:transparent;color:var(--txt);font-family:inherit;max-width:100vw;max-height:100dvh} .x-dialog{margin:auto;width:min(92vw,380px)} .x-sheet{margin:auto 0 0;width:100vw} .x-dialog::backdrop,.x-sheet::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(3px)} .x-dlg-in{background:var(--card);border:1px solid var(--line2);border-radius:16px;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.6)} .x-sheet-in{background:var(--card);border-top:1px solid var(--line2);border-radius:16px 16px 0 0; padding:14px 16px calc(16px + env(safe-area-inset-bottom));max-height:80dvh;overflow:auto} .x-dlg-t{font-size:var(--fs-lg);font-weight:700;margin:0 0 10px;letter-spacing:-.2px} .x-dlg-p{margin:0 0 16px;white-space:pre-wrap;font-size:var(--fs-md);line-height:1.45;color:var(--txt)} .x-sheet .x-item{min-height:48px;font-size:15px;border-bottom:1px solid var(--line);border-radius:0} .x-sheet .x-item:last-of-type{border-bottom:0} .x-sheet .x-btn.ghost{width:100%;margin-top:8px} /* Empilement, valeurs de reference : onglets 6, barre d actions 7, file d annulation 20, tabbar 50, barre d actions quand un menu est ouvert 60, toast 99. .x-actionbar est fixed AVEC z-index : elle cree un contexte d empilement, donc le z-index:30 du menu ne vaut QUE dedans. Sans le relevement ci dessous, la file d annulation (20) passait par dessus le menu ouvert de la fiche candidat et deux items sur trois devenaient incliquables (capture iPhone de Lucas, 16/09/2026). */ body.x-menu-ouvert .x-actionbar{z-index:60} /* barre d actions fixe (au dessus des onglets d OPS via --x-bar-bottom) */ .x-actionbar{position:fixed;left:0;right:0;bottom:var(--x-bar-bottom,0);z-index:7; padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(10,14,19,.94); backdrop-filter:blur(12px);border-top:1px solid var(--line)} /* cartes, pastilles, tuiles */ .x-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:10px; box-shadow:0 8px 24px rgba(0,0,0,.35)} .x-pill{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:700;padding:3px 9px;border-radius:20px; border:1px solid var(--line2);background:var(--card2);color:var(--mut);white-space:nowrap;letter-spacing:.2px} .x-pill.ok{color:var(--grn);border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.1)} .x-pill.warn{color:var(--amb);border-color:rgba(227,179,65,.35);background:rgba(227,179,65,.1)} .x-pill.dgr{color:var(--red);border-color:rgba(240,115,106,.4);background:rgba(240,115,106,.1)} .x-pill.info{color:var(--blueb);border-color:rgba(61,158,215,.4);background:rgba(61,158,215,.12)} .x-pill.mut{color:var(--ter)} /* chaine des colonnes Atimeus : memes couleurs que les colonnes des cartes OPS */ .x-c-qualifier{--t:#58a6ff;--f:#0d1b2a;--b:#1f6feb55} .x-c-contacter{--t:#bc8cff;--f:#1a1226;--b:#8957e555} .x-c-entretien{--t:#f0883e;--f:#241a10;--b:#bb681f55} .x-c-pushe{--t:#7ee2a8;--f:#0f1f16;--b:#2ea04355} .x-c-klif{--t:#39d3bb;--f:#0d1f1d;--b:#1f6f6355} .x-c-proposition{--t:#e3b341;--f:#221c0d;--b:#9e6a0355} .x-chips{display:flex;flex-wrap:wrap;gap:5px} .x-chips.nowrap{flex-wrap:nowrap} .x-chip{position:relative;display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);line-height:1.25;padding:3px 8px; border-radius:8px;border:1px solid var(--b,var(--line2));background:var(--f,var(--card2));color:var(--t,var(--mut)); white-space:nowrap;text-decoration:none;font-weight:500} .x-chip b{font-weight:700;color:var(--t,var(--txt))} a.x-chip::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:44px;min-height:100%;transform:translateY(-50%)} a.x-chip:active{opacity:.7} .x-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} @media(min-width:560px){.x-kpis{grid-template-columns:repeat(4,1fr)}} .x-kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px} .x-kpi .v{font-size:22px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.3px} .x-kpi .l{color:var(--mut);font-size:var(--fs-xs);margin-top:6px;font-weight:600} /* toast accessible */ #xrtoast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(8px);background:var(--card2); border:1px solid var(--line2);color:var(--txt);padding:12px 20px;border-radius:12px;font-size:14px;font-weight:600; opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;z-index:99;box-shadow:0 14px 40px rgba(0,0,0,.6);max-width:88vw} #xrtoast.on{opacity:1;transform:translateX(-50%) translateY(0)} /* barre d onglets du bas du dash, identique a celle d OPS (Lucas 15/09) */ .x-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;background:rgba(10,14,19,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid #1e2833;padding-bottom:env(safe-area-inset-bottom)} .x-tabbar a{flex:1;position:relative;text-align:center;color:#8b949e;font-size:12px;font-weight:500;padding:11px 4px 9px;text-decoration:none} .x-tabbar a.on{color:#5db4e8} .x-tabbar i{display:block;font-size:21px;font-style:normal;margin-bottom:2px} .x-tabbar span{position:absolute;top:2px;left:calc(50% + 6px);background:#c2185b;color:#fff;border-radius:9px;font-size:11px;padding:1px 5px;font-weight:700} .x-tabbar span[hidden]{display:none} body.x-avec-tabbar{padding-bottom:calc(env(safe-area-inset-bottom) + 76px)!important} @media(min-width:900px){.x-tabbar{justify-content:center}.x-tabbar a{max-width:180px}}