/* Les icones de l'interface, ecrites une fois ici plutot que reclamees une par une a un service exterieur : cent quatre allers-retours en moins a chaque ouverture. */ :root{ --ic-019740db57:url("data:image/svg+xml,%20%20"); --ic-06b97260c8:url("data:image/svg+xml,%20%20"); --ic-0ce9e7ccf1:url("data:image/svg+xml,%20%20"); --ic-0f0adbdb47:url("data:image/svg+xml,%20%20"); --ic-0fb2d659fd:url("data:image/svg+xml,%20%20"); --ic-10a6feeb00:url("data:image/svg+xml,%20%20"); --ic-143864f909:url("data:image/svg+xml,%20%20"); --ic-14e3a3fb48:url("data:image/svg+xml,%20%20"); --ic-18366e0872:url("data:image/svg+xml,%20%20"); --ic-19cca59394:url("data:image/svg+xml,%20%20"); --ic-1a08ef5dc3:url("data:image/svg+xml,%20%20"); --ic-1e281c4d54:url("data:image/svg+xml,%20%20"); --ic-212b8d2b62:url("data:image/svg+xml,%20%20%20"); --ic-226ddd2b0e:url("data:image/svg+xml,%20%20"); --ic-2395684932:url("data:image/svg+xml,%20%20"); --ic-24c2322037:url("data:image/svg+xml,%20%20"); --ic-26479c68c2:url("data:image/svg+xml,%20%20"); --ic-2b8f615591:url("data:image/svg+xml,%20%20"); --ic-3582a9c241:url("data:image/svg+xml,%20%20"); --ic-370e5f257a:url("data:image/svg+xml,%20%20"); --ic-3cb80232f9:url("data:image/svg+xml,%20%20"); --ic-3e4ba1842c:url("data:image/svg+xml,%20%20"); --ic-3eb4ae5db6:url("data:image/svg+xml,%20%20"); --ic-41b20cdbd3:url("data:image/svg+xml,%20%20"); --ic-4236eb5bd1:url("data:image/svg+xml,%20%20"); --ic-488fe19b9a:url("data:image/svg+xml,%20%20"); --ic-4de7b8976e:url("data:image/svg+xml,%20%20"); --ic-4e39c3b8e9:url("data:image/svg+xml,%20%20"); --ic-5303904f26:url("data:image/svg+xml,%20%20"); --ic-5ebf791c32:url("data:image/svg+xml,%20%20"); --ic-6103f484c3:url("data:image/svg+xml,%20%20"); --ic-614a009970:url("data:image/svg+xml,%20%20"); --ic-664f65c01f:url("data:image/svg+xml,%20%20"); --ic-6ac4f903fa:url("data:image/svg+xml,%20%20"); --ic-6eb86d826e:url("data:image/svg+xml,%20%20"); --ic-71429149e3:url("data:image/svg+xml,%20%20"); --ic-71fc841d09:url("data:image/svg+xml,%20%20"); --ic-722a871378:url("data:image/svg+xml,%20%20"); --ic-72bfbce587:url("data:image/svg+xml,%20%20"); --ic-733ac7ce06:url("data:image/svg+xml,%20%20"); --ic-7494eaa29a:url("data:image/svg+xml,%20%20"); --ic-7eb4aaaa42:url("data:image/svg+xml,%20%20"); --ic-84b21392cc:url("data:image/svg+xml,%20%20"); --ic-862c3bf6ff:url("data:image/svg+xml,%20%20"); --ic-87505fe1f7:url("data:image/svg+xml,%20%20"); --ic-89227d4edd:url("data:image/svg+xml,%20%20"); --ic-8d9e4bbb8b:url("data:image/svg+xml,%20%20"); --ic-8df30dcfe4:url("data:image/svg+xml,%20%20"); --ic-901ec93181:url("data:image/svg+xml,%20%20"); --ic-923088772a:url("data:image/svg+xml,%20%20"); --ic-929702dbfe:url("data:image/svg+xml,%20%20"); --ic-9500a5affa:url("data:image/svg+xml,%20%20"); --ic-9734b20537:url("data:image/svg+xml,%20%20"); --ic-98c1e3e210:url("data:image/svg+xml,%20%20"); --ic-99de9b5920:url("data:image/svg+xml,%20%20"); --ic-9be597556f:url("data:image/svg+xml,%20%20"); --ic-9f8d8a044d:url("data:image/svg+xml,%20%20"); --ic-a1e8714b96:url("data:image/svg+xml,%20%20"); --ic-a30de93c9c:url("data:image/svg+xml,%20%20"); --ic-a4b1c8fc60:url("data:image/svg+xml,%20%20"); --ic-a78ea192e7:url("data:image/svg+xml,%20%20"); --ic-a843e89b76:url("data:image/svg+xml,%20%20"); --ic-a957ee0a61:url("data:image/svg+xml,%20%20"); --ic-abc96c185b:url("data:image/svg+xml,%20%20"); --ic-ad9f3bab14:url("data:image/svg+xml,%20%20"); --ic-ae557d49ba:url("data:image/svg+xml,%20%20"); --ic-b10dd270e1:url("data:image/svg+xml,%20%20"); --ic-b4b2d94aa0:url("data:image/svg+xml,%20%20"); --ic-b7163b4eff:url("data:image/svg+xml,%20%20"); --ic-b73f51e3c6:url("data:image/svg+xml,%20%20"); --ic-b9c879ba07:url("data:image/svg+xml,%20%20"); --ic-ba75197a48:url("data:image/svg+xml,%20%20"); --ic-c064183dec:url("data:image/svg+xml,%20%20"); --ic-c09d9bc8d3:url("data:image/svg+xml,%20%20"); --ic-c238d48cd6:url("data:image/svg+xml,%20%20"); --ic-c60c59cf7b:url("data:image/svg+xml,%20%20"); --ic-c62089fd9b:url("data:image/svg+xml,%20%20"); --ic-c81d233275:url("data:image/svg+xml,%20%20"); --ic-c9d7780647:url("data:image/svg+xml,%20%20"); --ic-cbf7db5078:url("data:image/svg+xml,%20%20"); --ic-cca2e0e898:url("data:image/svg+xml,%20%20"); --ic-cdcf2985e9:url("data:image/svg+xml,%20%20"); --ic-cea67ea382:url("data:image/svg+xml,%20%20"); --ic-d3786eeb3a:url("data:image/svg+xml,%20%20"); --ic-d42009c2cf:url("data:image/svg+xml,%20%20"); --ic-d70f10a949:url("data:image/svg+xml,%20%20"); --ic-d79a8b5cbf:url("data:image/svg+xml,%20%20"); --ic-d86acebe3c:url("data:image/svg+xml,%20%20"); --ic-d885fe041f:url("data:image/svg+xml,%20%20"); --ic-e4d9f38227:url("data:image/svg+xml,%20%20"); --ic-e5a4784f93:url("data:image/svg+xml,%20%20"); --ic-e8f7223c7d:url("data:image/svg+xml,%20%20"); --ic-ed78f47dfc:url("data:image/svg+xml,%20%20"); --ic-eef951ed32:url("data:image/svg+xml,%20%20"); --ic-f0d3b9e492:url("data:image/svg+xml,%20%20"); --ic-f194996bda:url("data:image/svg+xml,%20%20"); --ic-f1adfb1b53:url("data:image/svg+xml,%20%20"); --ic-f282edc04d:url("data:image/svg+xml,%20%20"); --ic-fda4ef800f:url("data:image/svg+xml,%20%20"); --ic-fe0093e678:url("data:image/svg+xml,%20%20"); } /* Icones : une classe par icone, au lieu de recopier l'URL a chaque usage. */ .ico-plug-connected{-webkit-mask-image:var(--ic-18366e0872);mask-image:var(--ic-18366e0872)} .ico-sparkle{-webkit-mask-image:var(--ic-9be597556f);mask-image:var(--ic-9be597556f)} .ico-gift{-webkit-mask-image:var(--ic-c238d48cd6);mask-image:var(--ic-c238d48cd6)} .ico-chevron-down{-webkit-mask-image:var(--ic-abc96c185b);mask-image:var(--ic-abc96c185b)} .ico-note-edit{-webkit-mask-image:var(--ic-06b97260c8);mask-image:var(--ic-06b97260c8)} .ico-people{-webkit-mask-image:var(--ic-99de9b5920);mask-image:var(--ic-99de9b5920)} .ico-target{-webkit-mask-image:var(--ic-4e39c3b8e9);mask-image:var(--ic-4e39c3b8e9)} .ico-scales{-webkit-mask-image:var(--ic-f0d3b9e492);mask-image:var(--ic-f0d3b9e492)} .ico-arrow-import{-webkit-mask-image:var(--ic-d79a8b5cbf);mask-image:var(--ic-d79a8b5cbf)} .ico-chart-multiple{-webkit-mask-image:var(--ic-733ac7ce06);mask-image:var(--ic-733ac7ce06)} .ico-people-search{-webkit-mask-image:var(--ic-26479c68c2);mask-image:var(--ic-26479c68c2)} .ico-people-team{-webkit-mask-image:var(--ic-c09d9bc8d3);mask-image:var(--ic-c09d9bc8d3)} .ico-clipboard-checkmark{-webkit-mask-image:var(--ic-f282edc04d);mask-image:var(--ic-f282edc04d)} .ico-people-checkmark{-webkit-mask-image:var(--ic-e8f7223c7d);mask-image:var(--ic-e8f7223c7d)} .ico-scale-fill{-webkit-mask-image:var(--ic-5ebf791c32);mask-image:var(--ic-5ebf791c32)} .ico-lightbulb{-webkit-mask-image:var(--ic-24c2322037);mask-image:var(--ic-24c2322037)} .ico-bot{-webkit-mask-image:var(--ic-b73f51e3c6);mask-image:var(--ic-b73f51e3c6)} .ico-briefcase{-webkit-mask-image:var(--ic-b10dd270e1);mask-image:var(--ic-b10dd270e1)} .ico-star{-webkit-mask-image:var(--ic-ae557d49ba);mask-image:var(--ic-ae557d49ba)} .ico-clipboard{-webkit-mask-image:var(--ic-b4b2d94aa0);mask-image:var(--ic-b4b2d94aa0)} .ico-clock{-webkit-mask-image:var(--ic-2b8f615591);mask-image:var(--ic-2b8f615591)} .ico-question-circle{-webkit-mask-image:var(--ic-19cca59394);mask-image:var(--ic-19cca59394)} .ico-weather-sunny{-webkit-mask-image:var(--ic-d3786eeb3a);mask-image:var(--ic-d3786eeb3a)} .ico-person-add{-webkit-mask-image:var(--ic-a78ea192e7);mask-image:var(--ic-a78ea192e7)} .ico-settings{-webkit-mask-image:var(--ic-eef951ed32);mask-image:var(--ic-eef951ed32)} .ico-eye{-webkit-mask-image:var(--ic-89227d4edd);mask-image:var(--ic-89227d4edd)} .ico-shield-person{-webkit-mask-image:url(https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@main/assets/Shield%20Person/SVG/ic_fluent_shield_person_24_regular.svg);mask-image:url(https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@main/assets/Shield%20Person/SVG/ic_fluent_shield_person_24_regular.svg)} .ico-shield-checkmark{-webkit-mask-image:var(--ic-cea67ea382);mask-image:var(--ic-cea67ea382)} .ico-image-edit{-webkit-mask-image:var(--ic-a957ee0a61);mask-image:var(--ic-a957ee0a61)} .ico-key{-webkit-mask-image:var(--ic-9500a5affa);mask-image:var(--ic-9500a5affa)} .ico-sign-out{-webkit-mask-image:var(--ic-3582a9c241);mask-image:var(--ic-3582a9c241)} .ico-arrow-trending-lines{-webkit-mask-image:var(--ic-7eb4aaaa42);mask-image:var(--ic-7eb4aaaa42)} .ico-warning{-webkit-mask-image:var(--ic-0ce9e7ccf1);mask-image:var(--ic-0ce9e7ccf1)} .ico-person-search{-webkit-mask-image:var(--ic-26479c68c2);mask-image:var(--ic-26479c68c2)} .ico-clipboard-paste{-webkit-mask-image:var(--ic-9734b20537);mask-image:var(--ic-9734b20537)} .ico-folder{-webkit-mask-image:var(--ic-fe0093e678);mask-image:var(--ic-fe0093e678)} .ico-mail-inbox{-webkit-mask-image:var(--ic-2395684932);mask-image:var(--ic-2395684932)} .ico-select-all-on{-webkit-mask-image:var(--ic-9f8d8a044d);mask-image:var(--ic-9f8d8a044d)} .ico-mail{-webkit-mask-image:var(--ic-614a009970);mask-image:var(--ic-614a009970)} .ico-delete{-webkit-mask-image:var(--ic-d885fe041f);mask-image:var(--ic-d885fe041f)} .ico-flash{-webkit-mask-image:var(--ic-a1e8714b96);mask-image:var(--ic-a1e8714b96)} .ico-document-multiple{-webkit-mask-image:var(--ic-212b8d2b62);mask-image:var(--ic-212b8d2b62)} .ico-document-pdf{-webkit-mask-image:var(--ic-370e5f257a);mask-image:var(--ic-370e5f257a)} .ico-table-simple{-webkit-mask-image:var(--ic-c62089fd9b);mask-image:var(--ic-c62089fd9b)} .ico-cloud-arrow-up{-webkit-mask-image:var(--ic-41b20cdbd3);mask-image:var(--ic-41b20cdbd3)} .ico-checkmark{-webkit-mask-image:var(--ic-d70f10a949);mask-image:var(--ic-d70f10a949)} .ico-arrow-sync{-webkit-mask-image:var(--ic-4de7b8976e);mask-image:var(--ic-4de7b8976e)} .ico-flowchart{-webkit-mask-image:var(--ic-cbf7db5078);mask-image:var(--ic-cbf7db5078)} .ico-data-usage{-webkit-mask-image:var(--ic-6ac4f903fa);mask-image:var(--ic-6ac4f903fa)} .ico-data-bar-vertical{-webkit-mask-image:var(--ic-84b21392cc);mask-image:var(--ic-84b21392cc)} .ico-info{-webkit-mask-image:var(--ic-1a08ef5dc3);mask-image:var(--ic-1a08ef5dc3)} .ico-rocket{-webkit-mask-image:var(--ic-e5a4784f93);mask-image:var(--ic-e5a4784f93)} .ico-book-open{-webkit-mask-image:var(--ic-8df30dcfe4);mask-image:var(--ic-8df30dcfe4)} .ico-edit-settings{-webkit-mask-image:var(--ic-10a6feeb00);mask-image:var(--ic-10a6feeb00)} .ico-document-pdf-2{-webkit-mask-image:url(https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@main/assets/Document%20Pdf/SVG/ic_fluent_document_pdf_24_regular.svg);mask-image:url(https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@main/assets/Document%20Pdf/SVG/ic_fluent_document_pdf_24_regular.svg)} .ico-add-circle{-webkit-mask-image:var(--ic-cdcf2985e9);mask-image:var(--ic-cdcf2985e9)} .ico-checkmark-circle{-webkit-mask-image:var(--ic-cca2e0e898);mask-image:var(--ic-cca2e0e898)} .ico-calendar-date{-webkit-mask-image:var(--ic-c9d7780647);mask-image:var(--ic-c9d7780647)} .ico-dismiss-circle{-webkit-mask-image:var(--ic-71429149e3);mask-image:var(--ic-71429149e3)} .ico-icon{-webkit-mask-image:url( + url + );mask-image:url( + url + )} .ico-edit{-webkit-mask-image:var(--ic-c81d233275);mask-image:var(--ic-c81d233275)} .ico-calendar-add{-webkit-mask-image:var(--ic-f1adfb1b53);mask-image:var(--ic-f1adfb1b53)} .ico-dismiss{-webkit-mask-image:var(--ic-d42009c2cf);mask-image:var(--ic-d42009c2cf)} .ico-image{-webkit-mask-image:var(--ic-d86acebe3c);mask-image:var(--ic-d86acebe3c)} .ico-timer{-webkit-mask-image:var(--ic-ed78f47dfc);mask-image:var(--ic-ed78f47dfc)} .ico-icon-2{-webkit-mask-image:url(https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@main/assets/${hireIcon});mask-image:url(https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@main/assets/${hireIcon})} .ico-save{-webkit-mask-image:var(--ic-1e281c4d54);mask-image:var(--ic-1e281c4d54)} .ico-icon-3{-webkit-mask-image:url(${iconUrl});mask-image:url(${iconUrl})} .ico-document{-webkit-mask-image:var(--ic-3cb80232f9);mask-image:var(--ic-3cb80232f9)} .ico-hat-graduation{-webkit-mask-image:var(--ic-c064183dec);mask-image:var(--ic-c064183dec)} .ico-local-language{-webkit-mask-image:var(--ic-6eb86d826e);mask-image:var(--ic-6eb86d826e)} .ico-ribbon{-webkit-mask-image:var(--ic-6103f484c3);mask-image:var(--ic-6103f484c3)} .ico-hand-wave{-webkit-mask-image:var(--ic-e4d9f38227);mask-image:var(--ic-e4d9f38227)} .ico-brain-circuit{-webkit-mask-image:var(--ic-0f0adbdb47);mask-image:var(--ic-0f0adbdb47)} .ico-fire{-webkit-mask-image:var(--ic-f194996bda);mask-image:var(--ic-f194996bda)} .ico-mic{-webkit-mask-image:var(--ic-4236eb5bd1);mask-image:var(--ic-4236eb5bd1)} .ico-ruler{-webkit-mask-image:var(--ic-ba75197a48);mask-image:var(--ic-ba75197a48)} .ico-color{-webkit-mask-image:var(--ic-14e3a3fb48);mask-image:var(--ic-14e3a3fb48)} .ico-warning-fill{-webkit-mask-image:var(--ic-c60c59cf7b);mask-image:var(--ic-c60c59cf7b)} .ico-tag{-webkit-mask-image:var(--ic-488fe19b9a);mask-image:var(--ic-488fe19b9a)} .ico-icon-4{-webkit-mask-image:url(https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@main/assets/${p});mask-image:url(https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@main/assets/${p})} .ico-icon-5{-webkit-mask-image:url(${fire});mask-image:url(${fire})} .ico-mail-add{-webkit-mask-image:var(--ic-a4b1c8fc60);mask-image:var(--ic-a4b1c8fc60)} .ico-tasks-app{-webkit-mask-image:var(--ic-8d9e4bbb8b);mask-image:var(--ic-8d9e4bbb8b)} .ico-checkmark-fill{-webkit-mask-image:var(--ic-664f65c01f);mask-image:var(--ic-664f65c01f)} .ico-image-add{-webkit-mask-image:var(--ic-901ec93181);mask-image:var(--ic-901ec93181)} .ico-chevron-up{-webkit-mask-image:var(--ic-98c1e3e210);mask-image:var(--ic-98c1e3e210)} .ico-link{-webkit-mask-image:var(--ic-b9c879ba07);mask-image:var(--ic-b9c879ba07)} .ico-send{-webkit-mask-image:var(--ic-226ddd2b0e);mask-image:var(--ic-226ddd2b0e)} .ico-weather-moon{-webkit-mask-image:var(--ic-923088772a);mask-image:var(--ic-923088772a)} .ico-document-search{-webkit-mask-image:var(--ic-862c3bf6ff);mask-image:var(--ic-862c3bf6ff)} .ico-call{-webkit-mask-image:var(--ic-3e4ba1842c);mask-image:var(--ic-3e4ba1842c)} .ico-calendar-ltr{-webkit-mask-image:url(https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@main/assets/Calendar%20Ltr/SVG/ic_fluent_calendar_ltr_24_regular.svg);mask-image:url(https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@main/assets/Calendar%20Ltr/SVG/ic_fluent_calendar_ltr_24_regular.svg)} .ico-chat-bubbles-question{-webkit-mask-image:var(--ic-b7163b4eff);mask-image:var(--ic-b7163b4eff)} .ico-person-feedback{-webkit-mask-image:var(--ic-a843e89b76);mask-image:var(--ic-a843e89b76)} .ico-arrow-undo{-webkit-mask-image:var(--ic-fda4ef800f);mask-image:var(--ic-fda4ef800f)} .ico-table{-webkit-mask-image:var(--ic-0fb2d659fd);mask-image:var(--ic-0fb2d659fd)} .ico-puzzle-piece{-webkit-mask-image:var(--ic-3eb4ae5db6);mask-image:var(--ic-3eb4ae5db6)} .ico-mail-arrow-up{-webkit-mask-image:var(--ic-722a871378);mask-image:var(--ic-722a871378)} .ico-copy{-webkit-mask-image:var(--ic-019740db57);mask-image:var(--ic-019740db57)} .ico-icon-6{-webkit-mask-image:url( + SEND + );mask-image:url( + SEND + )} .ico-arrow-download{-webkit-mask-image:var(--ic-71fc841d09);mask-image:var(--ic-71fc841d09)} .ico-pin{-webkit-mask-image:var(--ic-a30de93c9c);mask-image:var(--ic-a30de93c9c)} .ico-arrow-left{-webkit-mask-image:var(--ic-143864f909);mask-image:var(--ic-143864f909)} .ico-add{-webkit-mask-image:var(--ic-5303904f26);mask-image:var(--ic-5303904f26)} .ico-people-add{-webkit-mask-image:var(--ic-72bfbce587);mask-image:var(--ic-72bfbce587)} .ico-icon-7{-webkit-mask-image:url(${info.icon});mask-image:url(${info.icon})} .ico-icon-8{-webkit-mask-image:url(${it.icon});mask-image:url(${it.icon})} .ico-eye-tracking{-webkit-mask-image:var(--ic-929702dbfe);mask-image:var(--ic-929702dbfe)} .ico-print{-webkit-mask-image:var(--ic-7494eaa29a);mask-image:var(--ic-7494eaa29a)} /* ═══════════ Phase 5A.1 : Design tokens Teknet ═══════════ */ /* Contrôles natifs (date picker, select, scrollbars…) suivent le thème → jamais de popup blanche. */ :root{color-scheme:dark} :root[data-theme="light"]{color-scheme:light} /* La bascule clair/sombre est visible : le theme clair suit l accueil. */ .nav-level{position:relative;width:40px;height:40px;flex-shrink:0;border-radius:50%;border:0;padding:0;cursor:pointer;background:conic-gradient(var(--accent) 0deg, rgba(255,255,255,.14) 0deg);display:inline-flex;align-items:center;justify-content:center;transition:transform .15s} .nav-level:hover{transform:scale(1.07)} .nav-level::before{content:'';position:absolute;inset:3px;border-radius:50%;background:#171a22} .nav-level-num{position:relative;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:.9rem;color:#fff;line-height:1} :root{ /* ══ Jetons de la reference meritly-landing-v3.html ══ Noms conserves a l'identique pour que le systeme soit lisible des deux cotes. --red y designe l'accent de marque; ici c'est --brand-500 qui porte ce role, parce que --red est deja pris par le rouge d'erreur. */ --cream:#FBF8F4; --deep:#F3EDE3; --night:#0A0A0B; --panel:#141416; --ink:#0A0A0B; --mut:#5F5C58; --soft:#8B8781; --line:rgba(10,10,11,.11); --lineN:rgba(255,255,255,.13); --redd:#B8161D; } /* Les six vignettes de module. Ce sont les seuls degrades decoratifs autorises. */ .g-scoring{background:linear-gradient(150deg,#2A0A0D,#7E1016 55%,#E5202A)} .g-near{background:linear-gradient(150deg,#FDF6E8,#F3D9A6)} .g-bias{background:linear-gradient(150deg,#101013,#2C2C33)} .g-chem{background:linear-gradient(150deg,#E9F1EC,#BFD8CB)} .g-disc{background:linear-gradient(150deg,#EFEAF7,#CFC3E6)} .g-act{background:linear-gradient(150deg,#F6ECE7,#E3C7B8)} :root { /* Identité Teknet : accents brand */ --brand-500: #E5202A; /* --red de la reference */ --brand-600: #B8161D; /* --redd, au survol */ --brand-50: #FEF2F2; /* Sémantiques (indépendantes du thème) */ --success: #1F7A55; --warning: #B5730B; --danger: #B91C1C; --info: #2F5FBF; /* Surfaces & texte : mode SOMBRE par défaut (Phase 5A.12 : palette plus contrastée et attirante) */ /* Systeme de la landing, versant sombre. Le navy a disparu: la reference est neutre, et c'est ce qui rend le rouge de marque juste au lieu de violace. */ --bg: #0A0A0B; /* --night de la reference */ --s1: #141416; /* --panel: cartes et panneaux */ --s2: #1B1B1E; /* champs, survols, surfaces secondaires */ --s3: #232326; /* surfaces tertiaires */ --border: rgba(255,255,255,.13); /* --lineN: un filet, pas une bordure */ --text: #F4F1EC; /* la creme devenue texte */ --muted: #A29E98; /* --mut transpose sur fond sombre */ /* Aliases legacy : pointent désormais vers les nouveaux tokens */ --accent: var(--brand-500); --green: var(--success); --yellow: var(--warning); --red: var(--danger); --blue: var(--info); --pink: #ff6b8a; /* Typographie */ --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif; --font-mono: 'Space Mono', ui-monospace, monospace; --font-display: 'Plus Jakarta Sans', system-ui, sans-serif; /* Échelle & radius */ /* Un seul rayon de carte, un petit pour les blocs internes, un pill. */ --r: 16px; --radius-sm: 11px; --radius-lg: 16px; --radius-xl: 16px; --radius-pill: 100px; /* Ombres : discrètes en mode sombre */ /* Une carte au repos n'a pas d'ombre: c'est le filet qui la detache. L'ombre est reservee a ce qui flotte reellement au-dessus du contenu. */ --shadow-sm: none; --shadow: none; --shadow-md: 0 10px 26px rgba(0,0,0,.42); --shadow-float: 0 10px 26px rgba(0,0,0,.42); /* Hero gradient : sombre par défaut */ --hero-gradient: linear-gradient(135deg, var(--s2) 0%, var(--bg) 100%); /* Fonds & bordures sémantiques : calibrés mode SOMBRE */ --brand-bg: rgba(224, 32, 40, .12); --brand-border: rgba(224, 32, 40, .30); --success-bg: rgba(22, 163, 74, .15); --success-border:rgba(22, 163, 74, .35); --warning-bg: rgba(245, 158, 11, .15); --warning-border:rgba(245, 158, 11, .35); --danger-bg: rgba(185, 28, 28, .15); --danger-border: rgba(185, 28, 28, .35); --info-bg: rgba(14, 165, 233, .15); --info-border: rgba(14, 165, 233, .35); /* Overlays neutres : mode SOMBRE (teinte claire sur fond sombre) */ --overlay-low: rgba(255, 255, 255, .04); --overlay-mid: rgba(255, 255, 255, .08); --overlay-high: rgba(255, 255, 255, .14); } /* Mode CLAIR : palette papier chaud (option B renforcée, confort visuel) */ *{box-sizing:border-box;margin:0;padding:0} body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh} /* ── SCREENS ── */ .screen{display:none}.screen.on{display:block} /* Phase 5A.4.m + 5A.4.q v4 : Page de connexion TOUJOURS en mode clair (palette neutre off-white) */ #screen-login{ --bg: #0A0A0B; --s1: #141416; --s2: #1B1B1E; --s3: #232326; --border: rgba(255,255,255,.13); --text: #F4F1EC; --muted: #A29E98; --brand-bg: rgba(224, 32, 40, .10); --brand-border: rgba(224, 32, 40, .35); --success-bg: rgba(22, 163, 74, .12); --success-border:rgba(22, 163, 74, .38); --warning-bg: rgba(245, 158, 11, .16); --warning-border:rgba(245, 158, 11, .44); --danger-bg: rgba(185, 28, 28, .10); --danger-border: rgba(185, 28, 28, .38); --info-bg: rgba(14, 165, 233, .12); --info-border: rgba(14, 165, 233, .38); --overlay-low: rgba(255, 255, 255, .04); --overlay-mid: rgba(255, 255, 255, .08); --overlay-high: rgba(255, 255, 255, .14); --shadow-sm: 0 1px 2px rgba(0,0,0,.2); --shadow: 0 2px 6px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2); --shadow-md: 0 8px 20px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.2); background: var(--bg); color: var(--text); min-height: 100vh; } /* ── LOGIN ── */ .login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px} .login-box{background:var(--s1);border:1px solid var(--border);border-radius:16px;padding:48px 40px;width:100%;max-width:400px;text-align:center} /* Phase 5A.4.t : Layout split : formulaire à gauche + hero marketing à droite */ .login-layout{display:grid;grid-template-columns:minmax(420px, 34%) 1fr;min-height:100vh;width:100%;overflow:hidden} @media(min-width:1500px){.login-layout{grid-template-columns:560px 1fr}} .login-side{min-height:100vh;display:flex;flex-direction:column} .login-side-form{background:var(--s1);justify-content:center;align-items:center;border-right:1px solid var(--border)} .login-side-form .login-wrap{min-height:auto;width:100%;padding:40px} .login-side-form .login-box{border:none;padding:0;max-width:380px;background:transparent} .login-side-hero{background:linear-gradient(135deg, #0B0D14 0%, #14161E 55%, #1B1F2B 100%);padding:60px 60px;justify-content:center;position:relative;overflow:hidden} .login-side-hero::before{content:"";position:absolute;top:-150px;right:-150px;width:400px;height:400px;background:radial-gradient(circle,rgba(224,32,40,.08) 0%,transparent 70%);pointer-events:none} .login-side-hero::after{content:"";position:absolute;bottom:-200px;left:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(224,32,40,.05) 0%,transparent 70%);pointer-events:none} .login-hero{position:relative;z-index:1;max-width:580px;margin:0 auto;width:100%} .login-hero-eyebrow{font-family:'Space Mono', ui-monospace, monospace;font-size:12.5px;letter-spacing:.01em;color:var(--soft);font-weight:400;margin-bottom:18px} .login-hero-title{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-weight:500;font-size:2.6rem;line-height:1.02;letter-spacing:-.05em;margin:0 0 18px;color:var(--text)} .login-hero-title em{font-style:normal;color:var(--brand-500);font-weight:500;margin-left:.07em} .login-hero-sub{font-size:.98rem;color:var(--muted);line-height:1.55;margin-bottom:36px;max-width:520px} .login-kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:36px} .login-kpi{background:var(--s1);border:1px solid var(--border);border-radius:12px;padding:18px 18px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s} .login-kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow)} .login-kpi-val{font-family:'Space Mono', ui-monospace, monospace;font-size:2.5rem;color:var(--accent-texte,var(--accent));font-weight:400;line-height:1;margin-bottom:8px;letter-spacing:-.01em} .login-kpi-lbl{font-size:.78rem;color:var(--muted);line-height:1.45;font-weight:500} .login-video{cursor:pointer;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-md);transition:transform .25s,box-shadow .25s} .login-video:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(15,15,20,.18)} .login-video-cover{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#1A1A20 0%,#0A0A0E 100%);border:1px solid var(--border);display:flex;align-items:center;justify-content:center} .login-video-cover::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(224,32,40,.25) 0%,transparent 50%),radial-gradient(circle at 70% 70%,rgba(14,165,233,.15) 0%,transparent 50%)} .login-video-play{position:relative;z-index:1;width:72px;height:72px;background:var(--accent);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 0 6px rgba(255,255,255,.1);transition:transform .2s} .login-video:hover .login-video-play{transform:scale(1.08)} .login-video-play-triangle{display:inline-block;width:0;height:0;border:14px solid transparent;border-left:22px solid white;margin-left:4px} .login-video-label{position:absolute;bottom:18px;left:22px;color:white;font-size:.82rem;font-weight:600;z-index:1;letter-spacing:.01em;text-shadow:0 1px 3px rgba(0,0,0,.4)} /* Responsive : sous 1100px on empile, sous 700px on cache l'hero */ @media (max-width:1100px){ .login-layout{grid-template-columns:1fr;grid-auto-rows:auto} .login-side{min-height:auto} .login-side-form{border-right:none;border-bottom:1px solid var(--border);padding:40px 20px} .login-side-hero{padding:50px 30px} .login-hero-title{font-size:1.9rem} .login-kpi-val{font-size:2rem} } @media (max-width:700px){ .login-side-hero{display:none} } .login-logo{font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:1.8rem;letter-spacing:-.015em;margin-bottom:8px;display:inline-flex;align-items:center;gap:10px;line-height:1} .login-logo-icon{display:inline-block;width:26px;height:26px;background-color:var(--accent);flex-shrink:0;transition:transform .3s ease} .login-logo:hover .login-logo-icon{transform:rotate(-8deg) scale(1.05)} .login-logo em{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:400;color:var(--accent-texte,var(--accent));font-size:1.18em} .login-sub{color:var(--muted);font-size:.85rem;margin-bottom:32px} .login-tabs{display:flex;gap:0;background:var(--s2);border-radius:8px;padding:4px;margin-bottom:24px} .login-tab{flex:1;padding:8px;border-radius:6px;border:none;background:transparent;color:var(--muted);font-family:'Plus Jakarta Sans',sans-serif;font-size:.82rem;font-weight:500;cursor:pointer;transition:background.18s cubic-bezier(.4,0,.2,1),color.18s cubic-bezier(.4,0,.2,1)} .login-tab.on{background:var(--accent);color:white} .inp{width:100%;background:var(--s2);border:1px solid var(--border);border-radius:8px;padding:11px 14px;color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;font-size:.9rem;outline:none;transition:border-color.2s;margin-bottom:12px} .inp:focus{border-color:var(--accent)} .btn-primary{width:100%;padding:13px;background:var(--accent);border:none;border-radius:8px;color:white;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.95rem;cursor:pointer;transition:opacity.2s;letter-spacing:.2px} .btn-primary:hover{opacity:.9} .login-error{color:var(--rouge-texte,var(--red));font-size:.78rem;margin-top:8px;display:none} /* ── NAV ── */ .nav{display:flex;align-items:center;padding:0 28px;background:var(--s1);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;gap:0} .logo{display:inline-flex;align-items:center;gap:8px;padding:16px 0;margin-right:24px;white-space:nowrap;cursor:default} .logo-icon{width:22px;height:22px;color:var(--accent-texte,var(--accent));transition:transform .3s ease;flex-shrink:0} .logo:hover .logo-icon{transform:rotate(-8deg) scale(1.05)} .logo-text{font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:1.15rem;letter-spacing:-.015em;color:var(--text);line-height:1} .logo-text em{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:400;color:var(--accent-texte,var(--accent));font-size:1.18em} /* Phase 6.3 : Badge tenant courant (affiché dans le nav) */ .tenant-badge{font-family:'Plus Jakarta Sans',sans-serif;font-size:.78rem;font-weight:500;color:var(--muted);padding:6px 12px;background:var(--s1);border:1px solid var(--border);border-radius:6px;letter-spacing:-.005em;display:none;align-items:center;gap:6px;white-space:nowrap} .tenant-badge.show{display:inline-flex} .tenant-badge::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0} /* Spinner bouton : remplace les emojis de loading */ .btn-spinner{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:btnSpin .7s linear infinite;vertical-align:-2px;margin-right:8px} @keyframes btnSpin{to{transform:rotate(360deg)}} /* Phase 6.9 : Intégrations OAuth */ .integrations-section{background:var(--s2);border:1px solid var(--border);border-radius:10px;padding:14px;margin-top:14px} .integrations-section-title{font-size:.95rem;font-weight:600;color:var(--text);margin-bottom:10px;display:flex;align-items:center;gap:8px} .integrations-section-title::before{content:'';width:18px;height:18px;background:currentColor;-webkit-mask-image:var(--ic-18366e0872);mask-image:var(--ic-18366e0872);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;color:var(--brand-500)} .integration-card{background:var(--s1);border:1px solid var(--border);border-radius:8px;padding:11px 13px;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px} .integration-info{display:flex;align-items:center;gap:10px;flex:1;min-width:0} .integration-logo{width:32px;height:32px;flex-shrink:0;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;color:#fff;font-family:'Plus Jakarta Sans',sans-serif} .integration-logo-google{background:linear-gradient(135deg,#4285F4 0%,#EA4335 100%)} .integration-logo-google::before{content:'G'} .integration-logo-microsoft{background:linear-gradient(135deg,#F25022 0%,#7FBA00 50%,#00A4EF 100%)} .integration-logo-microsoft::before{content:'O'} .integration-text{display:flex;flex-direction:column;min-width:0;flex:1} .integration-name{font-size:.88rem;font-weight:600;color:var(--text);line-height:1.2} .integration-status{font-size:.74rem;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .integration-status-connected{color:#4AA37B;font-weight:500} .integration-btn{padding:6px 12px;border-radius:6px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.76rem;font-weight:500;cursor:pointer;border:none;white-space:nowrap;transition:background.15s cubic-bezier(.4,0,.2,1),color.15s cubic-bezier(.4,0,.2,1)} .integration-btn-connect{background:var(--brand-500);color:#fff} .integration-btn-connect:hover{background:var(--brand-600)} .integration-btn-disconnect{background:transparent;color:var(--muted);border:1px solid var(--border)} .integration-btn-disconnect:hover{background:var(--s3);color:var(--text)} .integration-btn-disabled{background:var(--s3);color:var(--muted);cursor:not-allowed} /* Modal "Planifier entretien" */ .schedule-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:9000;display:none;align-items:center;justify-content:center;padding:20px} .schedule-modal-backdrop.is-open{display:flex} .schedule-modal{background:var(--s1);border-radius:18px;padding:26px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;border:1px solid var(--border);box-shadow:0 32px 80px rgba(0,0,0,.40);font-family:'Plus Jakarta Sans',sans-serif;animation:modalSlideUp.26s cubic-bezier(.4,0,.2,1) both} .schedule-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px} .schedule-modal-title{font-size:1.15rem;font-weight:700;color:var(--text);font-family:'Plus Jakarta Sans',sans-serif} .schedule-modal-title em{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:400;color:var(--brand-500)} /* Phase 5C3 : Mini-modal confirm aligné sur schedule-modal */ .cf-backdrop{position:fixed;inset:0;background:rgba(10,10,11,.78);z-index:10100;display:none;align-items:center;justify-content:center;padding:20px} .cf-backdrop.is-open{display:flex} .cf-card{background:var(--s1);border:1px solid var(--border);border-radius:16px;max-width:452px;width:100%;padding:0;box-shadow:0 10px 26px rgba(0,0,0,.42);text-align:left;animation:modalSlideUp .24s cubic-bezier(.4,0,.2,1) both} .cf-title{font-size:19px;font-weight:500;letter-spacing:-.03em;line-height:1.28;color:var(--text);margin:0;padding:0 26px 20px;border-bottom:1px solid var(--border)} .cf-title em{font-style:normal;font-weight:500;color:var(--brand-500)} .cf-msg{color:var(--muted);font-size:14.5px;line-height:1.6;margin:0;padding:20px 26px 22px;max-width:46ch} /* Le libelle qui annonce la nature de l action : c est lui qui distingue ce dialogue d un modal par defaut, et il porte une information reelle. */ .cf-eyebrow{font-family:'Space Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.06em;color:var(--soft);padding:22px 26px 10px;margin:0} .cf-eyebrow.est-grave{color:var(--brand-500)} .cf-actions{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:10px;padding:0 26px 24px;border-top:1px solid var(--border);padding-top:20px} .cf-btn{padding:0 22px;height:38px;border-radius:100px;font-family:inherit;font-weight:600;font-size:14.5px;display:inline-flex;align-items:center;cursor:pointer;border:1px solid transparent;transition:background .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1)} .cf-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .cf-btn-secondary{background:transparent;color:var(--muted);border-color:transparent} .cf-btn-secondary:hover{background:rgba(255,255,255,.06);color:var(--text)} .cf-btn-secondary:hover{background:var(--overlay-low);border-color:var(--text)} .cf-btn-primary{background:var(--brand-500);color:#fff;border-color:var(--brand-500)} .cf-btn-primary:hover{background:var(--brand-600);border-color:var(--brand-600)} .schedule-modal-close{background:none;border:none;font-size:1.5rem;color:var(--muted);cursor:pointer;padding:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:background .15s,color .15s} .schedule-modal-close:hover{background:var(--s3);color:var(--text)} .schedule-modal-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .schedule-modal-cand{font-size:.82rem;color:var(--muted);padding:8px 12px;background:var(--s2);border-radius:8px;margin-bottom:14px} .schedule-modal-cand strong{color:var(--text);font-weight:600} .schedule-field{margin-bottom:12px} .schedule-field-label{display:block;font-size:.78rem;font-weight:500;color:var(--text);margin-bottom:5px} .schedule-field input,.schedule-field select,.schedule-field textarea{width:100%;padding:8px 11px;border-radius:7px;border:1px solid var(--border);background:var(--s1);color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;font-size:.88rem} .schedule-field input:focus,.schedule-field select:focus,.schedule-field textarea:focus{outline:none;border-color:var(--brand-500)} .schedule-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px} .schedule-row > .schedule-field{margin-bottom:0} @media(max-width:480px){.schedule-row{grid-template-columns:1fr}} .schedule-meet-toggle{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--text);background:var(--s2);padding:9px 12px;border-radius:8px;border:1px solid var(--border)} .schedule-meet-toggle input[type="checkbox"]{width:18px;height:18px;margin:0;cursor:pointer} .schedule-modal-feedback{font-size:.82rem;margin:10px 0;min-height:18px} .schedule-modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px} .schedule-modal-btn{padding:9px 16px;border-radius:7px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.86rem;font-weight:500;cursor:pointer;border:none;transition:background.15s cubic-bezier(.4,0,.2,1),color.15s cubic-bezier(.4,0,.2,1),opacity.15s} .schedule-modal-btn-primary{background:var(--brand-500);color:#fff} .schedule-modal-btn-primary:hover:not(:disabled){background:var(--brand-600)} .schedule-modal-btn-primary:disabled{opacity:.5;cursor:not-allowed} .schedule-modal-btn-secondary{background:transparent;color:var(--muted);border:1px solid var(--border)} .schedule-modal-btn-secondary:hover{background:var(--s3);color:var(--text)} .schedule-success{background:#D1FAE5;border:1px solid #4AA37B;border-radius:8px;padding:12px;color:#065F46;font-size:.84rem;line-height:1.5} .schedule-success a{color:#4AA37B;font-weight:600;text-decoration:underline;display:inline-block;margin-top:4px} /* Phase 6.8.7 : UI quota épuisé (402) */ .ai-quota-exhausted{background:linear-gradient(135deg,#FEF3C7 0%,#FDE68A 100%);border:1px solid #C79A4E;border-radius:12px;padding:24px;text-align:center;font-family:'Plus Jakarta Sans',sans-serif} .ai-quota-icon{display:inline-flex;width:48px;height:48px;background:#C79A4E;color:#fff;border-radius:50%;align-items:center;justify-content:center;margin-bottom:12px} .ai-quota-icon .icon-2d{width:24px;height:24px;background:currentColor} .ai-quota-title{font-size:1.15rem;font-weight:600;color:#92400E;margin-bottom:8px} .ai-quota-msg{font-size:.88rem;color:#78350F;line-height:1.55;margin-bottom:18px;max-width:480px;margin-left:auto;margin-right:auto} .ai-quota-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} .ai-quota-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:8px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.86rem;font-weight:500;text-decoration:none;cursor:pointer;border:none;transition:transform.12s,box-shadow.15s} .ai-quota-btn-primary{background:#C79A4E;color:#fff} .ai-quota-btn-primary:hover{background:#D97706;transform:translateY(-1px);box-shadow:0 4px 8px rgba(245,158,11,.3)} .ai-quota-btn-primary .icon-2d{width:16px;height:16px;background:#fff} .ai-quota-btn-secondary{background:#fff;color:#92400E;border:1px solid #C79A4E} .ai-quota-btn-secondary:hover{background:#FEF3C7} /* Phase 6.8.7 : Credit packs section */ .credits-section{background:var(--s2);border:1px solid var(--border);border-radius:10px;padding:14px;margin-top:14px} .credits-section-title{font-size:.95rem;font-weight:600;color:var(--text);margin-bottom:6px;display:flex;align-items:center;gap:8px} .credits-section-title::before{content:'';width:18px;height:18px;background:currentColor;-webkit-mask-image:var(--ic-9be597556f);mask-image:var(--ic-9be597556f);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;color:var(--brand-500)} .credits-balance-row{background:var(--s1);border:1px solid var(--border);border-radius:8px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:.85rem} .credits-balance-label{color:var(--muted)} .credits-balance-value{font-weight:700;font-size:1.05rem;color:var(--brand-500);font-family:'JetBrains Mono','Courier New',monospace} .credits-packs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .credits-pack{background:var(--s1);border:1px solid var(--border);border-radius:8px;padding:10px 8px;text-align:center;cursor:pointer;transition:border-color.15s cubic-bezier(.4,0,.2,1),transform.15s cubic-bezier(.4,0,.2,1),box-shadow.15s;font-family:'Plus Jakarta Sans',sans-serif} .credits-pack:hover{border-color:var(--brand-500);transform:translateY(-1px);box-shadow:0 4px 8px rgba(15,23,42,.06)} .credits-pack-count{font-size:1.3rem;font-weight:700;color:var(--text);line-height:1.1} .credits-pack-label{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:2px} .credits-pack-price{font-size:.82rem;color:var(--brand-500);font-weight:600;margin-top:6px} .credits-pack-price-sub{font-size:.66rem;color:var(--muted);margin-top:1px} .credits-total-row{padding:8px 12px 0;text-align:right;font-size:.76rem;color:var(--muted);line-height:1.5} .credits-total-row strong{color:var(--text)} .credits-pack-btn{background:var(--brand-500);color:#fff;border:none;width:100%;padding:6px 8px;border-radius:5px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.74rem;font-weight:500;cursor:pointer;margin-top:8px;transition:background.12s} .credits-pack-btn:hover{background:var(--brand-600)} .credits-pack-btn:disabled{opacity:.5;cursor:not-allowed} .credits-note{font-size:.72rem;color:var(--muted);margin-top:10px;line-height:1.45;font-style:normal} @media(max-width:480px){.credits-packs-grid{grid-template-columns:1fr;gap:6px}} /* Phase 6.8.6.A V1 : Voaray payment button */ .voaray-pay-section{background:var(--s2);border:1px solid var(--border);border-radius:10px;padding:14px} .voaray-pay-info{font-size:.82rem;color:var(--muted);line-height:1.5;margin-bottom:12px} .voaray-pay-info strong{color:var(--text);font-weight:600} .voaray-pay-btn{width:100%;background:linear-gradient(135deg,var(--brand-500),var(--brand-600));color:#fff;border:none;border-radius:8px;padding:12px 16px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;cursor:pointer;transition:transform.12s,box-shadow.15s;display:flex;flex-direction:column;align-items:center;gap:2px} .voaray-pay-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 16px rgba(0,0,0,.25)} .voaray-pay-btn:disabled{opacity:.5;cursor:not-allowed} .voaray-pay-btn-label{font-size:.95rem;letter-spacing:.01em} .voaray-pay-btn-sub{font-size:.74rem;opacity:.9;font-weight:400} .voaray-pay-note{font-size:.72rem;color:var(--muted);margin-top:10px;font-style:normal;line-height:1.45} /* Phase Parrainage V1 : Section dans modal réglages */ .referral-section{background:linear-gradient(135deg,#FEF3C7 0%,#FDE68A 100%);border:1px solid #C79A4E;border-radius:10px;padding:14px;margin-top:14px;font-family:'Plus Jakarta Sans',sans-serif} .referral-section.is-locked{background:var(--s2);border-color:var(--border);color:var(--muted)} .referral-title{font-size:.92rem;font-weight:600;color:#92400E;margin-bottom:4px;display:flex;align-items:center;gap:8px} .referral-section.is-locked .referral-title{color:var(--muted)} .referral-title::before{content:'';width:18px;height:18px;background:currentColor;-webkit-mask-image:var(--ic-c238d48cd6);mask-image:var(--ic-c238d48cd6);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} .referral-desc{font-size:.78rem;color:#78350F;margin-bottom:10px;line-height:1.45} .referral-section.is-locked .referral-desc{color:var(--muted)} .referral-code-box{background:#fff;border:1px dashed #C79A4E;border-radius:8px;padding:10px 12px;display:flex;align-items:center;gap:8px;margin-bottom:8px} .referral-code{font-family:'JetBrains Mono','Courier New',monospace;font-size:1.05rem;font-weight:700;color:#92400E;letter-spacing:.06em;flex:1} .referral-copy-btn{background:#C79A4E;color:#fff;border:none;padding:6px 12px;border-radius:6px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.78rem;font-weight:500;cursor:pointer;transition:background.15s;white-space:nowrap} .referral-copy-btn:hover{background:#D97706} .referral-copy-btn.is-copied{background:#10B981} .referral-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;font-size:.74rem} .referral-stat{background:rgba(255,255,255,.6);border-radius:6px;padding:8px;text-align:center} .referral-stat-value{font-size:1.1rem;font-weight:700;color:#92400E;line-height:1.2} .referral-stat-label{color:#78350F;opacity:.75;margin-top:2px} .referral-link-row{font-size:.74rem;color:#78350F;background:rgba(255,255,255,.5);border-radius:6px;padding:8px;margin-top:8px;word-break:break-all;font-family:'JetBrains Mono','Courier New',monospace} .referral-locked-cta{display:inline-block;margin-top:6px;color:var(--brand-500);font-weight:500;font-size:.82rem;text-decoration:none} .referral-locked-cta:hover{text-decoration:underline} /* Phase 6.8.4.fix : Nav allégée : user-menu dropdown */ .user-menu{position:relative;display:inline-block} .user-menu-btn{display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;background:var(--s1);border:1px solid var(--border);border-radius:999px;color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:.82rem;cursor:pointer;transition:border-color.15s,background.15s} .user-menu-btn:hover{border-color:var(--brand-500);background:var(--brand-bg)} .user-menu-avatar{width:26px;height:26px;background:linear-gradient(135deg,var(--brand-500),var(--brand-600));color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:600;letter-spacing:.02em;flex-shrink:0} .user-menu-caret{width:14px;height:14px;color:var(--muted);background:currentColor;-webkit-mask-image:var(--ic-abc96c185b);mask-image:var(--ic-abc96c185b);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transition:transform .2s} .user-menu.is-open .user-menu-caret{transform:rotate(180deg)} .user-menu-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:240px;background:var(--s1);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-md);padding:6px;z-index:200;display:none;flex-direction:column;font-family:'Plus Jakarta Sans',sans-serif} .user-menu.is-open .user-menu-dropdown{display:flex} .user-menu-info{padding:10px 12px 8px;border-bottom:1px solid var(--border);margin-bottom:6px} .user-menu-info-tenant{font-size:.84rem;font-weight:600;color:var(--text);display:flex;align-items:center;gap:7px} .user-menu-info-role{font-size:.72rem;color:var(--muted);margin-top:3px} .user-menu-link{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:var(--text);text-decoration:none;font-size:.86rem;cursor:pointer;border:none;background:transparent;font-family:'Plus Jakarta Sans',sans-serif;text-align:left;width:100%;transition:background.12s} .user-menu-link:hover{background:var(--s2)} .user-menu-link .icon-2d{width:16px;height:16px;color:var(--muted);flex-shrink:0} .user-menu-link:hover .icon-2d{color:var(--brand-500)} .user-menu-link.is-danger{color:var(--rouge-texte,#DC2626)} .user-menu-link.is-danger .icon-2d,.user-menu-link.is-danger:hover .icon-2d{color:var(--rouge-texte,#DC2626)} .user-menu-divider{height:1px;background:var(--border);margin:6px 0} /* Menu graphe consolidé : regroupe toutes les actions du graphe de compétences derrière une seule entrée */ .gmenu-panel{background:var(--s1);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-md);padding:6px;display:flex;flex-direction:column;font-family:'Plus Jakarta Sans',sans-serif;min-width:238px;max-width:92vw} .gmenu-head{padding:8px 12px 6px;font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)} .gmenu-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:var(--text);background:transparent;border:none;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;font-size:.86rem;font-weight:500;text-align:left;width:100%;transition:background.12s} .gmenu-item:hover{background:var(--s2)} .gmenu-item .icon-2d{width:16px;height:16px;color:var(--muted);flex-shrink:0} .gmenu-item:hover .icon-2d{color:var(--brand-500)} .gmenu-item small{display:block;font-weight:400;font-size:.72rem;color:var(--muted);margin-top:1px} .gmenu-sep{height:1px;background:var(--border);margin:6px 0} .logo em{color:var(--accent-texte,var(--accent));font-style:normal} .nav-tab{padding:16px 16px;font-size:.8rem;font-weight:500;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:color .18s cubic-bezier(.4,0,.2,1),border-color .18s cubic-bezier(.4,0,.2,1),background .18s cubic-bezier(.4,0,.2,1);white-space:nowrap} .nav-tab:hover{color:var(--text)}.nav-tab.on{color:var(--accent-texte,var(--accent));border-bottom-color:var(--accent)} .nav-right{margin-left:auto;display:flex;align-items:center;gap:10px} .nav-sep{display:none} .badge-view{font-size:.72rem;padding:4px 12px;border-radius:12px;border:1px solid;font-weight:600} .badge-admin{border-color:var(--accent);color:var(--accent-texte,var(--accent));background:var(--brand-bg)} .badge-client{;background:var(--success-bg)} /* Boutons nav : style pro (Phase 5A.4.g) */ .btn-sm{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:8px;border:1px solid var(--border);background:var(--s1);color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:.82rem;cursor:pointer;transition:border-color.15s,background.15s;white-space:nowrap;line-height:1} .btn-sm:hover{border-color:var(--accent);background:var(--brand-bg)} .btn-sm .icon-2d{width:1em;height:1em} /* Variantes colorées (override via inline style possible) */ .btn-sm-brand{border-color:var(--brand-border);background:var(--brand-bg);color:var(--accent-texte,var(--accent))} .btn-sm-brand:hover{background:rgba(224,32,40,.15);border-color:var(--accent)} .btn-sm-warning{border-color:rgba(99,102,241,.28);background:rgba(99,102,241,.07);color:#7B7DD1} .btn-sm-warning:hover{background:rgba(99,102,241,.14);border-color:rgba(99,102,241,.55);color:#4F46E5} .btn-sm-bias{border-color:rgba(224,32,40,.35);background:rgba(224,32,40,.06);color:var(--brand,#E5202A)} .btn-sm-bias:hover{background:rgba(224,32,40,.12);border-color:#E5202A} .bias-dot{width:6px;height:6px;border-radius:50%;background:#E5202A;flex-shrink:0;animation:biasPulse 2.4s ease-in-out infinite} @keyframes biasPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.65)}} /* Phase 5A.22 : Bouton "Gérer les postes" passé en indigo (au lieu de jaune fluo). Mode sombre adapté. */ :root[data-theme="dark"] .btn-sm-warning{ color:#A5B4FC; /* indigo clair pour fond sombre */ background:rgba(129,140,248,.08); border-color:rgba(129,140,248,.30); } :root[data-theme="dark"] .btn-sm-warning:hover{ background:rgba(129,140,248,.18); border-color:rgba(129,140,248,.55); color:#C7D2FE; } /* Theme toggle (Phase 5A.4.g) : style postuler */ .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--s1);border:1px solid var(--border);border-radius:8px;color:var(--text);cursor:pointer;font-size:1rem;line-height:1;transition:border-color .15s cubic-bezier(.4,0,.2,1),background .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1);padding:0} .theme-toggle:hover{border-color:var(--accent);color:var(--accent-texte,var(--accent));background:var(--brand-bg)} .theme-toggle .icon-2d{width:18px;height:18px;vertical-align:middle} /* ── PANELS ── */ .panel{display:none;max-width:1200px;margin:0 auto;padding:32px 24px}.panel.on{display:block} /* Phase 5A.4.q v2 : Transition smooth lors du toggle theme (durée 600ms, easing organique) */ html.theme-transitioning, html.theme-transitioning body, html.theme-transitioning *:not(.icon-2d):not(.avatar img):not(.no-theme-transition) { transition-property: background-color, color, border-color, box-shadow, fill, stroke !important; transition-duration: .6s !important; transition-timing-function: cubic-bezier(.4, 0, .2, 1) !important; } /* ── STATS CARDS ── */ .stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px} .stat-card{box-shadow:var(--shadow);background:var(--s1);border:1px solid var(--border);border-radius:var(--r);padding:18px} .stat-lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:6px} .stat-val{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.9rem} .stat-sub{font-size:.7rem;color:var(--muted);margin-top:3px} /* ── FILTERS ── */ .filter-bar{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap;align-items:center} .filter-bar input,.filter-bar select{background:var(--s2);border:1px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;font-size:.82rem;outline:none;transition:border-color.2s} .filter-bar input:focus,.filter-bar select:focus{border-color:var(--accent)} .filter-bar input{min-width:180px} /* Phase 5A.4.j : Search wrap avec icône Fluent person_search */ .search-wrap{position:relative;display:flex;align-items:center} .search-wrap .icon-2d{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--muted);pointer-events:none;transition:color .2s} .search-wrap{flex:1 1 240px;min-width:230px;max-width:340px} .search-wrap input{width:100%;padding-left:34px !important} .search-wrap:focus-within .icon-2d{color:var(--accent-texte,var(--accent))} /* ── POSTE BLOCK ── */ .poste-block{margin-bottom:44px} .poste-label{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.93rem;color:var(--accent-texte,var(--accent));padding:8px 0 14px;border-bottom:1px solid var(--border);margin-bottom:18px;display:flex;align-items:center;gap:10px} .poste-label .icon-2d{width:18px;height:18px;flex-shrink:0} .poste-cnt{font-family:'Plus Jakarta Sans',sans-serif;font-weight:400;font-size:.75rem;color:var(--muted)} /* En-tête de catégorie (sectionnement du cockpit, aligné sur « Gérer les postes ») */ .ck-cat-sec{margin-bottom:30px} .ck-cat-head{display:flex;align-items:center;gap:10px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1rem;letter-spacing:-.01em;color:var(--text);margin:0 0 18px;padding-bottom:2px} .ck-cat-head .ck-cat-dot{width:9px;height:9px;border-radius:50%;background:var(--cat-color,#71717A);box-shadow:0 0 10px -1px var(--cat-color,#71717A);flex-shrink:0} .ck-cat-head.ck-cat-cnt{font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:.72rem;color:var(--muted);background:var(--s2);border:1px solid var(--border);border-radius:99px;padding:2px 9px;margin-left:2px} .ck-cat-sec .poste-block{margin-bottom:26px} .ck-cat-sec .poste-label{font-size:.82rem;border-bottom-style:dashed} /* ── ACCORDÉON (catégories + postes) ── */ .ck-acc-chevron{width:14px;height:14px;flex-shrink:0;background:currentColor;-webkit-mask-image:var(--ic-abc96c185b);mask-image:var(--ic-abc96c185b);transition:transform .2s cubic-bezier(.22,.61,.36,1)} .ck-cat-head,.poste-label{cursor:pointer;user-select:none} .ck-cat-head:hover{color:var(--accent-texte,var(--accent))} .poste-label:hover{opacity:.75} .ck-cat-head.collapsed .ck-acc-chevron,.poste-label.collapsed .ck-acc-chevron{transform:rotate(-90deg)} .ck-acc-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .28s cubic-bezier(.22,.61,.36,1)} .ck-acc-body.collapsed{grid-template-rows:0fr} .ck-acc-body>div{overflow:hidden;min-height:0} @media (prefers-reduced-motion:reduce){.ck-acc-chevron,.ck-acc-body{transition:none}} /* ── CARD ── */ .card{box-shadow:var(--shadow);background:var(--s1);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:border-color .2s,transform .15s;cursor:pointer;margin-bottom:10px} .card:hover{border-color:var(--accent);transform:translateY(-1px)}.card.expanded{border-color:var(--accent)} .card-top{display:grid;grid-template-columns:155px 1fr 195px} .card-score{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 12px;border-right:1px solid var(--border);gap:7px;background:var(--s2)} .score-ring{position:relative;width:70px;height:70px} .score-ring svg{position:absolute;top:0;left:0} .score-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none} .score-num{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.25rem;line-height:1} .score-denom{font-size:.58rem;color:var(--muted)} .lvl-badge{font-size:.7rem;font-weight:600;padding:3px 10px;border-radius:6px;letter-spacing:.2px} .lvl-top{background:rgba(52,211,153,.12);color:#34D399;border:1px solid rgba(52,211,153,.26)} .lvl-bon{background:rgba(95,180,240,.12);color:#5FB4F0;border:1px solid rgba(95,180,240,.26)} .lvl-moyen{background:rgba(224,160,80,.12);color:#E0A050;border:1px solid rgba(224,160,80,.26)} .lvl-faible{background:rgba(248,113,113,.12);color:#F87171;border:1px solid rgba(248,113,113,.26)} .compat-pill{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px;border-radius:8px;border:1px solid var(--border);background:var(--s3);width:100%} .compat-val{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1rem} .compat-lbl{font-size:.58rem;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;text-align:center;line-height:1.3} .card-main{padding:14px 16px;display:flex;flex-direction:column;gap:5px} .card-idrow{display:flex;align-items:center;gap:13px} .card-idtext{min-width:0;flex:1} .card-avatar{flex-shrink:0} .card-avatar .avatar{width:76px;height:76px;font-size:1.5rem;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 6px 20px -5px rgba(0,0,0,.6)} .card-avatar .avatar img{image-rendering:auto} /* ═══ COCKPIT 2 colonnes (écran Candidats) ═══ */ .cockpit-grid{display:grid;grid-template-columns:340px 1fr;gap:18px;align-items:start} @media(max-width:1100px){.cockpit-grid{grid-template-columns:1fr}} .cockpit-rank{display:flex;flex-direction:column;gap:8px;position:sticky;top:90px} .ck-rank-head{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;margin-bottom:4px;padding:0 2px} .ck-rankrow{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:16px;cursor:pointer;border:1px solid rgba(255,255,255,.07);background:rgba(20,24,33,.45);backdrop-filter:blur(10px);transition:border-color .15s,transform .12s} .ck-rankrow:hover{border-color:rgba(255,255,255,.15);transform:translateY(-1px)} .ck-rankrow.on{border-color:rgba(224,32,40,.45);background:linear-gradient(120deg,rgba(224,32,40,.15),rgba(41,212,217,.05));box-shadow:0 0 0 1px rgba(0,0,0,.12),0 14px 32px -16px rgba(0,0,0,.5)} .ck-rank{font-family:'Space Mono',monospace;font-size:12px;color:var(--muted);width:16px;flex-shrink:0;text-align:center} .ck-rankrow.on.ck-rank{color:var(--rouge-texte,#E5202A)} .ck-rowav .avatar{width:38px;height:38px} .ck-rowtext{min-width:0;flex:1} .ck-rowname{font-size:13.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ck-rowsub{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px} .ck-rowscore{text-align:right;flex-shrink:0} .ck-rowmatch{letter-spacing:-.03em;font-family:'Space Mono', ui-monospace, monospace;font-size:25px;line-height:.9} .ck-rowlbl{font-family:'Space Mono',monospace;font-size:8px;color:var(--muted);letter-spacing:.1em} .cockpit-detail{display:flex;flex-direction:column;gap:16px;min-width:0} .ck-id{display:flex;gap:20px;align-items:center;padding:22px 24px;border-radius:22px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(150deg,rgba(30,34,47,.6),rgba(15,18,26,.55));backdrop-filter:blur(22px) saturate(140%);box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 28px 64px -28px rgba(0,0,0,.8)} .ck-avatar .avatar{width:72px;height:72px;font-size:1.5rem} .ck-id-body{flex:1;min-width:0} .ck-name{font-family:'Plus Jakarta Sans',sans-serif;font-size:24px;font-weight:600;letter-spacing:-.02em} .ck-id-sub{font-size:14px;color:#aeb6cc;margin-top:5px} .ck-id-meta{font-family:'Space Mono',monospace;font-size:11px;color:var(--muted);margin-top:6px;word-break:break-word} .ck-email-edit{display:inline-flex;vertical-align:-1px;margin-left:5px;padding:2px;border:none;background:transparent;cursor:pointer;border-radius:4px;opacity:.55;transition:opacity .15s} .ck-email-edit:hover{opacity:1;background:var(--s2)} .ck-email-edit .icon-2d{width:11px;height:11px;background:var(--muted)} .ck-email-input{font-family:'Space Mono',monospace;font-size:11px;background:var(--s2);border:1px solid var(--border);border-radius:6px;padding:2px 6px;width:190px;color:var(--text)} .ck-email-save{display:inline-flex;align-items:center;justify-content:center;vertical-align:-4px;margin-left:4px;width:19px;height:19px;border:none;border-radius:5px;background:var(--accent);color:#fff;cursor:pointer;font-size:11px;line-height:1} .ck-id-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap} .ck-btn-primary{background:#E5202A;color:#fff;border:none;padding:10px 16px;border-radius:11px;font:600 13px 'Plus Jakarta Sans';cursor:pointer;box-shadow:0 10px 26px -8px rgba(0,0,0,.65)} .ck-btn-ghost{display:inline-flex;align-items:center;background:rgba(255,255,255,.04);color:#cdd3e3;border:1px solid rgba(255,255,255,.13);padding:10px 15px;border-radius:11px;font:600 13px 'Plus Jakarta Sans';cursor:pointer;text-decoration:none} .ck-gauge{flex-shrink:0} .ck-row2{display:grid;grid-template-columns:1fr 1.1fr;gap:16px} @media(max-width:1100px){.ck-row2{grid-template-columns:1fr}} .ck-card{padding:20px 22px;border-radius:22px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(150deg,rgba(30,34,47,.6),rgba(15,18,26,.55));backdrop-filter:blur(22px) saturate(140%);box-shadow:0 28px 64px -28px rgba(0,0,0,.8)} .ck-h{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px} .ck-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:7px} .ck-tile{text-align:center;padding:9px 3px;border-radius:11px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)} .ck-tile-l{font-family:'Space Mono',monospace;font-size:8px;color:var(--muted);letter-spacing:.04em} .ck-tile-v{font-size:16px;font-weight:600;margin-top:3px} .ck-tile-d{font-family:'Space Mono',monospace;font-size:9px;margin-top:2px} .ck-comp{display:grid;grid-template-columns:130px 1fr 32px;align-items:center;gap:12px;margin-bottom:13px} .ck-comp-l{font-size:12.5px;color:#cdd3e3} .ck-bar{position:relative;height:8px;border-radius:99px;background:rgba(255,255,255,.06)} .ck-bar-f{position:absolute;inset:0;border-radius:99px;max-width:100%} .ck-bar-tick{position:absolute;top:-3px;bottom:-3px;width:2px;background:rgba(255,255,255,.6);border-radius:2px} .ck-comp-v{font-family:'Space Mono',monospace;font-size:12px;text-align:right} .ck-legend{display:flex;align-items:center;gap:8px;margin-top:6px;padding-top:12px;border-top:1px solid rgba(255,255,255,.06);font-family:'Space Mono',monospace;font-size:.6rem;color:var(--muted)} .ck-legend-tick{width:14px;height:2px;background:rgba(255,255,255,.6);border-radius:2px} .hlp{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;border-radius:50%;border:1px solid currentColor;font-size:8px;font-weight:700;opacity:.55;cursor:help;margin-left:5px;vertical-align:middle;font-family:'Plus Jakarta Sans',sans-serif} .hlp:hover{opacity:1} /* ═══ ONBOARDING : tutoriel guidé ═══ */ .tour-spot{position:fixed;border-radius:12px;box-shadow:0 0 0 9999px rgba(8,9,13,.72);z-index:99998;pointer-events:none;transition:all .3s cubic-bezier(.22,1,.36,1);border:1px solid rgba(224,32,40,.55)} .tour-pop{position:fixed;z-index:99999;width:340px;max-width:calc(100vw - 32px);background:linear-gradient(150deg,rgba(30,34,47,.97),rgba(15,18,26,.98));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:20px 22px;box-shadow:0 28px 64px -20px rgba(0,0,0,.9);color:#e6e9f2;transition:left .25s,top .25s} .tour-step{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--rouge-texte,#E5202A)} .tour-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;font-weight:600;margin:6px 0 8px;letter-spacing:-.01em} .tour-text{font-size:13.5px;line-height:1.55;color:#aeb6cc;margin-bottom:18px} .tour-actions{display:flex;align-items:center;justify-content:space-between;gap:10px} .tour-skip{background:none;border:none;color:#6b7390;font-size:12.5px;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif} .tour-skip:hover{color:#aeb6cc} .tour-prev{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);color:#cdd3e3;padding:8px 13px;border-radius:10px;font:600 12.5px 'Plus Jakarta Sans';cursor:pointer} .tour-next{background:#E5202A;border:none;color:#fff;padding:8px 15px;border-radius:10px;font:600 12.5px 'Plus Jakarta Sans';cursor:pointer;box-shadow:0 8px 20px -6px rgba(0,0,0,.6)} .tour-replay{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);color:#aeb6cc;padding:7px 11px;border-radius:10px;font:500 12px 'Plus Jakarta Sans';cursor:pointer;white-space:nowrap} .tour-replay:hover{color:#fff;border-color:rgba(224,32,40,.4)} .card-name{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.95rem} .card-sub{font-size:.72rem;color:var(--muted)} .card-chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px} .chip{font-size:.68rem;padding:2px 7px;border-radius:7px;background:var(--s3);color:var(--text);border:1px solid var(--border)} .card-summary{font-size:.76rem;color:#8892b0;line-height:1.5;font-style:normal;margin-top:5px;border-top:1px solid var(--border);padding-top:7px} .card-radar{display:flex;align-items:center;justify-content:center;padding:10px;border-left:1px solid var(--border)} .card-detail{display:none;border-top:1px solid var(--border);padding:22px;background:var(--s2);gap:20px} .card.expanded .card-detail{display:grid;grid-template-columns:1fr 1fr 1fr} .detail-h{font-size:.68rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:10px} .dim-row{display:flex;align-items:center;gap:7px;margin-bottom:8px;font-size:.78rem} .dim-lbl{width:105px;color:var(--muted);flex-shrink:0;font-size:.72rem} .dim-bar{flex:1;height:4px;background:var(--s3);border-radius:2px;overflow:hidden} .dim-fill{height:100%;border-radius:2px} .dim-pts{font-family:'Space Mono',monospace;font-size:.7rem;min-width:38px;text-align:right} .dim-max{color:var(--muted)} .comp-row{display:flex;align-items:center;gap:7px;margin-bottom:7px} .comp-lbl{font-size:.72rem;color:var(--muted);width:130px;flex-shrink:0} .stars-wrap{display:flex;gap:1px} .star{font-size:.72rem} .comp-pts{font-family:'Space Mono',monospace;font-size:.68rem;min-width:26px;text-align:right;color:#f5bc51} .compat-row{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:.72rem} .compat-row .lbl{width:75px;flex-shrink:0} .compat-bar{flex:1;height:4px;background:var(--s3);border-radius:2px;overflow:hidden} .compat-fill{height:100%;border-radius:2px} .compat-pct{font-family:'Space Mono',monospace;font-size:.68rem;min-width:30px;text-align:right} .ct-item{font-size:.76rem;padding:4px 0;border-bottom:1px solid var(--border);display:flex;gap:8px} .ct-item:last-child{border-bottom:none} .ct-key{color:var(--muted);width:75px;flex-shrink:0;font-size:.7rem} /* ── DARK GLASS COCKPIT (refonte cartes candidat - proposition "Outil sexy & futuriste") ── */ @keyframes ringSpin{to{transform:rotate(360deg)}} @keyframes cardEnter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .card{ background:linear-gradient(150deg, color-mix(in srgb,var(--s1) 72%, transparent), color-mix(in srgb,var(--bg) 66%, transparent)); -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4); border:1px solid color-mix(in srgb,var(--text) 9%, transparent); border-radius:var(--radius-xl); box-shadow:0 1px 0 color-mix(in srgb,var(--text) 6%, transparent) inset, 0 28px 64px -28px rgba(0,0,0,.8); animation:cardEnter .5s cubic-bezier(.16,1,.3,1) both; } .card:hover{ border-color:color-mix(in srgb,var(--accent) 45%, transparent); transform:translateY(-2px); box-shadow:0 1px 0 color-mix(in srgb,var(--text) 7%, transparent) inset, 0 32px 70px -28px rgba(0,0,0,.85), 0 0 40px -18px color-mix(in srgb,var(--accent) 60%, transparent); } .card.expanded{border-color:color-mix(in srgb,var(--accent) 55%, transparent)} .card:nth-child(2){animation-delay:.05s}.card:nth-child(3){animation-delay:.1s}.card:nth-child(4){animation-delay:.15s}.card:nth-child(5){animation-delay:.2s}.card:nth-child(6){animation-delay:.25s} .card-score{background:color-mix(in srgb,var(--s2) 45%, transparent);border-right:1px solid color-mix(in srgb,var(--text) 7%, transparent)} .card-radar{border-left:1px solid color-mix(in srgb,var(--text) 7%, transparent)} .card-summary{border-top:1px solid color-mix(in srgb,var(--text) 7%, transparent)} /* Anneau conique lumineux derrière la jauge de score (signature "gaugeFill") */ .score-ring::before{ content:none; position:absolute;inset:-7px;border-radius:50%; background:conic-gradient(from 0deg, transparent 0deg, color-mix(in srgb,var(--accent) 55%, transparent) 180deg, transparent 300deg); filter:blur(9px);opacity:.6;pointer-events:none;z-index:0; animation:ringSpin 9s linear infinite; } .score-ring svg,.score-inner{z-index:1} /* Chiffres héros en italique + accent cyan IA sur la compatibilité */ .score-num{font-family:'Space Mono', ui-monospace, monospace;font-weight:400;font-size:1.7rem;letter-spacing:-.03em} .compat-val{letter-spacing:-.03em;font-family:'Space Mono', ui-monospace, monospace;font-weight:400;font-size:1.4rem;color:#4FA396} .compat-pill{background:color-mix(in srgb,#4FA396 8%, transparent);border-color:color-mix(in srgb,#4FA396 28%, transparent)} .compat-lbl{color:color-mix(in srgb,#4FA396 75%, var(--muted))} @media (prefers-reduced-motion: reduce){.card{animation:none}.score-ring::before{animation:none}} /* ── CONFIG PANEL ── */ .config-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:32px} .config-card{box-shadow:var(--shadow);background:var(--s1);border:1px solid var(--border);border-radius:var(--r);padding:22px} .config-card h3{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.9rem;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between} .config-poste-item{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:.83rem;gap:8px} .config-poste-item:last-child{border-bottom:none} .config-poste-name{font-weight:500;flex:1} .btn-icon{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1rem;padding:2px 6px;border-radius:4px;transition:color .18s cubic-bezier(.4,0,.2,1),background .18s cubic-bezier(.4,0,.2,1)} .btn-icon:hover{color:var(--accent-texte,var(--accent));background:var(--brand-bg)} .btn-icon.del:hover{color:var(--rouge-texte,var(--red));background:var(--danger-bg)} .add-form{display:flex;gap:8px;margin-top:12px} .add-inp{flex:1;background:var(--s2);border:1px solid var(--border);border-radius:7px;padding:8px 11px;color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;font-size:.82rem;outline:none} .add-inp:focus{border-color:var(--accent)} .btn-add{padding:8px 14px;background:var(--accent);border:none;border-radius:7px;color:white;font-size:.8rem;font-weight:600;cursor:pointer;white-space:nowrap} .comp-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .comp-tag{display:flex;align-items:center;gap:4px;background:var(--s3);border:1px solid var(--border);border-radius:6px;padding:3px 8px;font-size:.75rem} .comp-tag button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.8rem;line-height:1;padding:0 2px} .comp-tag button:hover{color:var(--rouge-texte,var(--red))} .ideal-sliders{margin-top:12px} .ideal-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:.78rem} .ideal-row label{width:100px;color:var(--muted);flex-shrink:0} .ideal-row input[type=range]{flex:1;accent-color:var(--accent)} .ideal-row.val{font-family:'Space Mono',monospace;font-size:.72rem;min-width:32px;text-align:right;color:var(--accent-texte,var(--accent))} /* ── IMPORT ── */ .import-box{background:var(--s1);border:2px dashed var(--border);border-radius:var(--r);padding:48px 40px;text-align:center;margin-bottom:24px;transition:border-color .25s cubic-bezier(.4,0,.2,1),background .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s;cursor:pointer;position:relative;overflow:hidden} .import-box:hover,.import-box.drag{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 4%, var(--s1));transform:translateY(-1px);box-shadow:var(--shadow-md)} .import-box .import-icon-wrap{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:color-mix(in srgb, var(--accent) 10%, transparent);margin-bottom:16px;transition:transform .25s ease} .import-box:hover .import-icon-wrap,.import-box.drag .import-icon-wrap{transform:scale(1.08)} .import-box .import-icon-wrap .icon-2d{width:36px;height:36px;background-color:var(--accent)} .import-box h3{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1.05rem;margin-bottom:6px;color:var(--text)} .import-box p{color:var(--muted);font-size:.84rem;margin-bottom:16px} .import-box .import-formats{display:flex;gap:6px;justify-content:center;margin-top:14px;flex-wrap:wrap} .import-box.import-formats span{background:var(--s2);border:1px solid var(--border);color:var(--muted);font-size:.7rem;font-weight:600;padding:3px 9px;border-radius:999px;font-family:'Space Mono',monospace;letter-spacing:.02em} /* Bloc « Comment exporter » : étapes visuelles */ .export-guide{background:var(--s1);border:1px solid var(--border);border-radius:var(--r);padding:24px 28px;margin-bottom:20px} .export-guide-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.95rem;margin-bottom:18px;display:flex;align-items:center;gap:8px;color:var(--text)} /* Accordéon : sous-sections repliables (onglet Import). N'ouvrir que ce qui intéresse. */ .acc{border:1px solid var(--border);border-radius:14px;background:var(--s2);margin-bottom:12px;overflow:hidden;transition:border-color .2s} .acc[open]{border-color:rgba(224,32,40,.35)} .acc>summary.acc-sum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:15px 18px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.95rem;color:var(--text);user-select:none} .acc>summary.acc-sum::-webkit-details-marker{display:none} .acc>summary.acc-sum::marker{content:''} .acc>summary.acc-sum:hover{color:var(--accent-texte,var(--accent))} .acc .acc-chev{margin-left:auto;width:16px;height:16px;flex-shrink:0;transition:transform .25s;background-color:var(--muted);-webkit-mask-image:var(--ic-abc96c185b);mask-image:var(--ic-abc96c185b);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center} .acc[open]>summary.acc-sum .acc-chev{transform:rotate(180deg)} .acc .acc-body{padding:0 18px 18px} .acc .acc-body>.sh-sub:first-child{margin-top:0} .export-guide-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0} @media(max-width:900px){.export-guide-steps{grid-template-columns:1fr}} .export-step{display:flex;gap:14px;align-items:flex-start;padding:14px;background:var(--s2);border:1px solid var(--border);border-radius:10px;transition:border-color .2s} .export-step:hover{border-color:var(--accent)} .export-step-num{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.95rem} .export-step-body{flex:1;min-width:0} .export-step-title{font-size:.84rem;font-weight:600;color:var(--text);margin-bottom:4px;line-height:1.3} .export-step-desc{font-size:.74rem;color:var(--muted);line-height:1.45} .export-step-desc code{background:var(--s3);padding:1px 6px;border-radius:4px;font-family:'Space Mono',monospace;font-size:.7rem;color:var(--text)} .import-preview{background:var(--s1);border:1px solid var(--border);border-radius:var(--r);padding:16px;margin-top:12px;font-size:.78rem;color:var(--green)} .col-map{background:var(--s1);border:1px solid var(--border);border-radius:var(--r);padding:20px;margin-bottom:20px} .col-map h4{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.85rem;margin-bottom:12px} .col-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-bottom:8px;font-size:.8rem} .col-row select{background:var(--s2);border:1px solid var(--border);border-radius:6px;padding:6px 10px;color:var(--text);font-size:.78rem;outline:none} .arrow-icon{color:var(--muted)} /* ── CLIENT VIEW ── */ .client-hero{background:var(--hero-gradient);border-bottom:1px solid var(--border);padding:48px 40px;text-align:center;margin-bottom:32px} .client-hero h1{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:2rem;letter-spacing:-1px;margin-bottom:8px} .client-hero h1 em{color:var(--accent-texte,var(--accent));font-style:normal} .client-hero p{color:var(--muted);font-size:.9rem;max-width:500px;margin:0 auto} .offres-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:40px} .offre-card{box-shadow:var(--shadow);background:var(--s1);border:1px solid var(--border);border-radius:var(--r);padding:22px} .offre-card h3{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.95rem;margin-bottom:12px} .offre-stat{display:flex;justify-content:space-between;font-size:.8rem;padding:5px 0;border-bottom:1px solid var(--border)} .offre-stat:last-child{border-bottom:none} .offre-stat .val{font-weight:600} .pool-radar{display:flex;align-items:center;justify-content:center;margin-top:12px} /* Page Header : style landing (Phase 5A.4.b) */ .sh{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:32px;flex-wrap:wrap;gap:16px} .sh-left{flex:1;min-width:280px;display:flex;flex-direction:column;gap:12px} .sh-eyebrow{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:0;background:transparent;border:0;border-radius:0;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;font-weight:500;color:var(--muted);text-transform:uppercase} .sh-eyebrow::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent)} .sh h2{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-weight:400;font-size:2.5rem;line-height:1.1;letter-spacing:-.02em;margin:0;color:var(--text)} .sh h2 em{font-style:normal;color:var(--muted);font-weight:400} .sh-sub{font-family:'Plus Jakarta Sans',sans-serif;font-size:.95rem;color:var(--muted);max-width:600px;line-height:1.55;margin:0} .sh .meta{font-size:.85rem;color:var(--muted);align-self:flex-end;text-align:right} @media (max-width:600px){.sh h2{font-size:1.9rem}} /* ── MISC ── */ .legend{display:flex;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap} .legend-item{display:flex;align-items:center;gap:5px;font-size:.75rem;color:var(--muted)} .legend-line{width:24px;height:2px;border-radius:1px} .legend-dashed{background:repeating-linear-gradient(90deg,#e8edf7 0,#e8edf7 4px,transparent 4px,transparent 8px)} .empty{text-align:center;color:var(--muted);padding:48px;font-size:.85rem} .divider{border:none;border-top:1px solid var(--border);margin:24px 0} .tag{display:inline-block;padding:2px 8px;border-radius:6px;font-size:.7rem;font-weight:600;background:var(--s3);border:1px solid var(--border);color:var(--muted);margin-right:4px} @media(max-width:700px){ .card-top{grid-template-columns:1fr} .card-radar,.card-score{border:none;border-bottom:1px solid var(--border)} .card-detail{grid-template-columns:1fr !important} .stats-row{grid-template-columns:1fr 1fr} .config-grid{grid-template-columns:1fr} } /* ═══════════ Phase 3D.1 : Kanban ═══════════ */ .view-toggle{display:inline-flex;gap:0;border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-left:8px} .view-btn{padding:8px 14px;background:transparent;color:var(--muted);border:0;cursor:pointer;font-size:.85rem;transition:color .18s cubic-bezier(.4,0,.2,1),background .18s cubic-bezier(.4,0,.2,1)} .view-btn:hover{background:var(--overlay-low);color:var(--text)} .view-btn.on{background:var(--accent);color:#fff} /* Phase 5A.4.q v2 : Kanban vraiment plein largeur, 5 colonnes systématiquement visibles */ #admin-candidats{max-width:none;padding:32px 28px} #admin-kanban-board{display:flex;gap:10px;overflow-x:auto;padding:10px 0 20px;min-height:500px;width:100%} .kanban-col{flex:1 1 0;min-width:180px;background:var(--overlay-low);border:1px solid var(--border);border-radius:12px;padding:12px;display:flex;flex-direction:column;max-height:75vh} .kanban-col.drag-over{background:var(--brand-bg);border-color:var(--accent)} .kanban-col-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:2px solid var(--border);margin-bottom:10px} .kanban-col-title{font-weight:700;font-size:.9rem;letter-spacing:.5px} .kanban-col-count{background:var(--s1);padding:2px 9px;border-radius:10px;font-size:.75rem;color:var(--muted)} .kanban-col-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-right:4px} .kanban-col-body::-webkit-scrollbar{width:6px} .kanban-col-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px} /* ═══════════════════════════════════════════════════════════════════ Phase 5A.5 : POLISH MODERNE GLOBAL (effet "waw") ═══════════════════════════════════════════════════════════════════ */ /* ─── 1. Background body avec gradient ultra-subtle pour la profondeur ─── */ /* Fond ambiant "cockpit" (proposition design) : 2 halos rouge+cyan + grille technique 56px */ body{background:var(--bg); background-image: radial-gradient(950px 620px at 78% -8%, rgba(224,32,40,.13), transparent 60%), radial-gradient(760px 540px at 2% 102%, rgba(41,212,217,.07), transparent 60%), linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size:auto,auto,56px 56px,56px 56px; background-attachment:fixed; min-height:100vh} [data-theme="light"] body{ background-image: radial-gradient(950px 620px at 78% -8%, rgba(224,32,40,.06), transparent 60%), radial-gradient(760px 540px at 2% 102%, rgba(41,212,217,.05), transparent 60%), linear-gradient(rgba(0,0,0,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.022) 1px, transparent 1px); background-size:auto,auto,56px 56px,56px 56px;} /* ─── 2. Animation d'entrée des panels ─── */ @keyframes panelEnter{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} } .panel.on{animation:panelEnter .42s cubic-bezier(.22,.61,.36,1)} /* ─── 3. Page headers (.sh) plus impactants ─── */ .sh{margin-bottom:36px;padding-bottom:24px;border-bottom:1px solid var(--border);position:relative} .sh::after{content:"";position:absolute;left:0;bottom:-1px;width:56px;height:2px;background:linear-gradient(90deg,var(--accent),transparent);border-radius:1px} .sh-eyebrow{letter-spacing:.14em} .sh-eyebrow:hover{background:rgba(224,32,40,.15);transform:translateY(-1px)} .sh h2{font-size:2.6rem;letter-spacing:-.024em} .sh-sub{font-size:1rem;line-height:1.6} /* ─── 4. Stats cards : gradient subtle + hover lift + KPI plus impactant ─── */ .stats-row{gap:18px;margin-bottom:36px} .stat-card{background:linear-gradient(180deg,var(--s1) 0%,var(--s2) 100%);border-radius:14px;padding:22px 24px;transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s;position:relative;overflow:hidden} .stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)} .stat-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity .3s} .stat-card:hover::before{opacity:.5} .stat-lbl{font-size:.66rem;letter-spacing:.08em;margin-bottom:8px;font-weight:600} .stat-val{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:2.2rem;letter-spacing:-.03em;line-height:1;color:var(--text)} .stat-sub{margin-top:6px;font-size:.74rem} /* ─── 5. Filtres top en pill style moderne ─── */ .filters{background:var(--s1);border:1px solid var(--border);border-radius:14px;padding:14px 18px;margin-bottom:20px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;box-shadow:var(--shadow-sm)} .filters .search-input,.filters input[type="text"],.filters input[type="search"],.filters select{background:var(--s2);border:1.5px solid var(--border);border-radius:10px;padding:9px 14px;font-family:inherit;font-size:.88rem;color:var(--text);outline:none;transition:border-color .18s cubic-bezier(.4,0,.2,1),box-shadow .18s;flex:1;min-width:160px} .filters input:focus,.filters select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,0,0,.12)} /* ─── 6. Toggle Kanban/Liste : modern pill avec slide ─── */ .view-toggle{display:inline-flex;gap:2px;background:var(--s2);border:1.5px solid var(--border);border-radius:10px;padding:3px;margin-left:auto} .view-btn{padding:8px 16px;background:transparent;color:var(--muted);border:0;cursor:pointer;font-size:.85rem;font-weight:500;border-radius:8px;transition:background .22s cubic-bezier(.4,0,.2,1),color .22s cubic-bezier(.4,0,.2,1),box-shadow .22s;display:inline-flex;align-items:center;gap:6px} .view-btn:hover{color:var(--text)} .view-btn.on{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.35),0 0 0 1px var(--accent)} /* ─── 7. Kanban : colonnes + cards modernisées ─── */ .kanban-col{background:var(--overlay-low);border:1px solid var(--border);border-radius:14px;padding:14px;transition:background .2s,border-color .2s} .kanban-col.drag-over{background:var(--brand-bg);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)} .kanban-col-header{padding-bottom:12px;border-bottom:2px solid var(--border);margin-bottom:12px} .kanban-col-title{font-size:.86rem;letter-spacing:.04em;font-weight:700;text-transform:uppercase} .kanban-col-count{background:var(--s1);padding:3px 11px;border-radius:12px;font-size:.72rem;color:var(--muted);font-weight:600;border:1px solid var(--border)} /* Cards Kanban : élévation + hover lift + accent gradient subtle */ .kanban-card{background:var(--s1);border:1px solid var(--border);border-radius:14px;padding:12px 12px 10px;cursor:grab;transition:transform .22s cubic-bezier(.4,0,.2,1),box-shadow .22s,border-color .22s;border-left:3px solid var(--accent);box-shadow:var(--shadow-sm);position:relative} .kanban-card::before{content:"";position:absolute;inset:0;border-radius:10px;background:linear-gradient(135deg,rgba(224,32,40,.04) 0%,transparent 40%);opacity:0;transition:opacity .25s;pointer-events:none} .kanban-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,0,0,.28);border-color:rgba(224,32,40,.25)} .kanban-card:hover::before{opacity:1} .kanban-card:active{cursor:grabbing;transform:translateY(0) scale(.99)} .kanban-card-top{margin-bottom:8px} .kanban-card-name{font-weight:600;font-size:.92rem;letter-spacing:-.01em} .kanban-card-poste{font-size:.76rem;color:var(--muted);margin-bottom:10px;line-height:1.4} .kanban-card-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .kanban-card-pole{display:inline-flex;align-items:center;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:6px;border:1px solid;white-space:nowrap} .kanban-card-hire{display:flex;align-items:center;margin-top:9px;padding-top:9px;border-top:1px solid var(--border)} .kanban-hire-btn{display:inline-flex;align-items:center;gap:7px;flex:1;min-width:0;padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:var(--s2);color:var(--text);font-family:inherit;font-size:.76rem;cursor:pointer;transition:border-color .14s,background .14s} .kanban-hire-btn:hover{border-color:var(--accent);background:var(--brand-bg)} .kanban-hire-btn.icon-2d{width:15px;height:15px;flex-shrink:0;background:#4AA37B} .kanban-hire-btn span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kanban-card-hire.is-hired.kanban-hire-btn{border-color:rgba(22,163,74,.45);background:rgba(22,163,74,.10);color:#4AA37B;font-weight:600} .kanban-card-hire:not(.is-hired) .kanban-hire-btn{color:var(--muted, #9aa0a8)} .kanban-card-hire:not(.is-hired) .kanban-hire-btn .icon-2d{background:#8A93A3} /* Date picker custom (calendrier brandé) */ .mdp{position:absolute;z-index:10000;width:258px;background:linear-gradient(180deg,#20242f,#14171f);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:12px;box-shadow:0 28px 70px -20px rgba(0,0,0,.9);color:#e6e9f2;display:none;opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top left;transition:opacity .16s cubic-bezier(.4,0,.2,1),transform .16s cubic-bezier(.4,0,.2,1);font-size:.82rem} .mdp.is-open{opacity:1;transform:none} .mdp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .mdp-title{font-weight:700;font-size:.86rem;text-transform:capitalize} .mdp-nav{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);border-radius:9px;color:#d7dbe6;cursor:pointer;font-size:1.1rem;line-height:1;transition:background .14s,border-color .14s,color .14s} .mdp-nav:hover{background:rgba(224,32,40,.16);border-color:rgba(224,32,40,.45);color:#fff} .mdp-grid-head{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px} .mdp-grid-head span{text-align:center;font-size:.62rem;font-weight:600;color:#8b93ad;text-transform:uppercase;letter-spacing:.03em;padding:3px 0} .mdp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .mdp-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:0;background:none;color:#d7dbe6;font-family:inherit;font-size:.8rem;font-weight:500;border-radius:9px;cursor:pointer;transition:background .12s,color .12s} .mdp-day.is-out{visibility:hidden} button.mdp-day:hover{background:rgba(255,255,255,.08);color:#fff} .mdp-day.is-today{box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)} .mdp-day.is-sel,button.mdp-day.is-sel:hover{background:var(--accent);color:#fff;font-weight:700} .mdp-foot{display:flex;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1)} .mdp-link{border:0;background:none;color:#ff5158;font-family:inherit;font-size:.78rem;font-weight:600;cursor:pointer;padding:4px 6px;border-radius:7px;transition:background .12s} .mdp-link:hover{background:rgba(224,32,40,.12)} /* Gamification : confettis de célébration (embauche) */ .confetti-layer{position:fixed;inset:0;pointer-events:none;z-index:11000;overflow:hidden} .confetti-piece{position:absolute;top:-24px;opacity:0;animation-name:confettiFall;animation-timing-function:cubic-bezier(.3,.1,.5,1);animation-fill-mode:forwards} @keyframes confettiFall{0%{opacity:1;transform:translate3d(0,-24px,0) rotate(0)}100%{opacity:.85;transform:translate3d(var(--drift),102vh,0) rotate(760deg)}} /* Gamification : panneau Progression (Stats) */ .gamif{background:linear-gradient(180deg,var(--s1),rgba(24,28,38,.55));border:1px solid var(--border);border-radius:18px;padding:20px 22px;margin-bottom:22px;display:grid;grid-template-columns:1fr 1fr;gap:20px 30px} .gamif-level{grid-column:1/-1;display:flex;align-items:center;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--border)} .gamif-level-badge{width:56px;height:56px;flex-shrink:0;border-radius:16px;background:linear-gradient(135deg,var(--accent),#B91C1C);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:800;box-shadow:0 8px 22px -6px rgba(0,0,0,.6)} .gamif-level-body{flex:1;min-width:0} .gamif-level-name{font-weight:700;font-size:1.05rem;letter-spacing:-.01em;margin-bottom:8px} .gamif-xp-track{height:9px;border-radius:5px;background:rgba(128,128,128,.16);overflow:hidden} .gamif-xp-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--accent),#ff6b6b);transition:width .7s cubic-bezier(.4,0,.2,1)} .gamif-xp-txt{font-size:.72rem;color:var(--muted);margin-top:6px;font-family:'Space Mono',monospace} .gamif-col-t{font-size:.63rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--muted);margin-bottom:12px} .gamif-obj{margin-bottom:13px} .gamif-obj-top{display:flex;justify-content:space-between;font-size:.78rem;margin-bottom:6px} .gamif-obj-top span{color:var(--muted)} .gamif-obj-top b{font-weight:700} .gamif-obj-track{height:7px;border-radius:4px;background:rgba(128,128,128,.16);overflow:hidden} .gamif-obj-fill{height:100%;border-radius:4px;transition:width .7s cubic-bezier(.4,0,.2,1)} .gamif-badges{display:flex;flex-wrap:wrap;gap:9px} .gamif-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border-radius:11px;border:1px solid var(--border);background:rgba(128,128,128,.05);font-size:.75rem;font-weight:600;color:var(--muted);opacity:.5;filter:grayscale(1);transition:opacity .25s,filter .25s,border-color .25s} .gamif-badge .icon-2d{width:16px;height:16px;background:currentColor} .gamif-badge.is-on{opacity:1;filter:none;color:var(--text);border-color:rgba(224,32,40,.32);background:rgba(224,32,40,.08)} .gamif-badge.is-on .icon-2d{background:var(--accent)} .gamif-streak{display:none;align-items:center;gap:6px;margin-left:auto;flex-shrink:0;font-size:.8rem;font-weight:700;color:#C79A4E;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.35);border-radius:99px;padding:6px 13px} .gamif-streak.is-on{display:inline-flex} .gamif-streak.icon-2d{width:15px;height:15px;background:#C79A4E} .gamif-lb{grid-column:1/-1;border-top:1px solid var(--border);padding-top:16px} .gamif-lb:empty{display:none} .gamif-lb-row{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:.82rem} .gamif-lb-rank{width:22px;height:22px;flex-shrink:0;border-radius:6px;background:rgba(128,128,128,.12);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.72rem;color:var(--muted)} .gamif-lb-top.gamif-lb-rank{background:rgba(245,158,11,.18);color:#C79A4E} .gamif-lb-name{flex:1;min-width:0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gamif-lb-streak{font-family:'Space Mono',monospace;font-weight:700;color:#C79A4E;flex-shrink:0} @media(max-width:900px){.gamif{grid-template-columns:1fr}} .kanban-card-score,.kanban-card-compat{padding:3px 9px;border-radius:6px;font-size:.7rem;font-weight:700;font-family:'Space Mono',monospace;letter-spacing:-.02em} /* Micro-délice : brillance sur un score / match parfait (100) */ .kanban-card-score.is-perfect,.kanban-card-compat.is-perfect{position:relative;overflow:hidden;box-shadow:0 0 0 1px rgba(22,163,74,.4),0 0 13px -2px rgba(22,163,74,.55)} .kanban-card-score.is-perfect::after,.kanban-card-compat.is-perfect::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 32%,rgba(255,255,255,.6) 50%,transparent 68%);transform:translateX(-130%);animation:badgeShine 2.8s ease-in-out infinite} @keyframes badgeShine{0%,55%{transform:translateX(-130%)}100%{transform:translateX(130%)}} /* Micro-délice : pop de la carte déplacée */ .kanban-card.kanban-pop{animation:kanbanPop .55s cubic-bezier(.34,1.56,.64,1)} @keyframes kanbanPop{0%{transform:scale(.93)}60%{transform:scale(1.03)}100%{transform:scale(1)}} /* Micro-délice : 100 qui brille (anneau Match cockpit + classement) */ /* Un 100 merite une marque, pas une pulsation sans fin dans un outil de travail. La lueur reste, elle cesse de clignoter. */ .ring-perfect{filter:drop-shadow(0 0 6px rgba(79,163,150,.35))} .ring-perfect.ring-num{background:linear-gradient(110deg,#fff 25%,#FFE08A 45%,#4FA396 60%,#fff 82%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:perfectShimmer 3s linear infinite} .ck-rowmatch.is-perfect{background:linear-gradient(110deg,#4AA37B 18%,#FFE08A 45%,#4AA37B 72%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:perfectShimmer 3s linear infinite} @keyframes perfectShimmer{to{background-position:-220% center}} /* Import multi-CV : ligne de progression */ .cvimp-line{font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:8px;padding:6px 0} .cvimp-done{color:var(--green);font-weight:600} .cvimp-done .icon-2d{width:16px;height:16px;background:var(--green);flex-shrink:0} /* Empty state Kanban : message subtle quand colonne vide */ .kanban-col-body:empty::before{content:"Glissez un candidat ici";display:block;text-align:center;padding:32px 12px;color:var(--muted);font-size:.74rem;font-style:normal;opacity:.55;border:1.5px dashed var(--border);border-radius:10px;margin-top:8px} /* ─── 8. Buttons primaires modernisés ─── */ .btn-primary{position:relative;overflow:hidden;letter-spacing:.005em} .btn-primary::after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,.25);transform:translate(-50%,-50%);transition:width .4s,height .4s} .btn-primary:hover::after{width:300px;height:300px} .btn-primary:hover{background:var(--brand-600)} .btn-primary:active{transform:translateY(0)} /* ─── 9. Nav : tab active avec underline animé ─── */ .nav-tab{position:relative;padding:18px 18px;font-weight:500} .nav-tab::after{content:"";position:absolute;bottom:-1px;left:50%;width:0;height:2px;background:var(--accent);transition:width .3s cubic-bezier(.4,0,.2,1);transform:translateX(-50%);border-radius:1px} .nav-tab.on::after,.nav-tab:hover::after{width:60%} .nav-tab.on{color:var(--accent-texte,var(--accent));font-weight:600;border-bottom-color:transparent} .nav-tab:hover{color:var(--text);background:rgba(0,0,0,.02);border-bottom-color:transparent} /* ─── 10. Scrollbar subtle qui matche la palette ─── */ ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--border);border-radius:5px;border:2px solid var(--bg)} ::-webkit-scrollbar-thumb:hover{background:var(--muted)} /* ═══════════════════════════════════════════════════════════════════ Phase 5A.6 : REFONTE PREMIUM 2026 (effet "waw" pushé à fond) ═══════════════════════════════════════════════════════════════════ */ /* ─── 1. Multi-layered shadows style Vercel/Linear ─── */ :root{ --shadow-premium-sm: 0 1px 2px rgba(15,15,20,.04), 0 1px 1px rgba(15,15,20,.03); --shadow-premium-md: 0 4px 6px -1px rgba(15,15,20,.05), 0 2px 4px -2px rgba(15,15,20,.04), 0 0 0 1px rgba(15,15,20,.02); --shadow-premium-lg: 0 10px 25px -5px rgba(15,15,20,.08), 0 8px 10px -6px rgba(15,15,20,.04), 0 0 0 1px rgba(15,15,20,.02); --shadow-premium-xl: 0 25px 50px -12px rgba(15,15,20,.18), 0 0 0 1px rgba(15,15,20,.02); --shadow-brand-glow: 0 10px 30px -10px rgba(224,32,40,.40), 0 0 0 1px rgba(224,32,40,.10); } :root[data-theme="dark"]{ --shadow-premium-sm: 0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.3); --shadow-premium-md: 0 4px 6px -1px rgba(0,0,0,.4), 0 2px 4px -2px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.04); --shadow-premium-lg: 0 10px 25px -5px rgba(0,0,0,.5), 0 8px 10px -6px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.04); --shadow-premium-xl: 0 25px 50px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04); } /* ─── 2. Background : blobs animés en mesh subtle ─── */ body::before, body::after{ content:"";position:fixed;border-radius:50%;filter:blur(120px);opacity:.55;pointer-events:none;z-index:-1;will-change:transform; } body::before{ width:600px;height:600px;background:radial-gradient(circle,rgba(224,32,40,.18) 0%,transparent 70%);top:-200px;right:-200px; animation:blobFloat1 22s ease-in-out infinite alternate; } body::after{ width:500px;height:500px;background:radial-gradient(circle,rgba(224,32,40,.12) 0%,transparent 70%);bottom:-150px;left:-150px; animation:blobFloat2 28s ease-in-out infinite alternate; } :root[data-theme="dark"] body::before{opacity:.35} :root[data-theme="dark"] body::after{opacity:.22} @keyframes blobFloat1{ 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(-80px,60px) scale(1.15)} } @keyframes blobFloat2{ 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(70px,-50px) scale(1.18)} } /* ─── 3. Glassmorphism sur nav (frosted glass effect) ─── */ nav.main-nav, .nav, header.nav, .top-nav{ backdrop-filter:blur(24px) saturate(1.8); -webkit-backdrop-filter:blur(24px) saturate(1.8); background:rgba(var(--s1-rgb, 255,255,255), .72) !important; border-bottom:1px solid rgba(var(--border-rgb, 230,230,230), .55); position:sticky;top:0;z-index:100; } /* Fallback si nav n'a pas une classe identifiée : on cible la 1ère structure de top nav */ body > div:first-child > nav, .nav-wrap{ backdrop-filter:blur(24px) saturate(1.8); -webkit-backdrop-filter:blur(24px) saturate(1.8); } /* ─── 4. Hero page headers DRAMATIQUES ─── */ .sh{padding-bottom:32px;margin-bottom:44px;position:relative} .sh::before{content:"";position:absolute;left:-28px;top:0;width:3px;height:calc(100% - 24px);background:linear-gradient(180deg,var(--accent) 0%,transparent 100%);border-radius:2px;opacity:.5} .sh h2{font-size:3rem;letter-spacing:-.035em;font-weight:400;line-height:1.05;text-wrap:balance} .sh h2 em{font-style:normal;color:var(--accent-texte,var(--accent));font-weight:400;text-shadow:0 0 30px rgba(224,32,40,.25)} .sh-eyebrow{box-shadow:none} .sh-sub{font-size:1.05rem;line-height:1.65;max-width:680px;color:var(--muted);font-weight:400} @media (max-width:900px){.sh::before{display:none}.sh h2{font-size:2.2rem}} /* ─── 5. Stats cards premium avec sparkline SVG ─── */ .stat-card{ padding:24px 26px 28px; box-shadow:var(--shadow-premium-md); border:1px solid rgba(var(--border-rgb, 230,230,230), .65); position:relative; overflow:hidden; background:linear-gradient(180deg,var(--s1) 0%,color-mix(in srgb,var(--s1) 95%, var(--accent) 5%) 100%); transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s, border-color .3s; } .stat-card:hover{ transform:translateY(-5px) scale(1.01); box-shadow:var(--shadow-premium-lg); border-color:rgba(224,32,40,.20); } /* La courbe decorative a ete retiree : c etait un SVG fixe, identique sur les quatre tuiles, qui se lisait comme une tendance sans rien mesurer. */ .stat-card:hover::after{opacity:.35;transform:translateY(-2px)} .stat-val{font-size:2.5rem;letter-spacing:-.03em;background:linear-gradient(135deg,var(--text) 0%,color-mix(in srgb,var(--text) 70%,var(--accent) 30%) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} /* ─── 6. Kanban cards PREMIUM ─── */ .kanban-card{ padding:14px 14px 12px !important; border-radius:12px !important; border:1px solid rgba(var(--border-rgb, 230,230,230), .55) !important; border-left:none !important; box-shadow:var(--shadow-premium-sm) !important; background:var(--s1) !important; position:relative; overflow:hidden; transition:transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s, border-color .28s !important; } .kanban-card::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--accent) 0%,rgba(224,32,40,.4) 100%); border-radius:0;opacity:.85; } .kanban-card:hover{ transform:translateY(-3px) scale(1.015) !important; box-shadow:var(--shadow-brand-glow) !important; border-color:rgba(224,32,40,.25) !important; } .kanban-card:hover::before{opacity:1;width:4px} .kanban-card-name{font-size:.94rem;font-weight:600;letter-spacing:-.012em;margin-bottom:2px} .kanban-card-poste{font-size:.78rem;color:var(--muted);margin-bottom:12px} .kanban-card-score, .kanban-card-compat{ padding:4px 10px; border-radius:8px; font-size:.7rem; font-weight:700; font-family:'Space Mono',monospace; letter-spacing:-.02em; border:1px solid transparent; } /* Empty states Kanban illustrés */ .kanban-col-body:empty::before{ content:""; display:block; height:80px; margin:24px auto 8px; width:80px; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:center; background-size:contain; } .kanban-col-body:empty::after{ content:"Glissez un candidat ici"; display:block; text-align:center; padding:0 12px 24px; color:var(--muted); font-size:.74rem; font-style:normal; opacity:.6; border:0; } /* ─── 7. Modal candidat premium glassmorphism + multi-shadow ─── */ .cmodal{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);background:rgba(0,0,0,.55)} .cmodal-content{ box-shadow:0 32px 80px rgba(0,0,0,.45) !important; border:1px solid rgba(var(--border-rgb, 230,230,230), .50) !important; backdrop-filter:saturate(1.4); -webkit-backdrop-filter:saturate(1.4); } /* ─── 8. Page transitions EN CASCADE (stagger animation) ─── */ @keyframes staggerIn{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} } .panel.on .sh{animation:staggerIn .5s cubic-bezier(.22,.61,.36,1) both;animation-delay:0s} .panel.on .stats-row{animation:staggerIn .5s cubic-bezier(.22,.61,.36,1) both;animation-delay:.06s} .panel.on .filters{animation:staggerIn .5s cubic-bezier(.22,.61,.36,1) both;animation-delay:.12s} .panel.on #admin-kanban-board, .panel.on .kanban-board, .panel.on .pool-table-wrap, .panel.on .config-grid{ animation:staggerIn .5s cubic-bezier(.22,.61,.36,1) both;animation-delay:.18s } .panel.on .stats-row > *:nth-child(1){animation-delay:.08s} .panel.on .stats-row > *:nth-child(2){animation-delay:.14s} .panel.on .stats-row > *:nth-child(3){animation-delay:.20s} .panel.on .stats-row > *:nth-child(4){animation-delay:.26s} /* ─── 9. Subtle hover effects partout (buttons, cards, links) ─── */ button:not(:disabled), .btn, [role="button"]{transition:transform .15s cubic-bezier(.4,0,.2,1), box-shadow .15s cubic-bezier(.4,0,.2,1), background .15s cubic-bezier(.4,0,.2,1), color .15s cubic-bezier(.4,0,.2,1), border-color .15s cubic-bezier(.4,0,.2,1), opacity .15s cubic-bezier(.4,0,.2,1)} button:not(:disabled):active, .btn:active{transform:scale(.97)} /* ─── 10. Toggle thème : 36×36 plus moderne ─── */ .theme-toggle{ width:38px;height:38px;border-radius:10px; display:inline-flex;align-items:center;justify-content:center; background:var(--s1);border:1px solid var(--border);cursor:pointer; transition:background .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s; box-shadow:var(--shadow-premium-sm); } .theme-toggle:hover{ background:var(--brand-bg);border-color:var(--accent);color:var(--accent-texte,var(--accent)); transform:rotate(-12deg) scale(1.05); box-shadow:var(--shadow-brand-glow); } /* ─── 11. Custom RGB color variables for opacity blending ─── */ :root{ --s1-rgb: 255,255,255; --border-rgb: 220,220,220; } :root[data-theme="dark"]{ --s1-rgb: 32,32,38; --border-rgb: 56,56,64; } /* ─── 12. Boutons primary upgrade : letter spacing + smooth gradient ─── */ .btn-primary{ background:var(--accent); box-shadow:none; font-weight:600;letter-spacing:.005em; } .btn-primary:hover{ background:var(--brand-600); box-shadow:none; transform:none; } .btn-primary:active{transform:translateY(0)} /* ═══════════════════════════════════════════════════════════════════ Phase 5A.7 : MAGIC UI (effet "waw" niveau Linear/Vercel/Stripe) ═══════════════════════════════════════════════════════════════════ */ /* ─── 1. Aurora gradient animé : 3e blob couleur secondaire ─── */ body > .aurora-blob-3{ position:fixed;width:550px;height:550px;border-radius:50%;filter:blur(140px);opacity:.30;pointer-events:none;z-index:-1; background:radial-gradient(circle,rgba(180,32,80,.16) 0%,transparent 70%); top:30%;left:40%; animation:auroraFloat3 32s ease-in-out infinite alternate; will-change:transform; } @keyframes auroraFloat3{ 0%{transform:translate(0,0) scale(1)} 50%{transform:translate(100px,-80px) scale(1.2)} 100%{transform:translate(-60px,100px) scale(.95)} } :root[data-theme="dark"] body > .aurora-blob-3{opacity:.18} /* ─── 2. Noise texture overlay (look "papier" premium) ─── */ .noise-overlay{ position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.025; background-image:url("data:image/svg+xml;utf8,"); background-repeat:repeat; } :root[data-theme="dark"] .noise-overlay{opacity:.04;mix-blend-mode:overlay} /* ─── 3. Custom selection color (rouge Teknet subtle) ─── */ ::selection{background:rgba(224,32,40,.22);color:var(--text)} ::-moz-selection{background:rgba(224,32,40,.22);color:var(--text)} /* ─── 4. Cards Kanban : 3D tilt préparé + spotlight effect via mousemove ─── */ .kanban-card{ --mouse-x:50%;--mouse-y:50%; transform-style:preserve-3d; will-change:transform; cursor:grab; } .kanban-card:active{cursor:grabbing} .kanban-card::after{ content:"";position:absolute;inset:0;border-radius:12px; background:radial-gradient(circle 240px at var(--mouse-x) var(--mouse-y),rgba(224,32,40,.10) 0%,transparent 50%); opacity:0;transition:opacity .35s;pointer-events:none; } .kanban-card:hover::after{opacity:1} .kanban-card .avatar{transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s} .kanban-card:hover .avatar{transform:scale(1.12);box-shadow:0 4px 14px -2px rgba(0,0,0,.4)} /* ─── 5. Cascade entrance des Kanban cards (stagger progressif) ─── */ @keyframes kanbanCardEnter{ from{opacity:0;transform:translateY(20px) scale(.95)} to{opacity:1;transform:translateY(0) scale(1)} } .panel.on .kanban-card{ animation:kanbanCardEnter .5s cubic-bezier(.22,.61,.36,1); } .panel.on .kanban-col-body .kanban-card:nth-child(1){animation-delay:.22s} .panel.on .kanban-col-body .kanban-card:nth-child(2){animation-delay:.28s} .panel.on .kanban-col-body .kanban-card:nth-child(3){animation-delay:.34s} .panel.on .kanban-col-body .kanban-card:nth-child(4){animation-delay:.40s} .panel.on .kanban-col-body .kanban-card:nth-child(5){animation-delay:.46s} .panel.on .kanban-col-body .kanban-card:nth-child(6){animation-delay:.52s} .panel.on .kanban-col-body .kanban-card:nth-child(n+7){animation-delay:.58s} /* ─── 6. Pulse glow sur le compteur Kanban "Nouveau" ─── */ @keyframes pulseGlow{ 0%, 100%{box-shadow:0 0 0 0 rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.1)} 50%{box-shadow:0 0 0 10px rgba(0,0,0,0),0 1px 3px rgba(0,0,0,.1)} } .kanban-col-count.pulse-active{ animation:pulseGlow 2.4s ease-out infinite; background:linear-gradient(135deg,#EF4444 0%,#DC2626 100%); color:#fff;border:0;font-weight:700; } /* ─── 7. Border gradient animé sur boutons primary ─── */ @keyframes gradientShift{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } .btn-primary{position:relative;isolation:isolate;z-index:1} .btn-primary::before{ content:"";position:absolute;inset:-2px;z-index:-1;border-radius:inherit; background:linear-gradient(135deg,#FF3838,#E5202A,#B91C1C,#E5202A,#FF3838); background-size:300% 300%; opacity:0;transition:opacity .3s; animation:gradientShift 4s ease infinite; } .btn-primary:hover::before{opacity:1} /* ─── 8. Stats cards : tilt 3D au hover + scale val ─── */ .stat-card{perspective:800px;transform-style:preserve-3d} .stat-card:hover{transform:translateY(-5px) scale(1.01) rotateX(2deg)} .stat-card .stat-val{transition:transform .3s cubic-bezier(.22,.61,.36,1)} .stat-card:hover .stat-val{transform:scale(1.04)} /* ─── 9. Avatar premium dans Kanban : taille +shadow inner highlight ─── */ .kanban-card .avatar-sm{width:46px;height:46px;font-size:.95rem;box-shadow:0 2px 6px rgba(0,0,0,.18),inset 0 0 0 2px rgba(255,255,255,.15)} /* ─── 10. Loading skeleton placeholder ─── */ @keyframes shimmer{ 0%{background-position:-200% 0} 100%{background-position:200% 0} } .skeleton{ background:linear-gradient(90deg,var(--s2) 25%,var(--s3) 50%,var(--s2) 75%); background-size:200% 100%; animation:shimmer 2s linear infinite; border-radius:6px;color:transparent;user-select:none; } /* ─── 11. Vivier cells : hover scale + brightness ─── */ .pool-td-compat-cell{transition:transform .2s cubic-bezier(.22,.61,.36,1),filter .2s} .pool-table tbody tr:hover .pool-td-compat-cell{transform:scale(1.05);filter:brightness(1.05)} /* ─── 12. Modal candidat : entrance animation plus dramatique ─── */ @keyframes modalSlideUp{ from{opacity:0;transform:translateY(10px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} } .cmodal.open .cmodal-content{animation:modalSlideUp .28s cubic-bezier(.4,0,.2,1) both} /* Mode démo vidéo (?filmdemo=1) : faux curseur + reveal automatique pour capture marketing. Jamais actif sans le paramètre d'URL, aucun effet sur l'app normale. */ .filmdemo-cursor{position:fixed;top:0;left:0;width:26px;height:26px;z-index:99999;pointer-events:none;transform:translate(-9999px,-9999px)} .filmdemo-cursor svg{display:block;width:26px;height:26px;filter:drop-shadow(0 3px 7px rgba(0,0,0,.5))} .filmdemo-cursor.filmdemo-move{transition:transform 1.2s cubic-bezier(.22,.61,.36,1)} .filmdemo-ripple{position:fixed;top:0;left:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(255,255,255,.5);pointer-events:none;z-index:99998;animation:filmdemoRipple .5s ease-out forwards} @keyframes filmdemoRipple{from{transform:scale(.3);opacity:.85}to{transform:scale(2.4);opacity:0}} .filmdemo-press{transition:transform .15s ease-out;transform:scale(.97)} .cmodal.open.filmdemo-open .cmodal-content{animation-duration:.4s} html.filmdemo-active [title="Test non complété : ce score n'est pas encore fiable"]{display:none} html.filmdemo-active #demo-sector-bar, html.filmdemo-active #userMenuAdmin, html.filmdemo-active #cmodal-notes-bubble{display:none!important} /* ─── 13. Pulse subtle sur la cellule du poste candidaté dans le Vivier ─── */ @keyframes pulseSubtle{ 0%, 100%{outline-color:rgba(224,32,40,.5)} 50%{outline-color:rgba(224,32,40,.85)} } .pool-td-compat-cell.is-current{animation:pulseSubtle 3s ease-in-out infinite} /* Phase 5A.10 : Vivier plein largeur pour mieux respirer */ #admin-pool{max-width:none;padding:32px 28px} .pool-table{min-width:1000px} .pool-table-wrap{max-height:calc(100vh - 220px)} /* Phase 5A.11 : Stats RH (mails, délais, pipeline) */ #admin-stats-rh{margin-top:48px} #admin-stats-rh .sh{margin-top:0;margin-bottom:28px} .rh-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px} @media(max-width:900px){.rh-stats-grid{grid-template-columns:1fr}} .rh-block{background:var(--s1);border:1px solid var(--border);border-radius:14px;padding:22px 24px;box-shadow:var(--shadow-premium-sm);transition:transform .25s,box-shadow .25s} .rh-block:hover{transform:translateY(-2px);box-shadow:var(--shadow-premium-md)} .rh-block-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:.95rem;letter-spacing:-.012em;color:var(--text);margin:0 0 16px;display:flex;align-items:center;gap:8px} .rh-block-title .icon-2d{width:18px;height:18px;background-color:var(--accent)} .rh-bar-row{display:grid;grid-template-columns:140px 1fr 48px;align-items:center;gap:12px;margin-bottom:10px;font-size:.84rem;font-family:'Plus Jakarta Sans',sans-serif} .rh-bar-row:last-child{margin-bottom:0} .rh-bar-lbl{color:var(--text);font-weight:500;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rh-bar{height:8px;background:var(--s2);border-radius:4px;overflow:hidden;position:relative} .rh-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent),#B91C1C);border-radius:4px;transition:width .8s cubic-bezier(.22,.61,.36,1)} .rh-bar-fill.status-fill{background:linear-gradient(90deg,#5B8AD9,#1D4ED8)} .rh-bar-fill.preselection-fill{background:linear-gradient(90deg,#06B6D4,#0891B2)} .rh-bar-fill.entretien-fill{background:linear-gradient(90deg,#C79A4E,#D97706)} .rh-bar-fill.offre-fill{background:linear-gradient(90deg,#10B981,#059669)} .rh-bar-fill.refuse-fill{background:linear-gradient(90deg,#6B7280,#4B5563)} .rh-bar-val{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;color:var(--text);text-align:right;font-size:.84rem} .rh-empty{padding:32px;text-align:center;color:var(--muted);font-size:.88rem;background:var(--s2);border-radius:10px;border:1px dashed var(--border)} /* Trend mensuel (chart en barres verticales) */ .rh-trend{display:flex;align-items:flex-end;gap:8px;height:140px;padding:8px 0;border-bottom:1px solid var(--border);margin-bottom:12px} .rh-trend-bar{flex:1;background:linear-gradient(180deg,var(--accent),#B91C1C);border-radius:6px 6px 0 0;min-height:4px;position:relative;transition:opacity .2s} .rh-trend-bar:hover{opacity:.85} .rh-trend-bar-val{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.78rem;color:var(--text)} .rh-trend-labels{display:flex;gap:8px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em} .rh-trend-label{flex:1;text-align:center} /* ═══════════════════════════════════════════════════════════════════ Phase 5A.8 : Fix retours visuels (DISC sectionnement + Vivier moderne + dark readability) ═══════════════════════════════════════════════════════════════════ */ /* ─── Fix 1 : Mode sombre : éclaircir les textes secondaires pour lisibilité ─── */ :root[data-theme="dark"]{ --muted: #8189A8; /* avant : #5a6380 → trop sombre. Maintenant plus clair pour lire les sub */ } :root[data-theme="dark"] .sh-sub{color:#9CA3B8} :root[data-theme="dark"] .pool-td-name-sub, :root[data-theme="dark"] .pool-td-poste-actuel, :root[data-theme="dark"] .pool-stat-lbl, :root[data-theme="dark"] .pool-stat-sub{color:#9098B5} :root[data-theme="dark"] .stat-lbl, :root[data-theme="dark"] .stat-sub{color:#A0A8C0} /* ═══════════════════════════════════════════════════════════════════ Phase 5A.12 : Contraste dark renforcé + Kanban scroll fix ═══════════════════════════════════════════════════════════════════ */ /* ─── Dark theme : cards et surfaces avec plus de profondeur ─── */ :root[data-theme="dark"] .kanban-card{ background:linear-gradient(180deg, #1F242F 0%, #181C26 100%) !important; border:1px solid #353B4D !important; box-shadow:0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.25) !important; } :root[data-theme="dark"] .kanban-card:hover{ background:linear-gradient(180deg, #252A37 0%, #1C202B 100%) !important; border-color:rgba(224,32,40,.40) !important; box-shadow:0 8px 24px -4px rgba(0,0,0,.30), 0 4px 8px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.15)!important; } :root[data-theme="dark"] .kanban-col{ background:rgba(255,255,255,.025); border-color:#2A2F3D; } :root[data-theme="dark"] .kanban-col-header{ border-bottom-color:#353B4D; } :root[data-theme="dark"] .kanban-col-count{ background:#252A37; border-color:#353B4D; color:#C3CADE; } :root[data-theme="dark"] .kanban-card-name{color:#F0F2F8} :root[data-theme="dark"] .kanban-card-poste{color:#9098B5} /* Stats cards en dark : plus contrastées */ :root[data-theme="dark"] .stat-card{ background:linear-gradient(180deg, #1F242F 0%, #181C26 100%) !important; border:1px solid #353B4D !important; } :root[data-theme="dark"] .stat-card:hover{ border-color:rgba(224,32,40,.30) !important; box-shadow:0 12px 28px -6px rgba(0,0,0,.20), 0 0 0 1px rgba(0,0,0,.10)!important; } /* Behavior cards (DISC) en dark : tranchent mieux */ :root[data-theme="dark"] .behavior-card{ background:#1F242F !important; border-color:#353B4D !important; } :root:not([data-theme="light"]) .behavior-card-title{color:#FDB04A !important} :root:not([data-theme="light"]) .behavior-card-vigilance .behavior-card-title{color:#F87171 !important} /* Pool table en dark : meilleurs contrastes lignes */ :root[data-theme="dark"] .pool-table-wrap{ background:#181C26; border-color:#353B4D; } :root[data-theme="dark"] .pool-table thead th{ background:#1F242F !important; border-bottom-color:#353B4D; } :root[data-theme="dark"] .pool-table tbody tr:hover{ background:#252A37 !important; } :root[data-theme="dark"] .pool-table tbody td{ border-bottom-color:rgba(53,59,77,.55); } /* RH blocks en dark */ :root[data-theme="dark"] .rh-block{ background:#181C26; border-color:#353B4D; } :root[data-theme="dark"] .rh-bar{background:#252A37} /* Inputs/filtres en dark : plus visibles */ :root[data-theme="dark"] .filters input, :root[data-theme="dark"] .filters select, :root[data-theme="dark"] .filters{ background:#181C26 !important; border-color:#353B4D !important; color:#E6E9F2 !important; } :root[data-theme="dark"] .filters{background:transparent !important;border:none !important} :root[data-theme="dark"] .filters input::placeholder{color:#7079A0} /* View toggle (Liste/Kanban) en dark */ :root[data-theme="dark"] .view-toggle{ background:#181C26; border-color:#353B4D; } :root[data-theme="dark"] .view-btn{color:#9098B5} :root[data-theme="dark"] .view-btn:hover{color:#E6E9F2} /* Nav bar en dark : plus contrastée */ :root[data-theme="dark"] nav.main-nav, :root[data-theme="dark"] header.nav, :root[data-theme="dark"] body > div:first-of-type nav{ background:rgba(24,28,38,.85) !important; border-bottom:1px solid #353B4D !important; } /* Modal candidat en dark : surface tranche */ :root[data-theme="dark"] .cmodal-content{ background:#1F242F !important; border-color:#353B4D !important; box-shadow:0 32px 80px rgba(0,0,0,.65) !important; } /* ─── Fix Kanban scroll : assurer le défilement vertical par colonne ─── */ .kanban-col{ display:flex; flex-direction:column; height:70vh; overflow:hidden; } .kanban-col-header{flex-shrink:0} .kanban-col-body{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding-right:6px; } #admin-kanban-board{align-items:stretch} /* Scrollbar dans la colonne plus visible */ .kanban-col-body::-webkit-scrollbar{width:7px} .kanban-col-body::-webkit-scrollbar-track{background:transparent} .kanban-col-body::-webkit-scrollbar-thumb{ background:rgba(224,32,40,.30); border-radius:4px; border:1px solid transparent; } .kanban-col-body::-webkit-scrollbar-thumb:hover{ background:rgba(224,32,40,.55); } :root[data-theme="dark"] .kanban-col-body::-webkit-scrollbar-thumb{ background:rgba(224,32,40,.40); } /* Phase 5A.19 : Barre horizontale sous les page headers .sh en mode sombre : plus marquée + glow */ :root[data-theme="dark"] .sh{ border-bottom-color:#4A5266; /* border-bottom plus lumineux qu'avant (était #353B4D trop sombre) */ } :root[data-theme="dark"] .sh::after{ width:120px; /* gradient 2× plus long (avant : 56px) */ height:3px; /* +1px d'épaisseur */ background:linear-gradient(90deg, #FF3838 0%, #E5202A 35%, rgba(224,32,40,.55) 70%, transparent 100%); /* gradient rouge plus marqué avec dégradé sur la longueur */ box-shadow:0 0 14px rgba(0,0,0,.55), /* glow rouge subtil */ 0 0 2px rgba(255,56,56,.4); border-radius:2px; } /* ─── Fix : titres colonnes Kanban : couleurs plus lumineuses + dot accent ─── */ .kanban-col-title{ display:inline-flex;align-items:center;gap:8px; font-weight:800; text-shadow:0 1px 8px rgba(0,0,0,.4); } .kanban-col-title::before{ content:""; width:8px;height:8px;border-radius:50%; background:currentColor; box-shadow:0 0 12px currentColor; flex-shrink:0; } :root[data-theme="dark"] .kanban-col[data-status="Nouveau"] .kanban-col-title{color:#A78BFA} /* violet plus clair */ :root[data-theme="dark"] .kanban-col[data-status="Présélection"] .kanban-col-title{color:#22D3EE} /* cyan plus vif */ :root[data-theme="dark"] .kanban-col[data-status="Entretien"] .kanban-col-title{color:#C79A4E} /* jaune doré */ :root[data-theme="dark"] .kanban-col[data-status="Entretien 2"] .kanban-col-title{color:#FB923C} /* orange */ :root[data-theme="dark"] .kanban-col[data-status="Offre"] .kanban-col-title{color:#34D399} /* vert émeraude */ :root[data-theme="dark"] .kanban-col[data-status="Retenue"] .kanban-col-title{color:#6EE7B7} /* vert clair (retenue) */ :root[data-theme="dark"] .kanban-col[data-status="Refusé"] .kanban-col-title{color:#F87171} /* rouge clair */ /* ─── Fix : cards Kanban doivent rester visibles même si animation pas jouée ─── */ .panel.on .kanban-card{ animation:kanbanCardEnter .5s cubic-bezier(.22,.61,.36,1); /* RETIRÉ : `both` (qui forçait opacity:0 avant animation, causant cards invisibles) */ } .kanban-card{opacity:1;flex-shrink:0} /* opacity:1 = toujours visible / flex-shrink:0 = garde hauteur naturelle */ /* ─── Fix 2 : Cards DISC (behavior-card) : sectionnement renforcé ─── */ .behavior-grid{gap:14px !important} .behavior-card{ background:var(--s1) !important; border:1.5px solid var(--border) !important; border-radius:10px !important; padding:14px 16px 14px 22px !important; position:relative; transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s,border-color .25s; box-shadow:var(--shadow-premium-sm); font-size:.82rem !important; line-height:1.55 !important; } .behavior-card::before{ content:"";position:absolute;left:0;top:14px;bottom:14px; width:3px;border-radius:0 2px 2px 0; background:linear-gradient(180deg,#C79A4E,#D97706); opacity:.9; } .behavior-card.behavior-card-vigilance::before{ background:linear-gradient(180deg,#E5202A,#B91C1C); } .behavior-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-premium-md); border-color:rgba(245,158,11,.35) !important; } .behavior-card.behavior-card-vigilance:hover{border-color:rgba(224,32,40,.35) !important} .behavior-card-title{ font-size:.72rem !important;font-weight:800 !important;text-transform:uppercase !important; letter-spacing:.06em !important;margin-bottom:10px !important; display:flex;align-items:center;gap:8px; color:#B45309 !important; } .behavior-card-vigilance .behavior-card-title{color:#B91C1C !important} .behavior-card-title .icon-2d{width:15px;height:15px;flex-shrink:0} .behavior-card ul{padding-left:16px} .behavior-card li{margin-bottom:5px;line-height:1.5} /* Parent .behavior-block : padding plus aéré */ .behavior-block{padding:18px !important;border-radius:12px !important} /* ─── Fix 3 : Vivier : refonte moderne 2026 ─── */ .pool-table-wrap{ background:var(--s1); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-premium-md); overflow:auto; } .pool-table{ border-collapse:collapse; font-family:'Plus Jakarta Sans',sans-serif; font-size:.88rem; min-width:800px; width:100%; } /* En-têtes de colonnes : plus modernes, moins criards */ .pool-table thead th{ background:var(--s1) !important; padding:18px 14px 14px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.82rem; font-weight:600; text-transform:none; letter-spacing:-.01em; color:var(--text); border-bottom:1px solid var(--border); position:sticky;top:0;z-index:10; } .pool-table thead th.th-candidat, .pool-table thead th.th-poste-actuel{ font-size:.68rem;text-transform:uppercase; color:var(--muted);letter-spacing:.08em; font-weight:600;text-align:left; } .pool-table thead th.th-compat{ font-size:.78rem;text-transform:none; font-weight:700;letter-spacing:-.005em; color:var(--text);text-align:center; } .pool-table thead th.th-compat .pool-poste-bar{ width:36px;height:3px;border-radius:2px;margin:8px auto 0; } /* Rows : hover plus marqué + side bar accent */ .pool-table tbody tr{ transition:background .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s; position:relative; cursor:pointer; } .pool-table tbody tr:hover{ background:var(--s2) !important; box-shadow:inset 3px 0 0 0 var(--accent); } .pool-table tbody td{ padding:16px 14px; border-bottom:1px solid color-mix(in srgb,var(--border) 55%,transparent); vertical-align:middle; } .pool-table tbody tr:last-child td{border-bottom:none} /* Avatar + nom du candidat */ .pool-td-name-main{ font-family:'Plus Jakarta Sans',sans-serif; font-size:.95rem;font-weight:600; letter-spacing:-.012em;color:var(--text); } .pool-td-name-sub{ font-family:'Plus Jakarta Sans',sans-serif; font-size:.74rem;font-weight:500; color:var(--muted); margin-top:3px;letter-spacing:-.005em; } .pool-td-poste-actuel{ font-family:'Plus Jakarta Sans',sans-serif; font-size:.84rem;font-weight:500; color:var(--muted);letter-spacing:-.005em; } /* Cellules de compatibilité: pill moderne, gros nombre 'Plus Jakarta Sans'*/ .pool-td-compat{ text-align:center; font-family:'Plus Jakarta Sans',sans-serif!important; font-weight:700 !important; font-size:.92rem !important; position:relative; } .pool-td-compat-cell{ display:inline-flex; align-items:center;justify-content:center; min-width:64px; padding:8px 14px !important; border-radius:10px !important; border:1px solid transparent; transition:transform .2s cubic-bezier(.22,.61,.36,1),filter .2s,box-shadow .2s; font-family:'Plus Jakarta Sans',sans-serif!important; font-weight:700 !important; letter-spacing:-.015em; } .pool-table tbody tr:hover .pool-td-compat-cell{ transform:scale(1.06); filter:brightness(1.04); } .pool-td-compat-cell.is-current{ outline:1.5px dashed var(--accent);outline-offset:3px; } .pool-td-compat-cell.is-best{ box-shadow:0 0 0 2px var(--accent),0 4px 12px -2px rgba(0,0,0,.35); } /* Pool stats : KPI cards plus modernes */ .pool-stat{ background:var(--s1); border:1px solid var(--border); border-radius:14px; padding:18px 22px; box-shadow:var(--shadow-premium-sm); transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s; } .pool-stat:hover{ transform:translateY(-3px); box-shadow:var(--shadow-premium-md); } .pool-stat-lbl{ font-family:'Plus Jakarta Sans',sans-serif; font-size:.68rem;letter-spacing:.08em; font-weight:600;color:var(--muted); text-transform:uppercase;margin-bottom:6px; } .pool-stat-val{ font-family:'Plus Jakarta Sans',sans-serif!important; font-weight:700; font-size:1.8rem !important; letter-spacing:-.025em; color:var(--text); line-height:1; } .pool-stat-sub{ font-family:'Plus Jakarta Sans',sans-serif; font-size:.72rem;margin-top:5px; color:var(--muted);font-weight:500; } /* Legend Vivier : modernisée */ .pool-legend{ background:var(--s2); border:1px solid var(--border); border-radius:10px; padding:12px 18px; margin-top:20px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.76rem; } .pool-legend-item{font-weight:500} .pool-legend-dot{width:14px;height:14px;border-radius:5px} /* Phase 5A.4.p : Avatars (photo ou initiales) */ .avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:white;font-weight:600;text-transform:uppercase;overflow:hidden;flex-shrink:0;font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:0;line-height:1;user-select:none} .avatar img{width:100%;height:100%;object-fit:cover;display:block} .avatar-xs{width:24px;height:24px;font-size:.62rem} .avatar-sm{width:32px;height:32px;font-size:.75rem} .avatar-md{width:44px;height:44px;font-size:.92rem} .avatar-lg{width:72px;height:72px;font-size:1.55rem;border:3px solid var(--s1);box-shadow:0 0 0 1px var(--border)} .cmodal-header-id{display:flex;align-items:center;gap:14px} .kanban-card-top{display:flex;align-items:center;gap:8px;margin-bottom:6px} .kanban-card-top .kanban-card-name{margin-bottom:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .photo-action-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--s2);border:1px solid var(--border);border-radius:7px;font-size:.78rem;color:var(--muted);cursor:pointer;font-family:inherit;transition:border-color .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1),background .15s} .photo-action-btn:hover{border-color:var(--accent);color:var(--text);background:var(--s1)} .photo-action-btn .icon-2d{width:12px;height:12px} .photo-action-btn:disabled{opacity:.5;cursor:wait} /* CONFLIT SUPPRIMÉ : .kanban-card:hover redéfinition (voir Phase 5A.6 § 6 pour la version premium) */ .kanban-card.dragging{opacity:.4;cursor:grabbing} .kanban-card-name{font-weight:600;font-size:.88rem;margin-bottom:4px} .kanban-card-poste{font-size:.72rem;color:var(--muted);margin-bottom:6px} .kanban-card-meta{display:flex;gap:6px;flex-wrap:wrap;font-size:.7rem} .kanban-card-score{padding:2px 7px;border-radius:6px;background:var(--success-bg);color:#4ade80;font-weight:600} .kanban-card-compat{padding:2px 7px;border-radius:6px;background:var(--warning-bg);color:#facc15;font-weight:600} /* Couleurs par colonne */ .kanban-col[data-status="Nouveau"] .kanban-col-title{color:#7c5cff} .kanban-col[data-status="Présélection"] .kanban-col-title{color:#06b6d4} .kanban-col[data-status="Entretien"] .kanban-col-title{color:#facc15} .kanban-col[data-status="Entretien 2"] .kanban-col-title{color:#f97316} .kanban-col[data-status="Offre"] .kanban-col-title{color:#4ade80} .kanban-col[data-status="Retenue"] .kanban-col-title{color:#10b981} .kanban-col[data-status="Refusé"] .kanban-col-title{color:#ef4444} /* ═══════════ Phase 3D.2 : Modal détail candidat ═══════════ */ .cmodal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px} .cmodal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .cmodal-content{position:relative;background:linear-gradient(150deg,rgba(30,34,47,.86),rgba(15,18,26,.9));backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border:1px solid rgba(255,255,255,.08);border-radius:20px;width:100%;max-width:min(96vw,1120px);max-height:92vh;overflow-y:auto;padding:26px;box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 32px 80px rgba(0,0,0,.45)} /* Phase 5A.4.q v4 : Effet papier crème UNIQUEMENT dans le modal détail candidat en mode clair */ .cmodal-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:8px;border:0;background:var(--overlay-mid);color:var(--text);cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:background .15s cubic-bezier(.4,0,.2,1),color .15s} .cmodal-close:hover{background:var(--overlay-high)} .cmodal-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .cmodal-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--border)} .cmodal-name{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.5rem;font-weight:800;letter-spacing:-.03em;margin-bottom:4px} .cmodal-poste{font-size:.9rem;color:var(--accent-texte,var(--accent));font-weight:500} .cmodal-scores{display:flex;gap:16px} .cmodal-score-item{text-align:center;padding:9px 15px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:13px;min-width:80px} .cmodal-score-val{letter-spacing:-.03em;font-family:'Space Mono', ui-monospace, monospace;font-weight:400;font-size:2rem;color:#4ade80;line-height:1} .cmodal-score-val.cmodal-compat{color:#4FA396} .cmodal-score-lbl{font-family:'Space Mono',monospace;font-size:.62rem;color:var(--muted);margin-top:5px;text-transform:uppercase;letter-spacing:.1em} :root .cmodal-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 20px;margin-bottom:22px;font-size:.85rem} .cmodal-meta-item{color:var(--muted)} .cmodal-meta-item span:not(.cmodal-meta-lbl):not(.cmodal-status-badge){color:var(--text)} .cmodal-meta-lbl{display:inline-block;width:22px} .cmodal-status-badge{display:inline-block;padding:2px 10px;border-radius:8px;background:var(--brand-bg);color:var(--accent-texte,var(--accent));font-weight:600;font-size:.78rem;margin-left:4px} .cmodal-section{margin-bottom:22px} .cmodal-section-title{font-weight:700;font-size:1.02rem;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border);color:var(--text);display:flex;align-items:center;gap:8px;letter-spacing:-.01em} .cmodal-section-title::before{content:"";display:inline-block;width:3px;height:18px;background:var(--accent);border-radius:2px;flex-shrink:0} .cmodal-notes{width:100%;min-height:160px;background:var(--s2);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:12px;font-family:inherit;font-size:.9rem;resize:vertical;line-height:1.5} .cmodal-notes:focus{outline:none;border-color:var(--accent)} .cmodal-notes:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,0,0,.16)} #admin-decision-options label:has(input:checked){border-color:var(--accent);background:var(--brand-bg);color:var(--text);font-weight:600} .notes-bubble{display:none;position:fixed;bottom:20px;right:20px;z-index:1001} .notes-bubble.is-visible{display:block} .notes-bubble-btn{position:relative;width:46px;height:46px;border-radius:50%;background:var(--accent);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.4);transition:transform.15s cubic-bezier(.4,0,.2,1)} .notes-bubble-btn:hover{transform:scale(1.06)} .notes-bubble-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .notes-bubble-btn .icon-2d{width:19px;height:19px} .notes-bubble-dot{position:absolute;top:1px;right:1px;width:10px;height:10px;border-radius:50%;background:#4AA37B;border:2px solid var(--s1)} .notes-bubble-panel{display:none;flex-direction:column;gap:8px;position:absolute;bottom:56px;right:0;width:290px;background:var(--s1);border:1px solid var(--border);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.45);padding:12px} .notes-bubble.is-open .notes-bubble-panel{display:flex} .notes-bubble-head{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;font-weight:700;color:var(--text)} .notes-bubble-close{background:none;border:none;color:var(--muted);font-size:.8rem;cursor:pointer;line-height:1;padding:2px} .notes-bubble-close:hover{color:var(--text)} .notes-bubble-textarea{width:100%;min-height:130px;background:var(--s2);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:10px;font-family:inherit;font-size:.84rem;resize:vertical;line-height:1.5} .notes-bubble-textarea:focus{outline:none;border-color:var(--accent)} .notes-bubble-foot{display:flex;justify-content:space-between;align-items:center} .notes-bubble-count{font-size:.68rem;color:var(--muted)} .cmodal-notes-footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px;flex-wrap:wrap;gap:10px} .cmodal-notes-info{font-size:.75rem;color:var(--muted);font-style:normal} .meri-mini-icon{display:inline-flex;width:22px;height:22px;overflow:visible;vertical-align:middle;margin:0} .meri-mini-icon .owl-svg{width:120%;height:auto;animation:none} .meri-mini-icon .squish{transition:none} .qualreview-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:6px} .qualreview-field label{display:block;font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600;margin-bottom:5px} .qualreview-field textarea{min-height:72px} @media (max-width:640px){.qualreview-grid{grid-template-columns:1fr}} .cmodal-notes-actions{display:flex;align-items:center;gap:14px} .cmodal-notes-count{font-size:.75rem;color:var(--muted)} /* Animation save success */ @keyframes savePulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.6)}100%{box-shadow:0 0 0 12px rgba(74,222,128,0)}} .cmodal-save-success{animation:savePulse .6s ease-out} /* Indicateur sur cartes */ .kanban-card-hasnotes::after{content:"";position:absolute;top:8px;right:8px;font-size:.85rem} .kanban-card{position:relative} /* ═══════════ Phase 3D.4 : Modal mail ═══════════ */ .mmodal-field{margin-bottom:14px} .mmodal-lbl{display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px} .mmodal-input{width:100%;background:var(--s2);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:9px 12px;font-family:inherit;font-size:.88rem;outline:none;transition:border-color .2s} .mmodal-input:focus{border-color:var(--accent)} .mmodal-input[type=date],.mmodal-input[type=time]{font-family:inherit} textarea.mmodal-input{resize:vertical;line-height:1.5} /* ═══ Phase 5A.5.B : Équipe (collaborateurs) ═══ */ .equipe-list{display:flex;flex-direction:column;gap:10px;margin-top:6px} .equipe-card{display:flex;align-items:center;gap:14px;background:var(--s1);border:1px solid var(--border);border-radius:12px;padding:14px 18px;box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .2s} .equipe-card:hover{box-shadow:var(--shadow);transform:translateY(-1px)} .equipe-card.is-inactive{opacity:.55} .equipe-card.is-inactive .equipe-card-name{text-decoration:line-through} .equipe-card-info{flex:1;min-width:0} .equipe-card-name{font-weight:600;font-size:.95rem;color:var(--text);margin-bottom:3px} .equipe-card-meta{font-size:.78rem;color:var(--muted);display:flex;gap:10px;align-items:center;flex-wrap:wrap} .equipe-card-email{color:var(--muted)} .equipe-card-role{background:var(--brand-bg);color:var(--accent-texte,var(--accent));padding:2px 9px;border-radius:999px;font-size:.7rem;font-weight:600;letter-spacing:.02em} .equipe-card-actions{display:flex;gap:8px;flex-shrink:0} .equipe-section-title{font-size:.74rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:24px 0 10px 4px;display:flex;align-items:center;gap:8px} .equipe-section-title .equipe-count{background:var(--s2);color:var(--text);padding:1px 8px;border-radius:999px;font-size:.68rem;font-weight:600} .equipe-empty{text-align:center;padding:48px 24px;color:var(--muted);background:var(--s1);border:1px dashed var(--border);border-radius:12px;margin-top:16px} .equipe-empty-icon{font-size:2.5rem;color:var(--muted);opacity:.5;margin-bottom:12px} .equipe-empty-title{font-size:1rem;font-weight:600;color:var(--text);margin-bottom:6px} .equipe-empty-sub{font-size:.85rem;line-height:1.5;max-width:380px;margin:0 auto 18px} /* ═══ Module Onboarding : intégration des embauchés ═══ */ .onb-list{display:flex;flex-direction:column;gap:12px;margin-top:6px} .onb-card{background:var(--s1);border:1px solid var(--border);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow-sm);transition:box-shadow .2s} .onb-card:hover{box-shadow:var(--shadow)} .onb-card.is-done{border-color:color-mix(in srgb, var(--accent) 35%, var(--border))} .onb-card-top{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer} .onb-card-name{font-weight:700;font-size:.96rem;color:var(--text)} .onb-card-poste{font-size:.78rem;color:var(--muted);margin-top:2px} .onb-badge-done{display:inline-block;background:var(--brand-bg);color:var(--accent-texte,var(--accent));padding:2px 9px;border-radius:999px;font-size:.68rem;font-weight:600;letter-spacing:.02em;margin-left:6px} .onb-card-progress{display:flex;align-items:center;gap:10px;min-width:190px;flex-shrink:0} .onb-card-progress .ud-progress-bar{width:90px} .onb-progress-pct{font-size:.78rem;color:var(--muted);font-weight:600;min-width:34px;text-align:right} .onb-chevron{width:18px;height:18px;background-color:var(--muted);flex-shrink:0;transition:transform .2s cubic-bezier(.22,.61,.36,1)} .onb-card.open .onb-chevron{transform:rotate(180deg)} .onb-checklist{max-height:0;overflow:hidden;opacity:0;transition:max-height .3s cubic-bezier(.22,.61,.36,1),opacity .2s} .onb-card.open .onb-checklist{max-height:3600px;opacity:1;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)} /* Chaque phase de la checklist est un bloc a part entiere, comme les autres sections */ .onb-phase{margin:22px -18px 0;padding:20px 18px 0;border-top:1px solid var(--border)} .onb-phase-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text);font-weight:700;margin-bottom:10px} .onb-task{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:.88rem;cursor:pointer;color:var(--text)} .onb-task.is-done{color:var(--muted);text-decoration:line-through} .onbt-row{display:flex;gap:8px;align-items:center;margin-bottom:8px} .onbt-row-remove{width:32px;height:32px;flex-shrink:0;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s} .onbt-row-remove:hover{background:var(--s2);color:var(--text)} .onbt-owner-toggle{display:flex;flex-shrink:0;border:1px solid var(--border);border-radius:8px;overflow:hidden} .onbt-owner-btn{padding:7px 10px;font-size:.72rem;font-weight:600;color:var(--muted);background:var(--s1);border:none;cursor:pointer;transition:background .15s,color .15s} .onbt-owner-btn.on{background:var(--brand-bg);color:var(--accent-texte,var(--accent))} .onbt-owner-btn:first-child{border-right:1px solid var(--border)} /* Référent : ligne d'assignation + pôle + todo dédiée */ .onb-referent-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:.88rem} .onb-referent-lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text);font-weight:700;width:100%} .onb-referent-name{font-weight:700;color:var(--text)} .onb-pole-badge{font-size:.66rem;font-weight:600;padding:2px 9px;border-radius:999px;color:var(--pc);background:color-mix(in srgb, var(--pc) 14%, transparent)} .onb-referent-assign,.onb-referent-change{background:none;border:none;color:var(--accent-texte,var(--accent));font-size:.82rem;font-weight:600;cursor:pointer;padding:0} .onb-referent-assign:hover,.onb-referent-change:hover{text-decoration:underline} .onb-referent-picker{display:flex;flex-direction:column;gap:6px;margin-top:12px;padding:10px;background:var(--s2);border:1px solid var(--border);border-radius:10px;max-height:220px;overflow-y:auto} .onb-referent-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;background:var(--s1);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.85rem;cursor:pointer;text-align:left;transition:border-color .15s} .onb-referent-opt:hover{border-color:var(--accent)} .onb-referent-empty{font-size:.82rem;color:var(--muted);padding:6px 2px} .onb-referent-tasks{margin:22px -18px 0;padding:20px 18px 0;border-top:1px solid var(--border)} .onb-referent-tasks-head{display:flex;align-items:center;justify-content:space-between;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text);font-weight:700;margin-bottom:12px} /* Les phases de la todo du referent vivent deja dans un bloc : pas de second filet */ .onb-referent-tasks .onb-phase{margin:0;padding:0;border-top:none} .onb-referent-tasks .onb-phase + .onb-phase{margin-top:18px} /* Dans ce bloc, les phases sont un sous-niveau : titre discret, pas un second titre de bloc */ .onb-referent-tasks .onb-phase-title{font-size:.7rem;letter-spacing:.06em;color:var(--muted);font-weight:600;margin-bottom:6px} .onb-referent-chip{display:inline-flex;align-items:center;gap:8px;padding:5px 10px 5px 12px;background:var(--s2);border:1px solid var(--border);border-radius:999px} .onb-referent-chip .onb-referent-name{font-size:.85rem} .onb-referent-chip .onb-referent-change{font-size:.76rem;padding-left:8px;border-left:1px solid var(--border)} /* Sections de la carte onboarding : blocs nettement separes par un filet pleine largeur et beaucoup d'air, jamais de carte imbriquee dans la carte. */ .onb-section{margin:22px -18px 0;padding:20px 18px 0;border-top:1px solid var(--border)} .onb-section-head{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text);font-weight:700;margin-bottom:12px} .onb-actions-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:14px} /* Une seule action mise en avant (accent) par section, le reste en discret (texte, pas de boîte) */ .onb-action-ghost{background:none;border:none;padding:0;color:var(--muted);font-size:.82rem;font-weight:600;cursor:pointer;transition:color .15s;display:inline-flex;align-items:center;gap:6px} .onb-action-ghost:hover{color:var(--text)} .onb-action-ghost:disabled{opacity:.5;cursor:not-allowed} /* Parcours gamifié */ .onb-rally-status{font-size:.85rem;color:var(--muted);margin-bottom:10px} .onb-rally-status.is-done{color:var(--accent-texte,var(--accent));font-weight:600} /* Portrait */ .onb-portrait-fact{font-size:.85rem;color:var(--text);margin-bottom:10px;font-style:normal} .onb-portrait-qa{margin-bottom:8px} .onb-portrait-qa:last-child{margin-bottom:0} .onb-portrait-q{font-size:.76rem;color:var(--muted);font-weight:600;margin-bottom:2px} .onb-portrait-a{font-size:.85rem;color:var(--text)} /* Visuel de bienvenue : champs libellés (plus de placeholder-only illisible) */ .onb-field-grid{display:flex;gap:14px;flex-wrap:wrap} .onb-field{flex:1;min-width:180px;display:flex;flex-direction:column;gap:5px} .onb-field-lbl{font-size:.7rem;color:var(--muted);font-weight:600} .onb-field-inp{background:var(--s2);border:1px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--text);font-size:.82rem;font-family:inherit} .onb-field-inp:focus{outline:none;border-color:var(--accent)} .onb-field-date{cursor:pointer;text-align:left;transition:border-color .15s} .onb-field-date:hover{border-color:var(--accent)} .onb-field-date:focus-visible{outline:2px solid var(--accent);outline-offset:1px} /* Séance : plusieurs personnes (équipe qualité, HSE...) en étiquettes */ .onb-session-persons{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .onb-session-chip{display:inline-flex;align-items:center;gap:4px;background:var(--s2);border:1px solid var(--border);border-radius:2px;padding:3px 4px 3px 8px;font-size:.76rem;font-weight:600;color:var(--text);max-width:100%} .onb-session-chip button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.9rem;line-height:1;padding:0 3px;transition:color .15s} .onb-session-chip button:hover{color:var(--danger,#c0392b)} .onb-session-chip button:focus-visible{outline:2px solid var(--accent);outline-offset:1px} .onb-session-row{display:grid;grid-template-columns:110px 1fr 1fr 28px 28px;gap:8px;align-items:center;padding:6px 0;border-bottom:1px dashed var(--border)} .onb-session-row:last-of-type{border-bottom:none} .onb-session-date{width:100%;background:var(--s2);border:1px solid var(--border);border-radius:7px;padding:7px 10px;color:var(--text);font-size:.78rem;font-weight:600;cursor:pointer;text-align:left;transition:border-color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .onb-session-date:hover{border-color:var(--accent)} .onb-session-cell{position:relative} .onb-session-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;min-width:220px;background:var(--s1);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-premium-md,0 12px 30px rgba(0,0,0,.3));padding:6px;z-index:30} .onb-session-search{width:100%;background:var(--s2);border:1px solid var(--border);border-radius:6px;padding:7px 10px;color:var(--text);font-size:.8rem;font-family:inherit;margin-bottom:6px} .onb-session-search:focus{outline:none;border-color:var(--accent)} .onb-session-sugg{max-height:220px;overflow-y:auto} .onb-session-nosugg{font-size:.76rem;color:var(--muted);padding:6px 9px;line-height:1.4} .onb-session-opt{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;background:none;border:none;border-radius:6px;padding:7px 9px;color:var(--text);font-size:.8rem;text-align:left;cursor:pointer;transition:background .15s} .onb-session-opt:hover{background:var(--s2)} .onb-session-rm{background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:color .15s} .onb-session-rm:hover{color:#F87171} .onb-session-rm .icon-2d{width:15px;height:15px;background:currentColor} .onb-sessions-empty{font-size:.8rem;color:var(--muted);padding:4px 0} @media(max-width:640px){.onb-session-row{grid-template-columns:1fr}} .onbr-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px} .onbr-tab{padding:8px 14px;border-radius:8px;border:1px solid var(--border);background:var(--s1);color:var(--muted);font-size:.82rem;font-weight:600;cursor:pointer;transition:border-color .15s,color .15s} .onbr-tab.on{color:var(--accent-texte,var(--accent));border-color:var(--accent)} .onbr-help{font-size:.78rem;color:var(--muted);margin-bottom:12px} .onbr-row{display:flex;gap:8px;align-items:flex-start;margin-bottom:10px;padding:10px;background:var(--s2);border:1px solid var(--border);border-radius:10px} .onbr-row-fields{flex:1;display:flex;flex-direction:column;gap:6px} .onbr-row-fields-inline{display:flex;gap:6px} .onbr-row-remove{width:32px;height:32px;flex-shrink:0;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s} .onbr-row-remove:hover{background:var(--s1);color:var(--text)} .onbr-quiz-opt-row{display:flex;gap:6px;align-items:center;margin-bottom:4px} .onbr-quiz-correct{display:flex;align-items:center;gap:4px;flex-shrink:0;font-size:.72rem;color:var(--muted);white-space:nowrap} .onbl-media-row{display:flex;flex-direction:column;gap:8px;margin-bottom:8px} .onbl-media-upload{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .onbl-media-preview{width:52px;height:52px;object-fit:cover;border-radius:8px;border:1px solid var(--border)} .onbqr-img{width:220px;height:220px;margin:0 auto 16px;display:block;border-radius:8px;background:#fff;padding:10px} .onbqr-link-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;margin-bottom:6px;text-align:left} .onbqr-link-row{display:flex;gap:8px} .onbqr-link-row input{flex:1;min-width:0;background:var(--s2);border:1px solid var(--border);border-radius:8px;padding:9px 11px;color:var(--text);font-size:.78rem;font-family:'Space Mono',monospace} /* ═══ Phase 5A.5.C/E : Avis collaborateurs (modal candidat + sous-modal assign) ═══ */ .avis-list{display:flex;flex-direction:column;gap:10px} .avis-empty{text-align:center;padding:24px 16px;color:var(--muted);background:var(--s2);border:1px dashed var(--border);border-radius:10px;font-size:.85rem;font-style:normal} .avis-card{display:flex;gap:12px;background:var(--s1);border:1px solid var(--border);border-radius:10px;padding:12px 14px;box-shadow:var(--shadow-sm)} .avis-card.is-pending{border-style:dashed;background:var(--s2);opacity:.92} .avis-card-body{flex:1;min-width:0} .avis-card-head{display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap} .avis-card-name{font-weight:600;font-size:.9rem;color:var(--text)} .avis-card-role{font-size:.7rem;color:var(--muted);background:var(--s2);padding:1px 7px;border-radius:999px;font-weight:600} .avis-decision{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase} .avis-decision.prioritaire{background:#FEE2E2;color:#B91C1C} .avis-decision.urgent{background:#FEE2E2;color:#B91C1C} .avis-decision.important{background:#FEE2E2;color:#B91C1C} .avis-decision.valide{background:#DCFCE7;color:#15803D} .avis-decision.refuse{background:#FEE2E2;color:#B91C1C} .avis-decision.besoin_entretien{background:#FEF3C7;color:#B45309} .avis-decision.pending{background:var(--s3);color:var(--muted)} .avis-card-meta{font-size:.72rem;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap} .avis-card-comment{margin-top:6px;font-size:.84rem;color:var(--text);background:var(--s2);padding:8px 10px;border-radius:6px;border-left:2px solid var(--accent);line-height:1.5;white-space:pre-wrap;word-wrap:break-word} .avis-stats-pill{display:inline-flex;align-items:center;gap:6px;background:var(--s2);padding:4px 10px;border-radius:999px;font-size:.74rem;font-weight:600;color:var(--text);margin-left:8px} .avis-stats-pill.avis-stat-decided{color:var(--green,#4AA37B)} .avis-stats-pill.avis-stat-pending{color:var(--orange,#C79A4E)} /* Sous-modal assign */ .assign-collab-row{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s} .assign-collab-row:last-child{border-bottom:none} .assign-collab-row:hover{background:var(--s2)} .assign-collab-row input[type="checkbox"]{width:18px;height:18px;cursor:pointer;accent-color:var(--accent);flex-shrink:0} .assign-collab-info{flex:1;min-width:0} .assign-collab-name{font-weight:600;font-size:.9rem;color:var(--text)} .assign-collab-meta{font-size:.74rem;color:var(--muted);display:flex;gap:8px;align-items:center} .assign-collab-role{background:var(--brand-bg);color:var(--accent-texte,var(--accent));padding:1px 7px;border-radius:999px;font-size:.66rem;font-weight:600} .assign-collab-row.is-already-assigned{opacity:.55;cursor:not-allowed} .assign-collab-row.is-already-assigned input{pointer-events:none} .assign-already-tag{font-size:.66rem;color:var(--muted);font-style:normal;background:var(--s3);padding:2px 8px;border-radius:999px} /* ═══ Phase 5A.5.E/G : Badges sur cards (avis + multi-candidatures) ═══ */ .card-badge-avis{display:inline-flex;align-items:center;gap:4px;background:var(--s2);color:var(--text);padding:2px 8px;border-radius:999px;font-size:.7rem;font-weight:600;margin-left:6px;vertical-align:middle;border:1px solid var(--border)} .card-badge-avis.is-complete{background:#DCFCE7;color:#15803D;border-color:#86EFAC} .card-badge-avis.is-pending{background:#FEF3C7;color:#B45309;border-color:#FCD34D} .card-badge-priority{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:999px;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;margin-left:6px;vertical-align:middle;border:1px solid;background:#FEE2E2;color:#B91C1C;border-color:#FCA5A5} .card-badge-multi{display:inline-flex;align-items:center;gap:4px;background:#EDE9FE;color:#6D28D9;padding:2px 8px;border-radius:999px;font-size:.68rem;font-weight:700;margin-left:6px;vertical-align:middle;letter-spacing:.02em;text-transform:uppercase} /* Phase 5A.4.l : Custom dropdown avec icônes Fluent (template mail) */ .custom-select{position:relative;width:100%} .custom-select-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;cursor:pointer;background:var(--s2);border:1px solid var(--border);color:var(--text);padding:9px 12px;font-family:inherit;font-size:.88rem;outline:none;transition:border-color .2s;border-radius:8px} .custom-select-trigger:hover{border-color:var(--muted)} .custom-select-trigger.open,.custom-select-trigger:focus{border-color:var(--accent)} .custom-select-current{display:flex;align-items:center;gap:10px;flex:1;min-width:0} .custom-select-current .icon-2d{width:18px;height:18px;color:var(--accent-texte,var(--accent));flex-shrink:0} .custom-select-current-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .custom-select-chevron{width:14px;height:14px;color:var(--muted);flex-shrink:0;transition:transform .2s} .custom-select-trigger.open .custom-select-chevron{transform:rotate(180deg)} .custom-select-options{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--s1);border:1px solid var(--border);border-radius:8px;box-shadow:0 12px 28px rgba(0,0,0,.16),0 4px 10px rgba(0,0,0,.08);max-height:280px;overflow-y:auto;list-style:none;padding:4px;margin:0;z-index:1000;display:none} .custom-select-options.open{display:block;animation:dropdownIn .18s ease-out} @keyframes dropdownIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}} .custom-select-options li{padding:9px 12px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--text);transition:background .12s;list-style:none} .custom-select-options li:hover,.custom-select-options li.highlighted{background:var(--s2)} .custom-select-options li.selected{background:var(--accent-bg,rgba(224,32,40,.08));color:var(--accent-texte,var(--accent))} .custom-select-options li .icon-2d{width:18px;height:18px;color:var(--accent-texte,var(--accent));flex-shrink:0} .custom-select-options li.placeholder{color:var(--muted);font-style:normal} .custom-select-options li.placeholder .icon-2d{display:none} .mmodal-preview{background:#fff;color:#222;border-radius:8px;padding:18px 22px;min-height:120px;max-height:300px;overflow-y:auto;font-family:'Plus Jakarta Sans',sans-serif;font-size:.85rem;line-height:1.6} .mmodal-preview p{margin:0 0 10px 0} .mmodal-preview ul{margin:8px 0 12px 0;padding-left:22px} .mmodal-preview strong{color:#000} .mmodal-custom-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} @media(max-width:600px){.mmodal-custom-grid{grid-template-columns:1fr}} /* ═══════════ Phase 4A : Analyse IA (modal candidat) ═══════════ */ .ai-section{margin-top:18px;padding:22px;border-radius:22px;border:1px solid rgba(41,212,217,.2);background:linear-gradient(150deg,rgba(18,28,34,.5),rgba(13,16,24,.4));box-shadow:0 28px 64px -28px rgba(0,0,0,.8),0 0 50px -30px rgba(41,212,217,.4);position:relative;overflow:hidden} .ai-section::after{content:"";position:absolute;left:0;right:0;top:0;height:60px;background:linear-gradient(180deg,rgba(41,212,217,.12),transparent);animation:cmodalScan 3.6s ease-in-out infinite;pointer-events:none;z-index:0} .ai-section>*{position:relative;z-index:1} @keyframes cmodalScan{0%{transform:translateY(-130%)}100%{transform:translateY(620%)}} @media (prefers-reduced-motion:reduce){.ai-section::after{animation:none}} .ai-section.cmodal-section-title::before{background:#4FA396} .ai-section .cmodal-section-title{border-bottom-color:rgba(41,212,217,.18)} .ai-empty{text-align:center;padding:18px;color:var(--muted);font-size:.85rem;background:var(--overlay-low);border-radius:10px;border:1px dashed var(--border)} .ai-reliability{display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:8px;font-size:.78rem;font-weight:600;margin-bottom:12px} .ai-reliability.is-low{background:rgba(245,188,81,.12);color:#f5bc51;border:1px solid rgba(245,188,81,.3)} .ai-reliability.is-ok{background:rgba(22,163,74,.1);color:#4AA37B;border:1px solid rgba(22,163,74,.25)} .ai-reliability .icon-2d{width:14px;height:14px;background:currentColor;flex-shrink:0} .ai-summary{background:linear-gradient(135deg,var(--s1),var(--s2));border:1px solid var(--border);border-radius:12px;padding:18px 22px;margin-bottom:18px;font-size:.92rem;line-height:1.65;box-shadow:var(--shadow),0 0 0 3px var(--overlay-low);color:var(--text)} .ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px} @media(max-width:600px){.ai-grid{grid-template-columns:1fr}} .ai-card{background:var(--s1);border:1px solid var(--border);border-radius:12px;padding:16px 18px;font-size:.88rem;box-shadow:var(--shadow);position:relative;overflow:hidden} .ai-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:currentColor} .ai-card-title{font-size:.74rem;font-weight:800;margin-bottom:12px;text-transform:uppercase;letter-spacing:.1em;display:inline-flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--border);width:100%} .ai-card-strengths{color:#15803D} .ai-card-strengths .ai-card-title{color:#15803D} .ai-card-concerns{color:#B45309} .ai-card-concerns .ai-card-title{color:#B45309} .ai-card ul{margin:0;padding-left:18px;color:var(--text)} .ai-card li{margin-bottom:8px;line-height:1.6;font-weight:500} .ai-card li:last-child{margin-bottom:0} .ai-fit-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:8px;background:var(--brand-bg);color:var(--accent-texte,var(--accent));font-weight:700;font-size:.85rem} .ai-q-list{display:flex;flex-direction:column;gap:12px;margin-top:10px} .ai-q-item{background:var(--s1);border:1px solid var(--border);border-radius:12px;padding:16px 18px 14px 22px;box-shadow:var(--shadow);position:relative;overflow:hidden} .ai-q-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--accent)} .ai-q-item:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);transition:transform .15s,box-shadow .15s} .ai-q-question{font-size:.94rem;font-weight:600;margin-bottom:8px;line-height:1.55;color:var(--text);letter-spacing:-.005em} .ai-q-rationale{font-size:.8rem;color:var(--muted);font-style:normal;line-height:1.55;padding-top:6px;border-top:1px dashed var(--border)} .ai-meta{font-size:.68rem;color:var(--muted);font-style:normal;margin-top:10px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px} /* Phase 4B : Bloc analyse CV */ .cv-block{background:linear-gradient(135deg,var(--info-bg),var(--brand-bg));border:1px solid var(--blue);border-radius:10px;padding:14px;margin:14px 0;font-size:.82rem} .cv-block-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap;gap:8px} .cv-block-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.95rem;color:var(--blue)} .cv-score-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:8px;background:var(--info-bg);color:var(--blue);font-weight:700;font-size:.85rem} .cv-summary{font-size:.85rem;line-height:1.5;margin-bottom:10px;color:var(--text)} .cv-stats{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px;font-size:.78rem} .cv-stat{background:var(--overlay-low);padding:6px 10px;border-radius:7px} .cv-stat-label{color:var(--muted);font-size:.7rem} .cv-stat-val{font-weight:700;color:var(--text)} .cv-skills{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px} .cv-skill{background:var(--s3);border:1px solid var(--border);border-radius:7px;padding:3px 9px;font-size:.72rem;color:var(--text)} .cv-alerts{margin-top:8px} .cv-alerts-title{font-size:.7rem;font-weight:700;color:var(--rouge-texte,var(--red));text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px} .cv-alerts ul{margin:0;padding-left:18px} .cv-alerts li{color:var(--rouge-texte,var(--red));font-size:.78rem;line-height:1.4;margin-bottom:3px} .cv-empty-note{font-size:.72rem;color:var(--muted);font-style:normal;padding:10px 12px;background:var(--overlay-low);border:1px dashed var(--border);border-radius:8px;margin:10px 0}.ai-actions{display:flex;gap:8px;flex-wrap:wrap} /* Phase 5A.4.o : Rubriques structurées CV (formations, expériences, langues, certifs, localisation) */ .cv-loc-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:6px;background:var(--overlay-low);font-size:.72rem;color:var(--muted);font-weight:500} .cv-loc-pill .icon-2d{width:11px;height:11px} .cv-section{margin-top:12px;padding-top:10px;border-top:1px dashed var(--border)} .cv-section-title{font-size:.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;display:inline-flex;align-items:center;gap:6px} .cv-section-title .icon-2d{width:12px;height:12px;color:var(--blue)} .cv-exp-list,.cv-form-list{display:flex;flex-direction:column;gap:6px;list-style:none;padding:0;margin:0} .cv-exp-item,.cv-form-item{padding:6px 10px;background:var(--overlay-low);border-left:2px solid var(--blue);border-radius:0 6px 6px 0;font-size:.78rem;line-height:1.4} .cv-exp-item-main,.cv-form-item-main{font-weight:600;color:var(--text)} .cv-exp-item-sub,.cv-form-item-sub{color:var(--muted);font-size:.72rem;margin-top:1px;display:flex;flex-wrap:wrap;gap:8px} .cv-langues,.cv-certifs{display:flex;flex-wrap:wrap;gap:5px} .cv-langue{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:var(--info-bg);border:1px solid var(--info-border);border-radius:6px;font-size:.72rem;color:var(--blue);font-weight:500} .cv-langue-niv{font-family:'Space Mono',monospace;font-weight:700;opacity:.85} .cv-certif{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:var(--success-bg);border:1px solid var(--success-border);border-radius:6px;font-size:.72rem;color:#047857;font-weight:500} .cv-certif .icon-2d{width:11px;height:11px} /* ═══════════ Phase 4C : Analyse comportementale (IA) ═══════════ */ .behavior-block{background:linear-gradient(135deg,var(--warning-bg),var(--brand-bg));border:1px solid var(--warning-border);border-radius:10px;padding:14px;margin:12px 0;font-size:.82rem} .behavior-block-header{margin-bottom:10px} .behavior-block-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.95rem;color:var(--yellow)} .behavior-summary{font-size:.85rem;line-height:1.5;margin-bottom:12px;color:var(--text)} .behavior-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} @media(max-width:600px){.behavior-grid{grid-template-columns:1fr}} .behavior-card{background:var(--overlay-low);border:1px solid var(--border);border-radius:8px;padding:9px 11px;font-size:.78rem;line-height:1.45} .behavior-card-title{font-size:.7rem;font-weight:700;color:var(--yellow);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px} .behavior-card-vigilance .behavior-card-title{color:var(--rouge-texte,var(--red))} .behavior-card ul{margin:0;padding-left:16px} .behavior-card li{margin-bottom:3px;line-height:1.4} /* ═══════════ Phase 4C : Profil DISC ═══════════ */ /* ═══════════ Phase 4C : Profil DISC ═══════════ */ .disc-block{background:var(--s2);border:1px solid var(--border);border-radius:10px;padding:14px;margin:10px 0} .disc-block-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:8px} .disc-block-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.95rem} .disc-dominant-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:8px;font-weight:700;font-size:.78rem} .disc-dominant-R{background:var(--danger-bg);color:#ef4444;border:1px solid var(--danger-border)} .disc-dominant-J{background:var(--warning-bg);color:#f5bc51;border:1px solid var(--warning-border)} .disc-dominant-V{background:var(--success-bg);color:#2ecc8f;border:1px solid var(--success-border)} .disc-dominant-B{background:var(--info-bg);color:#5ba8f5;border:1px solid var(--info-border)} .disc-bars{display:flex;flex-direction:column;gap:8px;margin-bottom:10px} .disc-bar-row{display:flex;align-items:center;gap:10px;font-size:.8rem} .disc-bar-label{display:flex;align-items:center;gap:6px;width:200px;flex-shrink:0;font-weight:600} .disc-bar-color-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0} .disc-bar-track{flex:1;height:8px;background:var(--s3);border-radius:4px;overflow:hidden} .disc-bar-fill{height:100%;border-radius:4px;transition:width .3s ease} .disc-bar-value{font-family:'Space Mono',monospace;font-size:.75rem;font-weight:700;min-width:80px;text-align:right} .disc-bar-row.is-dominant .disc-bar-label{font-weight:800} .disc-bar-row.is-dominant .disc-bar-value::after{content:" ★";color:var(--accent-texte,var(--accent))} .disc-meta{font-size:.7rem;color:var(--muted);font-style:normal;margin-top:8px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px} .disc-empty-note{font-size:.72rem;color:var(--muted);font-style:normal;padding:10px 12px;background:var(--overlay-low);border:1px dashed var(--border);border-radius:8px;margin:10px 0;text-align:center} .disc-targets-block{margin-top:14px;padding-top:12px;border-top:1px dashed var(--border)} .disc-targets-title{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;display:flex;align-items:center;gap:6px} .disc-target-row{display:grid;grid-template-columns:90px 1fr 130px;gap:10px;align-items:center;font-size:.78rem;margin-bottom:6px} .disc-target-label{display:flex;align-items:center;gap:6px;font-weight:600} .disc-target-track{position:relative;height:6px;background:var(--s3);border-radius:3px;overflow:visible} .disc-target-mark{position:absolute;top:-3px;height:12px;width:2px;background:var(--text)} .disc-target-mark::after{content:'';position:absolute;top:-4px;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--text);border:1.5px solid var(--bg)} .disc-target-fill{position:absolute;top:0;height:100%;border-radius:3px} .disc-target-delta{text-align:right;font-family:'Space Mono',monospace;font-weight:700;font-size:.78rem} .disc-delta-positive{color:var(--green)} .disc-delta-negative{color:var(--rouge-texte,var(--red))} .disc-delta-neutral{color:var(--muted)}@media(max-width:600px){ .disc-bar-label{width:auto} .disc-bar-row{flex-wrap:wrap} .disc-bar-track{order:3;width:100%} } /* Historique mails dans le modal candidat */ .mail-history-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--overlay-low);border-radius:7px;margin-bottom:6px;font-size:.78rem;border-left:3px solid var(--green)} .mail-history-item.failed{border-left-color:var(--red)} .mail-history-item-info{flex:1;min-width:0} .mail-history-item-tpl{font-weight:600;font-size:.82rem} .mail-history-item-meta{font-size:.7rem;color:var(--muted);margin-top:2px} .mail-history-empty{text-align:center;color:var(--muted);font-style:normal;padding:14px;font-size:.78rem} /* ═══════════ Phase 3B-bis.2 : Espace client : Mes candidats ═══════════ */ .client-cand-card{box-shadow:var(--shadow);background:var(--s1);border:1px solid var(--border);border-radius:var(--r);padding:14px 18px;margin-bottom:10px;display:flex;align-items:center;gap:14px;flex-wrap:wrap} .client-cand-info{flex:1;min-width:200px} .client-cand-name{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.95rem;margin-bottom:3px} .client-cand-meta{font-size:.72rem;color:var(--muted)} .client-cand-scores{display:flex;gap:14px;font-family:'Space Mono',monospace;font-size:.85rem;align-items:center} .client-cand-fb{display:flex;gap:6px;flex-wrap:wrap} .client-cand-fb-btn{padding:7px 12px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--muted);font-family:'Plus Jakarta Sans',sans-serif;font-size:.78rem;font-weight:600;cursor:pointer;transition:border-color.18s cubic-bezier(.4,0,.2,1),color.18s cubic-bezier(.4,0,.2,1),background.18s} .client-cand-fb-btn:hover{border-color:var(--text);color:var(--text)} .client-cand-fb-btn.active-oui{background:var(--green);border-color:var(--green);color:#fff} .client-cand-fb-btn.active-entretien{background:var(--yellow);border-color:var(--yellow);color:#000} .client-cand-fb-btn.active-non{background:var(--red);border-color:var(--red);color:#fff} .client-cand-fb-info{font-size:.7rem;color:var(--muted);font-style:normal;width:100%;margin-top:4px} /* Fluent UI 2D System Icons (monochrome, currentColor via mask) */ .icon-2d{display:inline-block;width:1.2em;height:1.2em;vertical-align:-0.25em;background-color:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center} /* ════════════ Stats Postes : Dashboard pro & léger ════════════ */ .stats-poste-card{background:var(--s1);border:1px solid var(--border);border-radius:18px;margin-bottom:20px;box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1)} .stats-poste-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)} button:focus-visible,a:focus-visible,select:focus-visible,[tabindex]:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px} .stats-poste-head{padding:20px 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:14px;background:var(--s2)} .stats-poste-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:1.05rem;margin:0;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:10px} .stats-poste-title::before{content:'';width:3px;height:18px;background:currentColor;border-radius:2px;opacity:.85} .stats-poste-meta{display:flex;gap:24px;font-size:.85rem;color:var(--muted);flex-wrap:wrap;align-items:center} .stats-poste-meta strong{font-family:'Space Mono',monospace;font-weight:600;color:var(--text);margin-left:4px} .stats-poste-count{color:var(--muted);font-weight:500} .stats-poste-body{padding:28px;display:grid;grid-template-columns:auto 220px 1fr;gap:32px;align-items:center} .stats-poste-radar{display:flex;align-items:center;justify-content:center} .stats-poste-best-lbl{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;font-weight:600} .stats-poste-best-name{font-weight:600;font-size:1.05rem;color:var(--text);margin-bottom:4px;letter-spacing:-.01em} .stats-poste-best-score{font-size:.82rem;color:var(--muted);font-family:'Space Mono',monospace} .stats-poste-list{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start} .stats-poste-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:var(--s1);border:1px solid var(--border);border-radius:8px;font-size:.82rem;transition:border-color .15s,background .15s} .stats-poste-chip:hover{border-color:var(--muted);background:var(--s2)} .stats-poste-chip-name{color:var(--text);font-weight:500} .stats-poste-chip-pct{font-family:'Space Mono',monospace;font-size:.76rem;font-weight:600;color:var(--muted)} .stats-poste-best-row{display:flex;align-items:center;gap:10px} .stats-poste-invite{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--s1);border:1px solid var(--border);border-radius:7px;font-size:.78rem;color:var(--muted);cursor:pointer;font-family:inherit;transition:border-color .15s,color .15s;white-space:nowrap} .stats-poste-invite:hover{border-color:var(--accent);color:var(--text)} .stats-poste-invite .icon-2d{width:15px;height:15px} .aifit-result:empty{display:none} .aifit-box{margin:16px 24px 6px;padding:24px 26px;border-radius:22px;background:var(--s1);box-shadow:0 20px 60px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04);font-size:.86rem;line-height:1.6;animation:aifitIn .5s cubic-bezier(.4,0,.2,1)} .aifit-box a:focus-visible,.aifit-box button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px} @keyframes aifitIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .aifit-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:6px;cursor:pointer;user-select:none} .aifit-head-right{display:flex;align-items:center;gap:12px} .aifit-collapse{width:26px;height:26px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(128,128,128,.1);transition:background .15s} .aifit-collapse .icon-2d{width:16px;height:16px;background:var(--muted);transform:rotate(180deg);transition:transform .25s cubic-bezier(.4,0,.2,1)} .aifit-head:hover .aifit-collapse{background:rgba(128,128,128,.2)} .aifit-box.is-collapsed .aifit-body{display:none} .aifit-box.is-collapsed .aifit-head{margin-bottom:0} .aifit-box.is-collapsed .aifit-collapse .icon-2d{transform:rotate(0deg)} .aifit-h{font-size:.64rem;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);font-weight:600} .aifit-verdict{font-weight:800;font-size:1.4rem;margin-top:4px;letter-spacing:-.02em} .aifit-gauge{flex-shrink:0;width:78px;height:78px;border:2px solid;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;font-size:1.45rem;line-height:1;box-shadow:0 6px 18px rgba(0,0,0,.12)} .aifit-gauge span{font-size:.46rem;color:var(--muted);font-weight:600;margin-top:2px;text-transform:uppercase;letter-spacing:.06em} .aifit-syn{color:var(--text);margin:10px 0 2px} .aifit-sec-t{font-size:.63rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--muted);margin:20px 0 9px;opacity:.85} .aifit-task{display:flex;align-items:baseline;gap:11px;padding:8px 0} .aifit-task + .aifit-task{border-top:1px solid rgba(128,128,128,.1)} .aifit-owner{flex-shrink:0;font-size:.62rem;font-weight:700;padding:3px 11px;border-radius:20px;text-transform:uppercase;letter-spacing:.04em} .aifit-task-name{color:var(--text);font-weight:500} .aifit-task-why{color:var(--muted);font-size:.8rem;font-style:normal} .aifit-task-delai{color:var(--muted);font-size:.7rem;font-family:'Space Mono',monospace;opacity:.75} .aifit-ul{margin:2px 0;padding-left:2px;color:var(--text);list-style:none} .aifit-ul li{margin-bottom:6px;padding-left:17px;position:relative} .aifit-ul li::before{content:'';position:absolute;left:1px;top:.5em;width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.45} .aifit-agent{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;flex-wrap:wrap} .aifit-agent + .aifit-agent{border-top:1px solid rgba(128,128,128,.1)} .aifit-agent-main{flex:1;min-width:190px} .aifit-agent-tools{display:flex;gap:7px;flex-wrap:wrap;flex-shrink:0} .aifit-agent-link{font-size:.72rem;color:var(--accent-texte,var(--accent));text-decoration:none;white-space:nowrap;background:rgba(224,32,40,.08);border-radius:16px;padding:4px 12px;transition:background .15s ease,transform .15s ease} .aifit-agent-link:hover{background:rgba(224,32,40,.16);transform:translateY(-1px)} .aifit-costs{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px} .aifit-cost{flex:1;min-width:132px;padding:15px 16px;border-radius:15px;background:rgba(128,128,128,.06);display:flex;flex-direction:column;gap:6px} .aifit-cost span{font-size:.61rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em} .aifit-cost b{font-size:1.35rem;font-weight:800;letter-spacing:-.02em} .aifit-cost-note{font-size:.76rem;color:var(--muted);font-style:normal;margin-top:11px;opacity:.9} .aifit-sources{font-size:.7rem;color:var(--muted);margin-top:14px;padding-top:10px;border-top:1px dashed var(--border);line-height:1.5} .aifit-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:18px;flex-wrap:wrap} .aifit-cached{font-size:.72rem;color:var(--muted)} .aifit-refresh{background:none;border:0;color:var(--muted);font-size:.74rem;cursor:pointer;padding:2px 4px;font-family:inherit;transition:color .15s} .aifit-refresh:hover{color:var(--accent-texte,var(--accent))} .aifit-zone-cap{font-size:.7rem;color:var(--muted);margin:2px 0 7px} .aifit-zone-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:13px} .aifit-zonechip{font-family:inherit;font-size:.72rem;color:var(--muted);background:rgba(128,128,128,.08);border:1px solid transparent;border-radius:16px;padding:5px 12px;cursor:pointer;transition:color .14s,background .14s} .aifit-zonechip:hover{color:var(--text);background:rgba(128,128,128,.16)} .aifit-zonechip.is-sel{color:#fff;background:var(--accent);font-weight:600} .aifit-badges{display:flex;flex-wrap:wrap;gap:8px;margin:13px 0 2px} .aifit-badge{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:600;padding:6px 12px;border-radius:14px;border:1px solid;line-height:1.25} .aifit-badge i{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0} .aifit-badge small{color:var(--muted);font-weight:500;font-size:.66rem;letter-spacing:.02em} .aifit-hz{display:flex;gap:10px;margin-top:4px} .aifit-hz-item{flex:1;min-width:92px;background:rgba(128,128,128,.06);border-radius:13px;padding:11px 13px} .aifit-hz-when{font-size:.59rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600} .aifit-hz-val{font-size:1.1rem;font-weight:800;letter-spacing:-.02em;margin:4px 0 7px} .aifit-hz-track{height:5px;border-radius:3px;background:rgba(128,128,128,.16);overflow:hidden} .aifit-hz-fill{height:100%;border-radius:3px;background:var(--accent);transition:width .55s cubic-bezier(.4,0,.2,1)} .aifit-oneoff{display:flex;flex-wrap:wrap;gap:7px 18px;margin-top:11px;font-size:.76rem;color:var(--muted)} .aifit-oneoff b{color:var(--text);font-weight:700;margin-left:5px} .aifit-roi{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px} .aifit-roi-item{flex:1;min-width:150px;padding:13px 16px;border-radius:14px;background:rgba(128,128,128,.06);border:1px solid rgba(128,128,128,.14);display:flex;flex-direction:column;gap:4px} .aifit-roi-item span{font-size:.61rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em} .aifit-roi-item b{font-size:1.3rem;font-weight:800;letter-spacing:-.02em} .aifit-cost-eco{background:rgba(22,163,74,.08);box-shadow:inset 0 0 0 1px rgba(22,163,74,.2)} .aifit-reco{margin:14px 0 2px;padding:13px 16px;border:1px solid;border-radius:14px;font-weight:600;color:var(--text);font-size:.9rem;line-height:1.5} .aifit-reco-lbl{display:block;font-size:.59rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-bottom:4px} /* ── Bandeau démo « votre secteur » (dropdown custom premium) ── */ .demo-bar{display:none;position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:9000;align-items:center;gap:12px;background:linear-gradient(180deg,rgba(31,35,48,.97),rgba(15,18,26,.97));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:8px 10px 8px 16px;box-shadow:0 20px 54px -16px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05);color:#e6e9f2;font-size:.82rem;animation:demoBarIn .5s cubic-bezier(.34,1.56,.64,1)} @keyframes demoBarIn{from{opacity:0;transform:translateX(-50%) translateY(-14px)}to{opacity:1;transform:translateX(-50%) translateY(0)}} .demo-bar-icon{width:17px;height:17px;flex-shrink:0;background:#ff5158;-webkit-mask:var(--ic-b10dd270e1) center/contain no-repeat;mask:var(--ic-b10dd270e1) center/contain no-repeat} .demo-bar-lbl{font-weight:700;color:#8b93ad;text-transform:uppercase;font-size:.62rem;letter-spacing:.1em;white-space:nowrap} .demo-dd{position:relative} .demo-dd-trigger{display:inline-flex;align-items:center;gap:12px;min-width:160px;justify-content:space-between;padding:8px 13px;border-radius:11px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;font-family:inherit;font-size:.86rem;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s} .demo-dd-trigger:hover{border-color:rgba(224,32,40,.55);background:rgba(255,255,255,.1)} .demo-dd-caret{width:15px;height:15px;flex-shrink:0;background:#aeb6cc;-webkit-mask:var(--ic-abc96c185b) center/contain no-repeat;mask:var(--ic-abc96c185b) center/contain no-repeat;transition:transform .22s cubic-bezier(.4,0,.2,1)} .demo-dd.open .demo-dd-caret{transform:rotate(180deg)} .demo-dd-menu{position:absolute;top:calc(100% + 9px);right:0;min-width:212px;background:linear-gradient(180deg,#21252f,#14171f);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:6px;box-shadow:0 26px 64px -20px rgba(0,0,0,.9);opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top right;pointer-events:none;transition:opacity .17s cubic-bezier(.4,0,.2,1),transform .17s cubic-bezier(.4,0,.2,1);z-index:20} .demo-dd.open .demo-dd-menu{opacity:1;transform:none;pointer-events:auto} .demo-dd-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:9px 12px;border:0;border-radius:9px;background:none;color:#d7dbe6;font-family:inherit;font-size:.85rem;font-weight:500;cursor:pointer;transition:background .12s,color .12s} .demo-dd-opt:hover{background:rgba(255,255,255,.08);color:#fff} .demo-dd-opt.is-active{color:#ff5158;font-weight:600} .demo-dd-opt.is-active::after{content:'';width:16px;height:16px;flex-shrink:0;background:#ff5158;-webkit-mask:var(--ic-d70f10a949) center/contain no-repeat;mask:var(--ic-d70f10a949) center/contain no-repeat} @media (max-width:900px){.stats-poste-body{grid-template-columns:1fr;gap:20px;padding:20px}} /* ════════════ Phase 5A.4.n : Vivier (Talent Pool cross-postes) ════════════ */ .pool-filters{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-end;background:var(--s1);border:1px solid var(--border);border-radius:12px;padding:18px 22px;margin-bottom:20px;box-shadow:var(--shadow-sm)} .pool-filter{display:flex;flex-direction:column;gap:6px;min-width:200px;flex:1} .pool-filter-lbl{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600;display:flex;justify-content:space-between;align-items:center} .pool-filter-val{color:var(--accent-texte,var(--accent));font-family:'Space Mono',monospace;font-weight:700;text-transform:none;letter-spacing:0} .pool-filter-input{background:var(--s2);border:1px solid var(--border);border-radius:8px;padding:9px 12px;font-family:inherit;font-size:.88rem;color:var(--text);outline:none;transition:border-color .2s} .pool-filter-input:focus{border-color:var(--accent)} .pool-filter input[type="range"]{accent-color:var(--accent);width:100%} .pool-filter .msel{display:block;width:100%} .pool-filter .msel-btn{width:100%;min-width:0} .pool-table-wrap{background:var(--s1);border:1px solid var(--border);border-radius:12px;overflow:auto;box-shadow:var(--shadow-sm);max-height:calc(100vh - 280px)} .pool-table{width:100%;border-collapse:collapse;font-size:.85rem;min-width:800px} .pool-table thead th{background:var(--s2);padding:14px 12px;text-align:center;font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-bottom:2px solid var(--border);position:sticky;top:0;z-index:10;white-space:nowrap} .pool-table thead th.th-candidat{text-align:left;min-width:200px;background:var(--s2)} .pool-table thead th.th-poste-actuel{min-width:140px;text-align:left;color:var(--muted)} .pool-table thead th.th-compat{min-width:110px;max-width:140px} .pool-table thead th.th-compat .pool-poste-bar{display:block;width:24px;height:3px;border-radius:2px;margin:6px auto 0;background:currentColor} .pool-table tbody tr{transition:background .12s;cursor:pointer} .pool-table tbody tr:hover{background:var(--s2)} .pool-table tbody td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle} .pool-td-name{font-weight:500} .pool-td-name-main{color:var(--text);font-size:.92rem} .pool-td-name-sub{color:var(--muted);font-size:.72rem;font-family:'Space Mono',monospace;margin-top:2px} .pool-td-poste-actuel{font-size:.82rem;color:var(--muted)} .pool-td-compat{text-align:center;font-family:'Space Mono',monospace;font-weight:600;font-size:.88rem;position:relative} .pool-td-compat-cell{display:inline-flex;align-items:center;justify-content:center;min-width:54px;padding:5px 10px;border-radius:6px;border:1px solid transparent;transition:transform .12s} .pool-table tbody tr:hover .pool-td-compat-cell{transform:scale(1.05)} .pool-td-compat-cell.is-current{outline:1.5px dashed var(--accent);outline-offset:2px} .pool-td-compat-cell.is-best{box-shadow:0 0 0 2px var(--accent),0 0 0 3px var(--s1)} .pool-empty{text-align:center;padding:60px 30px;color:var(--muted);font-size:.95rem;background:var(--s1);border:1px dashed var(--border);border-radius:12px} .pool-empty-icon{font-size:2.4rem;margin-bottom:12px;opacity:.4} .pool-legend{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:18px;font-size:.74rem;color:var(--muted)} .pool-legend-item{display:inline-flex;align-items:center;gap:6px} .pool-legend-dot{width:14px;height:14px;border-radius:4px;border:1px solid transparent} .pool-stat-row{display:flex;gap:14px;margin-bottom:16px;flex-wrap:wrap} .pool-stat{flex:1;min-width:160px;background:var(--s1);border:1px solid var(--border);border-radius:10px;padding:14px 18px;box-shadow:var(--shadow-sm)} .pool-stat-lbl{font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:4px} .pool-stat-val{font-family:'Space Mono',monospace;font-weight:700;font-size:1.6rem;color:var(--text);line-height:1} .pool-stat-sub{font-size:.7rem;color:var(--muted);margin-top:3px} /* Phase 5A.4.u : Disclaimer théorique + tooltip enrichi + bouton approfondir */ .pool-disclaimer{display:inline-flex;gap:10px;padding:8px 14px;background:transparent;border:1px solid var(--border);border-radius:8px;margin-bottom:18px;font-size:.78rem;line-height:1.55;color:var(--muted);align-items:center;max-width:fit-content} .pool-disclaimer-icon{width:14px;height:14px;flex-shrink:0;background-color:var(--muted);opacity:.7} .pool-disclaimer strong{color:var(--text);font-weight:600} .pool-disclaimer-em{color:var(--accent-texte,var(--accent));font-weight:500;font-style:normal} /* ═══ Sourcing : recherche de profils dans le vivier ═══ */ .src-panel{background:var(--s1);border:1px solid var(--border);border-radius:14px;padding:22px 24px;margin-bottom:22px;box-shadow:var(--shadow-sm)} .src-title{font-size:1.02rem;font-weight:700;color:var(--text);letter-spacing:-.01em} .src-sub{font-size:.82rem;color:var(--muted);margin-top:4px;max-width:58ch;line-height:1.5} .src-sources{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px} .src-sources:empty{display:none} /* Compteur de consommation : ce qui reste, et le plafond que le client fixe */ .src-quota{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px dashed var(--border)} .src-quota:empty{display:none} .src-quota-txt{font-size:.8rem;color:var(--muted)} .src-quota-txt b{color:var(--text);font-weight:700} .src-quota-bar{width:120px;height:6px;border-radius:3px;background:color-mix(in srgb, var(--accent) 16%, transparent);overflow:hidden} .src-quota-fill{display:block;height:100%;background:var(--accent);border-radius:3px} /* Deux modes de recherche : mon vivier, ou le marche */ .src-modes{display:inline-flex;gap:4px;margin:14px 0 4px;padding:4px;background:var(--s2);border-radius:9px} .src-mode{border:none;background:none;padding:7px 15px;border-radius:6px;color:var(--muted);font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;transition:background .15s,color .15s} .src-mode:hover{color:var(--text)} .src-mode.on{background:var(--s1);color:var(--text);box-shadow:var(--shadow-sm)} .src-source-badge{border-color:rgba(99,102,241,.35);background:rgba(99,102,241,.10);color:#7B7DD1}.src-source-off{border-color:var(--border);background:transparent;color:var(--muted)} .src-card-link{font-size:.78rem;color:var(--accent-texte,var(--accent));font-weight:600;text-decoration:none} .src-card-link:hover{text-decoration:underline} .src-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 18px;margin-top:18px} .src-field{flex:1;min-width:240px;max-width:360px} .src-lbl{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-bottom:7px} .src-toggle{display:inline-flex;align-items:center;gap:9px;font-size:.84rem;color:var(--text);cursor:pointer;padding-bottom:9px} .src-toggle input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer} .src-toggle-hint{font-size:.74rem;color:var(--muted);display:block;margin-top:2px} /* Deroulé de la recherche : une ligne par etape reellement executee par le serveur */ .src-run{margin-top:20px;padding-top:18px;border-top:1px solid var(--border)} .src-step{display:flex;align-items:flex-start;gap:12px;padding:9px 0;opacity:.35;transition:opacity .35s cubic-bezier(.22,.61,.36,1)} .src-step.is-active,.src-step.is-done{opacity:1} .src-step-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;transition:border-color .3s,background .3s} .src-step.is-active .src-step-dot{border-color:var(--accent)} .src-step.is-done .src-step-dot{border-color:var(--accent);background:var(--accent)} .src-step-dot .icon-2d{width:10px;height:10px;background:#fff;opacity:0;transition:opacity .2s} .src-step.is-done .src-step-dot .icon-2d{opacity:1} .src-step-label{font-size:.86rem;color:var(--text);font-weight:600} .src-step-val{font-size:.8rem;color:var(--muted);margin-top:2px;min-height:1.1em} .src-step-val b{color:var(--text);font-weight:700} .src-results-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:24px 0 12px} .src-results-count{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700} .src-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px} .src-card{background:var(--s1);border:1px solid var(--border);border-radius:12px;padding:16px 18px;transition:border-color .18s,box-shadow .18s} .src-card:hover{border-color:color-mix(in srgb, var(--accent) 40%, var(--border));box-shadow:var(--shadow-sm)} .src-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .src-card-name{font-weight:700;font-size:.94rem;color:var(--text)} .src-card-meta{font-size:.76rem;color:var(--muted);margin-top:3px} .src-score{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.5rem;font-weight:700;line-height:1;color:var(--accent-texte,var(--accent))} .src-score-lbl{font-size:.64rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);text-align:right;margin-top:3px} .src-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px} .src-badge{font-size:.68rem;font-weight:600;padding:3px 9px;border-radius:999px;border:1px solid var(--border);color:var(--muted)} .src-badge-vivier{border-color:var(--brand-border);background:var(--brand-bg);color:var(--accent-texte,var(--accent))} .src-badge-verif{border-color:rgba(22,163,74,.35);background:rgba(22,163,74,.10);color:#4AA37B} .src-badge-warn{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.10);color:#D97706} .src-skills{margin-top:12px;padding-top:12px;border-top:1px dashed var(--border);display:flex;flex-direction:column;gap:6px} .src-skill{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--text)} .src-skill-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .src-skill-bar{width:80px;height:6px;border-radius:3px;background:color-mix(in srgb, var(--accent) 16%, transparent);overflow:hidden;flex-shrink:0} .src-skill-fill{height:100%;background:var(--accent);border-radius:3px;display:block} .src-skill-lvl{width:30px;text-align:right;font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums} .src-card-actions{display:flex;align-items:center;gap:14px;margin-top:14px} .src-empty{text-align:center;padding:40px 24px;color:var(--muted);font-size:.88rem;border:1px dashed var(--border);border-radius:12px} @media(max-width:640px){.src-grid{grid-template-columns:1fr}.src-field{max-width:none}} :root[data-theme="dark"] .pool-disclaimer{background:rgba(255,255,255,.02);border-color:#2A2F3D} #pool-tooltip-floating{position:fixed;z-index:10000;background:var(--s1);border:1px solid var(--border);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow-md);max-width:320px;font-size:.78rem;line-height:1.55;color:var(--text);pointer-events:none;display:none;font-family:'Plus Jakarta Sans',sans-serif} #pool-tooltip-floating .ptt-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px} #pool-tooltip-floating .ptt-title{font-weight:600;font-size:.82rem;color:var(--text);line-height:1.35} #pool-tooltip-floating.ptt-pct{color:var(--accent-texte,var(--accent));font-weight:700;font-family:'Space Mono',monospace;font-size:.95rem} #pool-tooltip-floating hr{margin:8px 0;border:none;border-top:1px dashed var(--border)} #pool-tooltip-floating .ptt-tag{display:inline-block;font-size:.66rem;font-weight:700;padding:3px 8px;border-radius:5px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px} #pool-tooltip-floating .ptt-tag-native{background:rgba(4,120,87,.14);color:#047857;border:1px solid rgba(4,120,87,.38)} #pool-tooltip-floating .ptt-tag-theoretical{background:rgba(180,83,9,.14);color:#B45309;border:1px solid rgba(180,83,9,.38)} #pool-tooltip-floating .ptt-sub{color:var(--muted);font-size:.74rem;margin-bottom:6px;line-height:1.5} #pool-tooltip-floating .ptt-sub strong{color:var(--text);font-weight:600} #pool-tooltip-floating.ptt-pen{color:#B45309;font-size:.72rem;font-style:normal;margin-bottom:8px;line-height:1.5} #pool-tooltip-floating .ptt-action{color:#0369A1;font-weight:600;font-size:.74rem;line-height:1.5;border-top:1px dashed var(--border);padding-top:8px;margin-top:8px} .pool-td-compat-cell{position:relative} .pool-cell-explore{position:absolute;top:-7px;right:-7px;width:18px;height:18px;background:var(--accent);color:white;border-radius:50%;display:none;align-items:center;justify-content:center;font-size:.58rem;font-weight:700;cursor:pointer;border:2px solid var(--s1);font-family:inherit;line-height:1;box-shadow:0 2px 4px rgba(0,0,0,.2);padding:0} .pool-cell-explore{transition:background .15s cubic-bezier(.4,0,.2,1),transform .15s cubic-bezier(.4,0,.2,1)} .pool-cell-explore:hover{background:#B91C1C;transform:scale(1.15)} .pool-table tbody tr:hover .pool-cell-explore{display:inline-flex} /* Bouton « IA » (éval cross-poste à la demande) - apparaît au survol, en haut à gauche */ .pool-cell-ai{position:absolute;top:-7px;left:-7px;height:18px;padding:0 5px;background:var(--s2);color:var(--muted);border:1.5px solid var(--border);border-radius:9px;display:none;align-items:center;justify-content:center;font-size:.54rem;font-weight:700;letter-spacing:.04em;cursor:pointer;font-family:inherit;line-height:1;box-shadow:0 2px 4px rgba(0,0,0,.2)} .pool-cell-ai{transition:border-color .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1),transform .15s cubic-bezier(.4,0,.2,1)} .pool-cell-ai:hover{border-color:var(--accent);color:var(--accent-texte,var(--accent));transform:scale(1.1)} .pool-table tbody tr:hover .pool-cell-ai{display:inline-flex} .pool-cell-aimark{font-size:.5rem;font-weight:700;color:var(--accent-texte,var(--accent));vertical-align:super;margin-left:2px;letter-spacing:.03em} .pool-td-compat-cell.is-ai{box-shadow:0 0 0 1.5px var(--accent) inset} /* ════════════ Barème : cards colorées par dimension ════════════ */ .bareme-card{background:var(--s1);border:1px solid var(--border);border-top:3px solid var(--dim-color);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;height:100%} .bareme-card-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;color:var(--dim-color)} .bareme-card-title{flex:1;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:.95rem;color:var(--text);letter-spacing:-.01em} .bareme-card-pts{font-family:'Space Mono',monospace;font-size:.72rem;color:var(--dim-color);background:color-mix(in srgb, var(--dim-color) 10%, transparent);border:1px solid color-mix(in srgb, var(--dim-color) 28%, transparent);padding:3px 9px;border-radius:6px;font-weight:600;white-space:nowrap} .bareme-card-rows{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column} .bareme-card-rows li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;border-bottom:1px solid var(--border);font-size:.82rem} .bareme-card-rows li > span:first-child{flex:1;min-width:0} .bareme-card-rows li:last-child{border-bottom:none} .bareme-card-val{font-family:'Space Mono',monospace;font-weight:600;color:var(--dim-color);font-size:.78rem;white-space:nowrap;flex-shrink:0;text-align:right} .bareme-card .icon-2d{color:var(--dim-color)} /* ════════════ Profils idéaux : par catégorie ════════════ */ .profils-cat-section{margin-bottom:32px} .profils-cat-section:last-child{margin-bottom:0} .profils-cat-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:1.05rem;color:var(--text);margin:0 0 16px;display:flex;align-items:center;gap:12px;letter-spacing:-.01em} .profils-cat-title::before{content:'';width:3px;height:18px;background:var(--cat-color);border-radius:2px} .profils-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px} .profil-card{background:var(--s1);border:1px solid var(--border);border-top:3px solid var(--cat-color);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:16px} .profil-card-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:.95rem;color:var(--cat-color);letter-spacing:-.01em} .profil-card-body{display:flex;flex-direction:column;gap:14px;align-items:center} .profil-card-radar{display:flex;justify-content:center} .profil-card-list{width:100%;display:flex;flex-direction:column;gap:8px} .profil-list-row{display:grid;grid-template-columns:90px 1fr 38px;gap:10px;align-items:center;font-size:.78rem} .profil-list-lbl{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .profil-list-bar{height:5px;background:var(--s3);border-radius:3px;overflow:hidden} .profil-list-fill{display:block;height:100%;border-radius:3px;opacity:.85} .profil-list-val{font-family:'Space Mono',monospace;font-size:.72rem;color:var(--muted);text-align:right;font-weight:600} @media (max-width:600px){.profil-list-row{grid-template-columns:80px 1fr 34px}} /* ═══════════════════════════════════════════════════════ Phase audit responsive : Fixes mobile critiques ═══════════════════════════════════════════════════════ */ /* @900px : tablette portrait : grilles dashboard se simplifient */ @media (max-width:900px){ .stats-row{grid-template-columns:repeat(2,1fr)} /* 4 KPI → 2×2 */ .card.expanded .card-detail{grid-template-columns:1fr} /* 3 cols → 1 col */ .cmodal-meta{grid-template-columns:1fr} /* 2 cols → 1 col */ } /* @700px : mobile landscape : reflow cards candidats */ @media (max-width:700px){ .card-top{grid-template-columns:1fr;grid-template-rows:auto auto auto}/* score / main / radar empilés */ .card-score{border-right:none;border-bottom:1px solid var(--border);flex-direction:row;justify-content:space-between;padding:14px 18px} .card-radar{border-left:none;border-top:1px solid var(--border);padding:16px} } /* @600px : petit mobile : derniers ajustements serrés */ @media (max-width:600px){ .stats-row{grid-template-columns:1fr} /* 2×2 → 1 col */ .disc-target-row{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:6px} /* label / barre / delta empilés */ .disc-target-delta{text-align:left} .rh-bar-row{grid-template-columns:1fr 48px;grid-template-rows:auto auto;gap:6px 12px} /* label / barre+val */ .rh-bar-row .rh-bar{grid-column:1/-1} /* barre pleine largeur */ } /* === Phase 5A.4.i : Compactage nav (anti-overflow horizontal) === */ .nav{padding:0 16px;gap:0} .logo{margin-right:16px} .nav .nav-tab{padding:16px 12px} .nav .nav-right{gap:8px} .nav .btn-sm{padding:7px 12px;font-size:.78rem;gap:6px} @media (max-width:1499px){ .nav .nav-tab{padding:14px 10px;font-size:.76rem} .nav .btn-sm-brand, .nav .btn-sm-warning, .nav #superAdminBtn{font-size:0;gap:0;padding:7px 10px} .nav .btn-sm-brand .icon-2d, .nav .btn-sm-warning .icon-2d, .nav #superAdminBtn .icon-2d{width:16px;height:16px} } @media (max-width:1199px){ .nav{padding:0 10px} .logo{margin-right:10px} .nav .nav-tab{padding:14px 7px;font-size:.72rem} .nav .nav-right{gap:6px} } /* === Phase 6.7 : Widget utilisation IA === */ .usage-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:var(--s1);border:1px solid var(--border);border-radius:8px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.82rem;color:var(--text);cursor:pointer;transition:border-color.15s,background.15s;white-space:nowrap} .usage-badge:hover{border-color:var(--accent);background:var(--brand-bg)} .usage-badge-icon{width:14px;height:14px;color:var(--accent-texte,var(--accent));flex-shrink:0} .usage-badge-current{font-weight:600} .usage-badge-divider{color:var(--muted);font-weight:400} .usage-badge-max{color:var(--muted)} .usage-badge-mini-bar{width:36px;height:4px;background:var(--s3);border-radius:2px;overflow:hidden;flex-shrink:0} .usage-badge-mini-fill{height:100%;border-radius:2px;transition:width .4s ease,background .4s ease} .usage-badge.is-warning .usage-badge-mini-fill{background:var(--warning)} .usage-badge.is-critical .usage-badge-mini-fill{background:var(--danger)} .usage-badge.is-normal .usage-badge-mini-fill{background:var(--success)} .usage-badge.is-loading{opacity:.5;pointer-events:none} .usage-card{background:var(--s1);border:1px solid var(--border);border-radius:14px;padding:22px 26px;box-shadow:var(--shadow-sm);font-family:'Plus Jakarta Sans',sans-serif;margin-bottom:24px} .usage-card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;flex-wrap:wrap;gap:12px} .usage-card-eyebrow{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;font-weight:600} .usage-card-cycle{font-size:.82rem;color:var(--text)} .usage-card-tier{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:999px;font-size:.74rem;font-weight:600;background:var(--info-bg);color:var(--info);border:1px solid var(--info-border)} .usage-card-tier .icon-2d{width:13px;height:13px} .usage-card-main{display:flex;align-items:baseline;gap:8px;margin-bottom:14px} .usage-card-current{font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:2.4rem;color:var(--text);letter-spacing:-.025em;line-height:1} .usage-card-max{font-size:1rem;color:var(--muted);font-weight:500} .usage-card-pct{margin-left:auto;font-size:.88rem;font-weight:700;font-family:'Space Mono',monospace} .usage-card.is-normal .usage-card-pct{color:var(--success)} .usage-card.is-warning .usage-card-pct{color:var(--warning)} .usage-card.is-critical .usage-card-pct{color:var(--danger)} .usage-card-bar{width:100%;height:9px;background:var(--s2);border-radius:5px;overflow:hidden;margin-bottom:14px} .usage-card-bar-fill{height:100%;border-radius:5px;transition:width .6s cubic-bezier(.22,.61,.36,1),background .4s} .usage-card.is-normal .usage-card-bar-fill{background:var(--success)} .usage-card.is-warning .usage-card-bar-fill{background:var(--warning)} .usage-card.is-critical .usage-card-bar-fill{background:var(--danger)} .usage-card-meta{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);margin-bottom:18px;flex-wrap:wrap;gap:10px} .usage-card-meta .icon-2d{width:14px;height:14px;vertical-align:-2px;margin-right:5px} .usage-card-alert{border-radius:10px;padding:12px 16px;margin-bottom:16px;display:flex;align-items:flex-start;gap:11px;font-size:.84rem;line-height:1.55} .usage-card-alert.is-warning{background:var(--warning-bg);border:1px solid var(--warning-border);color:var(--warning)} .usage-card-alert.is-critical{background:var(--danger-bg);border:1px solid var(--danger-border);color:var(--danger)} .usage-card-alert .icon-2d{width:18px;height:18px;flex-shrink:0;margin-top:1px} .usage-card-alert-text strong{font-weight:600;display:block;margin-bottom:2px} .usage-card-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .usage-card-kpis:has(.commercial-only){grid-template-columns:1fr} @media(max-width:600px){.usage-card-kpis{grid-template-columns:1fr}} .usage-kpi{background:var(--s2);border:1px solid var(--border);border-radius:10px;padding:13px 16px} .usage-kpi-lbl{font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;font-weight:600} .usage-kpi-val{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.15rem;font-weight:600;color:var(--text);letter-spacing:-.015em;line-height:1.1} .usage-kpi-sub{font-size:.7rem;color:var(--muted);margin-top:3px} .usage-card-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap} .usage-card-cta{padding:10px 18px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:.84rem;cursor:pointer;transition:background.2s} .usage-card-cta:hover{background:#B91C1C} .usage-card-cta-secondary{padding:10px 18px;background:transparent;color:var(--text);border:1px solid var(--border);border-radius:8px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:.84rem;cursor:pointer;transition:border-color.15s} .usage-card-cta-secondary:hover{border-color:var(--accent);color:var(--accent-texte,var(--accent))} .usage-card-settings-btn{background:transparent;border:1px solid var(--border);border-radius:8px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);transition:border-color .15s,color .15s} .usage-card-settings-btn:hover{border-color:var(--accent);color:var(--accent-texte,var(--accent))} .usage-card-settings-btn .icon-2d{width:15px;height:15px;background:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center} .usage-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:9998;display:none;align-items:center;justify-content:center;padding:20px} .usage-modal-backdrop.is-open{display:flex} .usage-modal{background:var(--s1);border:1px solid var(--border);border-radius:18px;box-shadow:0 32px 80px rgba(0,0,0,.40);font-family:'Plus Jakarta Sans',sans-serif;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;animation:modalSlideUp.26s cubic-bezier(.4,0,.2,1) both} .usage-modal-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--border)} .usage-modal-head h3{letter-spacing:-.03em;margin:0;font-family:'Space Mono', ui-monospace, monospace;font-size:1.4rem;font-weight:400;color:var(--text)} .usage-modal-close{background:transparent;border:none;font-size:1.6rem;color:var(--muted);cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;line-height:1;transition:background .15s,color .15s} .usage-modal-close:hover{background:var(--s2);color:var(--text)} .usage-modal-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .usage-modal-body{padding:20px 24px;display:flex;flex-direction:column;gap:18px} .usage-modal-field{display:flex;flex-direction:column;gap:7px} .usage-modal-field label{font-size:.78rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em} .usage-modal-field select{padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--s2);color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;font-size:.9rem;cursor:pointer} .usage-modal-field select:focus{outline:none;border-color:var(--accent)} .usage-modal-field input[type="text"],.usage-modal-field input[type="email"],.usage-modal-field textarea{padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--s2);color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;font-size:.9rem} .usage-modal-field input[type="text"]:focus,.usage-modal-field input[type="email"]:focus,.usage-modal-field textarea:focus{outline:none;border-color:var(--accent)} .usage-modal-field textarea{resize:vertical;min-height:60px} .usage-modal-field-hint{font-size:.76rem;color:var(--muted)} .usage-modal-radios{display:flex;flex-direction:column;gap:8px} .usage-modal-radio{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:border-color .15s,background .15s} .usage-modal-radio:hover{border-color:var(--accent);background:var(--brand-bg)} .usage-modal-radio input[type="radio"],.usage-modal-radio input[type="checkbox"]{margin:0;accent-color:var(--accent)} .usage-modal-radio-text{flex:1;font-size:.88rem;color:var(--text)} .usage-modal-radio-saving{font-size:.7rem;background:#4AA37B;color:#fff;padding:2px 8px;border-radius:999px;font-weight:600} .usage-modal-foot{display:flex;gap:10px;justify-content:flex-end;padding:16px 24px;border-top:1px solid var(--border);background:var(--s2);border-radius:0 0 16px 16px} .usage-modal-feedback{font-size:.82rem;padding:8px 12px;border-radius:8px;display:none} .usage-modal-feedback.is-success{display:block;background:#DCFCE7;color:#166534;border:1px solid #BBF7D0} .usage-modal-feedback.is-error{display:block;background:#FEE2E2;color:#991B1B;border:1px solid #FECACA} /* Phase 6.7.5 : Modal détail usage IA */ .ud-modal{max-width:560px} .ud-section{display:flex;flex-direction:column;gap:14px} .ud-tier-line{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;background:var(--s2);border:1px solid var(--border);border-radius:12px} .ud-tier-tag{display:inline-flex;align-items:center;gap:7px;font-size:.86rem;font-weight:600} .ud-tier-tag-pill{font-size:.66rem;background:var(--brand-bg);color:var(--brand-500);padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em} .ud-tier-cycle{font-size:.78rem;color:var(--muted)} .ud-progress-block{display:flex;flex-direction:column;gap:8px;padding:14px 16px;background:var(--s2);border:1px solid var(--border);border-radius:12px} .ud-progress-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px} .ud-progress-count{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.5rem;font-weight:600;letter-spacing:-.02em} .ud-progress-count em{font-family:inherit;font-style:normal;color:var(--muted);font-weight:500;font-size:1rem;margin-left:6px} .ud-progress-pct{font-size:.82rem;color:var(--muted);font-weight:500} .ud-progress-bar{width:100%;height:8px;background:var(--s3);border-radius:999px;overflow:hidden} .ud-progress-fill{height:100%;background:linear-gradient(90deg,var(--success,#4AA37B),#4AA37B);border-radius:999px;transition:width.4s} .ud-progress-fill.is-warning{background:linear-gradient(90deg,var(--warning,#C79A4E),#C79A4E)} .ud-progress-fill.is-critical{background:linear-gradient(90deg,var(--brand-500),#DC2626)} .ud-progress-sub{font-size:.74rem;color:var(--muted);font-style:normal} .ud-breakdown{padding:14px 16px;background:var(--s2);border:1px solid var(--border);border-radius:12px} .ud-breakdown-title{font-size:.7rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px} .ud-breakdown-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px dashed var(--border);font-size:.88rem} .ud-breakdown-row:last-child{border-bottom:none} .ud-breakdown-row-label{display:flex;align-items:center;gap:8px;color:var(--text)} .ud-breakdown-row-label .icon-2d{width:15px;height:15px;color:var(--brand-500)} .ud-breakdown-row-count{font-weight:600;color:var(--text)} .ud-cost-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .ud-cost-card{padding:12px 14px;background:var(--s2);border:1px solid var(--border);border-radius:10px} .ud-cost-card-lbl{font-size:.7rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px} .ud-cost-card-val{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.15rem;font-weight:600;color:var(--text);letter-spacing:-.02em} .ud-cost-card.is-projected.ud-cost-card-val{color:var(--warning,#C79A4E)} .ud-cost-card-sub{font-size:.7rem;color:var(--muted);margin-top:3px} .ud-empty{text-align:center;padding:24px 16px;color:var(--muted);font-size:.88rem} /* Phase 6.8.3 : Trial banner + payment method + trial actions */ .trial-banner{position:sticky;top:0;z-index:100;background:linear-gradient(90deg,#FEF3C7,#FCD34D);color:#78350F;padding:10px 20px;display:none;align-items:center;justify-content:center;gap:16px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.86rem;font-weight:500;border-bottom:1px solid #C79A4E} .trial-banner.is-active{display:flex} .trial-banner-icon{width:18px;height:18px;flex-shrink:0;background:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center} .trial-banner-cta{background:rgba(255,255,255,.5);border:1px solid #78350F;color:#78350F;padding:5px 14px;border-radius:8px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:.78rem;cursor:pointer;transition:background.15s} .trial-banner-cta:hover{background:rgba(255,255,255,.85)} .trial-banner.is-expired{background:linear-gradient(90deg,#FEE2E2,#FCA5A5);color:#991B1B;border-bottom-color:#DC2626} .trial-banner.is-expired .trial-banner-cta{border-color:#991B1B;color:#991B1B} .pm-card{background:var(--s2);border:1px solid var(--border);border-radius:10px;padding:12px 16px;display:flex;align-items:center;gap:12px} .pm-card-icon{width:38px;height:24px;background:linear-gradient(135deg,#1A1F71,#0F1457);border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.05em;flex-shrink:0;text-transform:uppercase} .pm-card-info{flex:1;font-size:.88rem;color:var(--text)} .pm-card-info-sub{font-size:.7rem;color:var(--muted);margin-top:2px} .pm-card-action{background:transparent;border:none;color:var(--accent-texte,var(--accent));font-size:.78rem;cursor:pointer;font-weight:500} .pm-card-action:hover{text-decoration:underline} .pm-inputs{display:grid;grid-template-columns:1fr 1fr;gap:10px} .pm-inputs select,.pm-inputs input{padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--s2);color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;font-size:.9rem} .pm-inputs input:focus,.pm-inputs select:focus{outline:none;border-color:var(--accent)} .pm-note{font-size:.7rem;color:var(--muted);margin-top:4px;font-style:normal} .trial-cta-section{background:linear-gradient(135deg,#FEF3C7,#FDE68A);border:1px solid #C79A4E;border-radius:12px;padding:16px} .trial-cta-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:.92rem;color:#78350F;margin-bottom:6px} .trial-cta-desc{font-size:.78rem;color:#92400E;line-height:1.5;margin-bottom:12px} .trial-cta-btn{width:100%;padding:12px;background:#C79A4E;color:#fff;border:none;border-radius:8px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:.88rem;cursor:pointer;transition:background.2s} .trial-cta-btn:hover{background:#D97706} .trial-cta-btn:disabled{background:#FCD34D;cursor:not-allowed;opacity:.7} .trial-active-section{background:#ECFEFF;border:1px solid #06B6D4;border-radius:12px;padding:16px} .trial-active-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:.92rem;color:#0E7490;margin-bottom:6px} .trial-active-info{font-size:.78rem;color:#155E75;line-height:1.5;margin-bottom:12px} .trial-active-btn{width:100%;padding:10px;background:transparent;color:#991B1B;border:1px solid #FCA5A5;border-radius:8px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:.82rem;cursor:pointer;transition:background.15s} .trial-active-btn:hover{background:#FEE2E2} /* ═══ Phase 5A.4.i : Modal changer mot de passe ═══ */ .modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .modal-backdrop.open{display:flex} .modal-card{background:var(--s1);border:1px solid var(--border);border-radius:18px;padding:28px;max-width:440px;width:90%;box-shadow:0 32px 80px rgba(0,0,0,.40);animation:modalSlide .26s cubic-bezier(.4,0,.2,1)} @keyframes modalSlide{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}} .modal-head{display:flex;align-items:center;gap:12px;margin-bottom:20px} .modal-title{letter-spacing:-.03em;font-family:'Space Mono', ui-monospace, monospace;font-size:1.6rem;color:var(--text);margin:0;line-height:1.1} .modal-field{margin-bottom:14px} .modal-field label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:6px;font-weight:500;font-family:'Plus Jakarta Sans',sans-serif} .modal-field input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--s2);color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;font-size:.95rem;transition:border-color.15s,background.15s;box-sizing:border-box} .modal-field input:focus{outline:none;border-color:var(--brand-500);background:var(--s1)} .modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px} .modal-msg{font-size:.85rem;margin-top:12px;padding:10px 12px;border-radius:8px;display:none;font-family:'Plus Jakarta Sans',sans-serif;line-height:1.4} .modal-msg.error{display:block;background:rgba(224,32,40,.08);color:var(--rouge-texte,#E5202A);border:1px solid rgba(224,32,40,.25)} .modal-msg.success{display:block;background:rgba(22,163,74,.08);color:#4AA37B;border:1px solid rgba(22,163,74,.25)} .modal-msg.info{display:block;background:var(--s2);color:var(--muted);border:1px solid var(--border)} .modal-welcome{background:rgba(224,32,40,.06);border:1px solid rgba(224,32,40,.2);border-radius:10px;padding:14px 16px;margin-bottom:18px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.88rem;color:var(--text);line-height:1.55} .modal-welcome strong{display:block;color:var(--rouge-texte,#E5202A);font-weight:400;font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-size:1.15rem;margin-bottom:4px} /* ═══════════════════════════════════════════════════════ Phase 12 réécrite : Onglet Équité (12.1 + 12.2 + 12.4 + 12.5) Vocabulaire commercial : équité, transparence, décision, bilan. ═══════════════════════════════════════════════════════ */ /* Indicateurs d'équité (12.2) */ .eq-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:14px 0 22px} @media(max-width:900px){.eq-kpis{grid-template-columns:repeat(2,1fr)}} .eq-kpi-card{background:var(--s1);border:1px solid var(--border);border-radius:12px;padding:16px 18px} .eq-kpi-lbl{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:6px} .eq-kpi-val{font-size:1.7rem;font-weight:700;color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;line-height:1} .eq-kpi-sub{font-size:.75rem;color:var(--muted);margin-top:6px} .eq-section{background:var(--s1);border:1px solid var(--border);border-radius:12px;padding:20px 22px;margin-bottom:18px} .eq-section-title{font-size:1rem;font-weight:600;color:var(--text);margin-bottom:14px;display:flex;align-items:center;gap:8px} .eq-section-title::before{content:"";display:inline-block;width:3px;height:18px;background:var(--accent);border-radius:2px} .eq-section-sub{font-size:.82rem;color:var(--muted);margin:-8px 0 14px;line-height:1.5} /* Distribution histogramme */ .eq-hist{display:flex;align-items:flex-end;gap:8px;height:140px;padding:0 4px;margin-top:10px} .eq-hist-bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px} .eq-hist-fill{width:100%;border-radius:6px 6px 0 0;transition:height .35s ease;min-height:4px} .eq-hist-lbl{font-size:.7rem;color:var(--muted);text-align:center} .eq-hist-count{font-size:.72rem;color:var(--text);font-weight:600;font-family:'Space Mono',monospace} .eq-hist-stats{display:flex;gap:18px;margin-top:14px;font-size:.78rem;color:var(--muted);padding-top:12px;border-top:1px solid var(--border)} .eq-hist-stats strong{color:var(--text);font-weight:600;font-family:'Space Mono',monospace} /* Table par poste */ .eq-table{width:100%;border-collapse:collapse;margin-top:6px} .eq-table th{text-align:left;font-size:.7rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--border)} .eq-table th.is-center{text-align:center} .eq-table td{padding:10px;font-size:.86rem;color:var(--text);border-bottom:1px solid var(--border)} .eq-table td.is-center{text-align:center} .eq-table tr.is-alert td{background:rgba(220,38,38,.06)} .eq-poste-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:middle} .eq-bar-wrap{display:flex;align-items:center;gap:10px} .eq-bar{flex:1;height:6px;background:var(--overlay-low);border-radius:3px;overflow:hidden} .eq-bar-fill{height:100%;border-radius:3px;transition:width .35s} .eq-pct{font-family:'Space Mono',monospace;font-weight:600;font-size:.82rem;min-width:42px;text-align:right} .eq-pct.is-alert{color:var(--rouge-texte,#DC2626)} /* Cards biais (4 proxies) */ .eq-bias-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} @media(max-width:720px){.eq-bias-grid{grid-template-columns:1fr}} .eq-bias-card{background:var(--s2);border:1px solid var(--border);border-radius:10px;padding:14px 16px;border-left:3px solid var(--c-verdict,var(--muted))} .eq-bias-card.is-ok{--c-verdict:#4AA37B} .eq-bias-card.is-warn{--c-verdict:#D97706} .eq-bias-card.is-alert{--c-verdict:#DC2626} .eq-bias-name{font-size:.84rem;font-weight:600;color:var(--text);margin-bottom:4px} .eq-bias-verdict{font-size:.74rem;color:var(--c-verdict);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px} .eq-bias-detail{font-size:.78rem;color:var(--muted);line-height:1.5} .eq-bias-detail strong{color:var(--text);font-weight:600} /* Empty state onglet */ .eq-empty{text-align:center;padding:60px 20px;color:var(--muted)} .eq-empty-icon{width:48px;height:48px;background-color:var(--muted);margin:0 auto 14px} .eq-empty-title{font-size:1rem;font-weight:600;color:var(--text);margin-bottom:6px} .eq-empty-msg{font-size:.86rem;line-height:1.5;max-width:420px;margin:0 auto} /* Header onglet avec actions */ .eq-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:6px;flex-wrap:wrap} .eq-head-actions{display:flex;gap:10px;flex-shrink:0} .eq-btn{padding:9px 16px;border-radius:8px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:.86rem;cursor:pointer;border:1px solid transparent;background:transparent;color:var(--text);transition:background.15s cubic-bezier(.4,0,.2,1),border-color.15s cubic-bezier(.4,0,.2,1),color.15s cubic-bezier(.4,0,.2,1);display:inline-flex;align-items:center;gap:6px} .eq-btn-primary{background:var(--brand-500);color:#fff;border-color:var(--brand-500)} .eq-btn-primary:hover{background:var(--brand-600);border-color:var(--brand-600)} .eq-btn-secondary{border-color:var(--border);color:var(--text)} .eq-btn-secondary:hover{border-color:var(--text);background:var(--overlay-low)} /* Apprentissage continu (12.5) */ .eq-learn-card{background:var(--s2);border:1px solid var(--border);border-radius:10px;padding:16px 18px;margin-bottom:10px} .eq-learn-card.is-empty{opacity:.65} .eq-learn-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:10px;flex-wrap:wrap} .eq-learn-poste{font-size:.92rem;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px} .eq-learn-decisions{font-size:.74rem;color:var(--muted);font-family:'Space Mono',monospace} .eq-learn-msg{font-size:.82rem;color:var(--muted);line-height:1.55;margin-bottom:10px} .eq-learn-table{width:100%;border-collapse:collapse;margin:8px 0 14px;font-size:.8rem} .eq-learn-table td{padding:6px 10px;color:var(--text)} .eq-learn-table td.eq-learn-dim{color:var(--muted);width:40%} .eq-learn-table td.eq-learn-curr{font-family:'Space Mono',monospace;width:20%;text-align:right} .eq-learn-table td.eq-learn-arrow{width:20%;text-align:center;color:var(--muted)} .eq-learn-table td.eq-learn-new{font-family:'Space Mono',monospace;width:20%;text-align:right;font-weight:600} .eq-learn-table td.eq-learn-new.up{color:#4AA37B} .eq-learn-table td.eq-learn-new.down{color:var(--rouge-texte,#DC2626)} .eq-learn-foot{display:flex;justify-content:flex-end;gap:8px} /* Modal Rapport de décision (12.1) */ .dr-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:9200;display:none;align-items:center;justify-content:center;padding:20px} .dr-backdrop.is-open{display:flex} .dr-card{background:var(--s1);border:1px solid var(--border);border-radius:18px;max-width:780px;width:100%;max-height:92vh;overflow-y:auto;padding:0;box-shadow:0 32px 80px rgba(0,0,0,.45);animation:modalSlideUp .28s cubic-bezier(.4,0,.2,1) both} .dr-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:22px 26px 14px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--s1);z-index:1} .dr-title{font-size:1.25rem;font-weight:700;color:var(--text);margin:0;font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:-.02em} .dr-title em{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:400;color:var(--brand-500)} .dr-subtitle{font-size:.82rem;color:var(--muted);margin-top:4px} .dr-close{background:var(--overlay-low);border:0;color:var(--text);width:36px;height:36px;border-radius:8px;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s} .dr-close:hover{background:var(--overlay-high)} .dr-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .dr-body{padding:18px 26px 22px} .dr-identity{display:flex;align-items:center;gap:14px;margin-bottom:18px} .dr-photo{width:60px;height:60px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:1.2rem;flex-shrink:0;font-family:'Plus Jakarta Sans',sans-serif;text-transform:uppercase} .dr-photo img{width:100%;height:100%;object-fit:cover;display:block} .dr-identity-name{font-size:1.15rem;font-weight:700;color:var(--text);letter-spacing:-.01em} .dr-identity-poste{font-size:.84rem;color:var(--muted);margin-top:2px} .dr-hero{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--border)} .dr-hero-stat{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:0 10px;border-left:1px solid var(--border)} .dr-hero-stat:first-child{border-left:0;padding-left:0} .dr-hero-num{font-family:'Space Mono',monospace;font-size:1.7rem;font-weight:600;line-height:1;color:var(--text)} .dr-hero-label{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:1px} .dr-gauge{--gauge-size:66px;width:var(--gauge-size);height:var(--gauge-size);border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--gauge-color,var(--accent)) calc(var(--gauge-pct,0)*3.6deg), var(--s3) 0)} .dr-gauge-inner{position:absolute;inset:7px;border-radius:50%;background:var(--s1);display:flex;align-items:center;justify-content:center} .dr-gauge-val{font-family:'Space Mono',monospace;font-weight:700;font-size:1.02rem;color:var(--text)} .dr-gauge-sm{--gauge-size:46px} .dr-gauge-sm .dr-gauge-val{font-size:.72rem} .dr-section{padding:22px 0;border-top:1px solid var(--border)} .dr-section:first-of-type{padding-top:0;border-top:0} .dr-section-title{display:flex;align-items:center;gap:12px;font-size:1.08rem;font-weight:700;color:var(--text);letter-spacing:-.01em;margin-bottom:14px} .dr-num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;font-family:'Space Mono',monospace;font-size:.76rem;font-weight:700;flex-shrink:0} .dr-section-body{font-size:.9rem;line-height:1.65;color:var(--text)} .dr-meta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 24px} .dr-meta-row{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--border);font-size:.86rem} .dr-meta-key{color:var(--muted);font-size:.76rem} .dr-meta-val{color:var(--text);font-weight:600} .dr-list{margin:0;padding-left:18px} .dr-list li{margin-bottom:5px} .dr-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:100px;font-size:.76rem;font-weight:700;letter-spacing:.01em;white-space:nowrap} .dr-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0} .dr-badge-green{background:rgba(22,163,74,.15);color:#4AA37B} .dr-badge-amber{background:rgba(217,119,6,.15);color:#D97706} .dr-badge-red{background:rgba(220,38,38,.15);color:var(--rouge-texte,#DC2626)} .dr-badge-neutral{background:var(--overlay-low);color:var(--muted)} .dr-block{border-left:3px solid var(--tone-color,var(--border));background:var(--s2);border-radius:0 10px 10px 0;padding:12px 14px;margin-bottom:10px} .dr-block:last-child{margin-bottom:0} .dr-disc-row{display:grid;grid-template-columns:150px 1fr 90px;align-items:center;gap:12px;padding:7px 0} .dr-disc-row.is-dom .dr-disc-label{color:var(--text);font-weight:700} .dr-disc-label{font-size:.84rem;color:var(--muted)} .dr-disc-track{height:10px;border-radius:6px;background:var(--s3);position:relative} .dr-disc-fill{height:100%;border-radius:6px} .dr-disc-target-mark{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--text);border-radius:1px} .dr-disc-val{font-family:'Space Mono',monospace;font-size:.78rem;color:var(--text);text-align:right} .dr-disc-delta{font-size:.68rem;text-align:right;margin-top:1px;color:var(--muted)} .dr-disc-dominant{margin-top:12px;font-size:.86rem;color:var(--text)} .dr-disc-target-note{font-size:.74rem;color:var(--muted);margin-top:8px;display:flex;align-items:center;gap:6px} .dr-disc-target-note::before{content:'';width:10px;height:2px;background:var(--text);flex-shrink:0} .dr-edit-title-btn{background:none;border:none;color:var(--accent-texte,var(--accent));font-size:.72rem;cursor:pointer;padding:0 0 0 4px;text-decoration:underline;font-family:inherit} .dr-actions{position:sticky;bottom:0;background:var(--s1);padding:14px 26px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;z-index:1} :root /* Modal Bilan trimestriel (12.4) */ .qr-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:9200;display:none;align-items:center;justify-content:center;padding:20px} .qr-backdrop.is-open{display:flex} .qr-card{background:var(--s1);border:1px solid var(--border);border-radius:18px;max-width:880px;width:100%;max-height:92vh;overflow-y:auto;box-shadow:0 32px 80px rgba(0,0,0,.45);animation:modalSlideUp .28s cubic-bezier(.4,0,.2,1) both} .qr-head{position:sticky;top:0;background:var(--s1);z-index:1;padding:22px 26px 14px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap} .qr-title{font-size:1.3rem;font-weight:700;color:var(--text);margin:0;font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:-.02em} .qr-title em{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:400;color:var(--brand-500)} .qr-period-select{padding:7px 12px;border-radius:8px;background:var(--s2);border:1px solid var(--border);color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;font-size:.86rem;cursor:pointer} .qr-body{padding:22px 26px} .qr-block{margin-bottom:26px} .qr-block-title{font-size:.9rem;font-weight:600;color:var(--accent-texte,var(--accent));text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;border-bottom:1px solid var(--border);padding-bottom:8px} .qr-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:10px} @media(max-width:720px){.qr-stat-grid{grid-template-columns:1fr 1fr}} .qr-stat-card{background:var(--s2);border:1px solid var(--border);border-radius:10px;padding:14px} .qr-stat-lbl{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px} .qr-stat-val{font-size:1.4rem;font-weight:700;color:var(--text);font-family:'Plus Jakarta Sans'} .qr-attest{background:var(--s2);border:1px dashed var(--border);border-radius:10px;padding:18px 20px;margin-top:14px;font-size:.85rem;line-height:1.6;color:var(--text)} .qr-sign-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px} .qr-sign-block{font-size:.78rem;color:var(--muted)} .qr-sign-line{border-bottom:1px solid var(--text);height:42px;margin-bottom:6px} .qr-actions{position:sticky;bottom:0;background:var(--s1);padding:14px 26px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;z-index:1} :root /* Bouton "Rapport de décision" dans la fiche candidat */ .cmodal-dr-btn{background:transparent;border:1px solid var(--accent);color:var(--accent-texte,var(--accent));font-family:'Plus Jakarta Sans',sans-serif;font-size:.78rem;font-weight:500;padding:5px 11px;border-radius:6px;cursor:pointer;margin-top:8px;display:inline-flex;align-items:center;gap:6px} .cmodal-dr-btn:hover{background:var(--brand-bg)} @media print{ body * {visibility:hidden} .qr-backdrop, .qr-backdrop * {visibility:visible} .qr-backdrop {position:absolute;inset:0;padding:0;background:#fff!important} .qr-card {max-width:100%;max-height:none;box-shadow:none;border:0} .qr-actions, .qr-period-select, .qr-close {display:none!important} } /* ═══════════════════════════════════════════════════════════════════ Phase 5A.19 : File inputs modernisés + bouton "+ Ajouter ce candidat" File input natif "Choisir un fichier | Aucun fichier..." remplacé par un design propre avec bouton brand intégré (style 2024+). ═══════════════════════════════════════════════════════════════════ */ .add-inp[type="file"]{ padding:0!important; background:var(--s2); border:1px solid var(--border); border-radius:8px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.84rem; color:var(--muted); cursor:pointer; transition:border-color .15s, box-shadow .15s; overflow:hidden; display:flex; align-items:center; min-height:42px; } .add-inp[type="file"]:hover{ border-color:var(--accent); } .add-inp[type="file"]:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,0,0,.18); } .add-inp[type="file"]::file-selector-button{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:.82rem; padding:10px 18px; margin-right:14px; background:var(--accent); color:#fff; border:0; border-radius:0; cursor:pointer; transition:background .15s, transform .1s; letter-spacing:.01em; } .add-inp[type="file"]::file-selector-button:hover{ background:#C81920; } .add-inp[type="file"]::file-selector-button:active{ transform:scale(.97); } /* Anti-régression: la règle WebKit historique pour Safari/iOS */ .add-inp[type="file"]::-webkit-file-upload-button{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:.82rem; padding:10px 18px; margin-right:14px; background:var(--accent); color:#fff; border:0; border-radius:0; cursor:pointer; } /* Bouton "+ Ajouter ce candidat" : version moderne (lift + shadow brand) */ .btn-add{ padding:13px 22px; background:var(--accent); border:0; border-radius:10px; color:#fff; font-family:'Plus Jakarta Sans',sans-serif; font-size:.92rem; font-weight:600; letter-spacing:.01em; cursor:pointer; white-space:nowrap; transition:background .15s, transform .12s, box-shadow .15s; box-shadow:0 1px 2px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12); } .btn-add:hover{ background:#C81920; transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.30), 0 2px 4px rgba(0,0,0,.16); } .btn-add:active{ transform:translateY(0); box-shadow:0 1px 2px rgba(0,0,0,.20); } .btn-add:disabled{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:0 1px 2px rgba(0,0,0,.10); } /* ═══════════════════════════════════════════════════════════════════ Phase 5A.18 : Polish mobile du dashboard admin Anti-zoom iOS + boutons tactiles + nav scrollable + tables scrollables ═══════════════════════════════════════════════════════════════════ */ @media (max-width:700px){ /* Anti-zoom iOS : ≥16px sur tout champ focusable */ .inp, textarea, .filter-bar input, .filter-bar select, .filters input, .filters select, .col-row select, .mmodal-input, .custom-select-trigger, .custom-select-options li, .schedule-field input, .schedule-field select, .schedule-field textarea, input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="url"], input[type="date"], input[type="time"], select { font-size: 16px !important; } /* Boutons : zones tactiles décentes */ .btn-sm { padding:10px 14px; font-size:.85rem; min-height:40px; } .btn-icon { padding:8px 10px; font-size:1.05rem; min-height:36px; min-width:36px; } .btn-add { padding:11px 16px; min-height:42px; } /* Nav : scroll horizontal propre (8+ onglets ne tiennent pas en mobile) */ .nav { padding:0 12px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .nav::-webkit-scrollbar { display:none; } .nav-tab { padding:14px 12px; font-size:.85rem; flex-shrink:0; } .logo { margin-right:12px; padding:14px 0; } .logo-text { font-size:1rem; } .tenant-badge { font-size:.72rem; padding:4px 8px; } /* Tables larges (vivier, etc.) : scroll horizontal sécurisé */ .pool-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; } /* Filtres : labels + champs en colonne */ .filter-bar { gap:8px; } .filter-bar input, .filter-bar select { flex:1 1 100%; min-width:0; } /* Modals (mmodal) : padding réduit pour gagner de la place */ .mmodal-card { padding:18px 16px; max-width:calc(100vw - 24px); margin:12px auto; } /* ─── Carte candidat (mode Liste) : layout vertical pour éviter le chevauchement ─── */ .card-top { grid-template-columns: 1fr !important; } .card-score { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; padding: 14px 16px; border-right: 0; border-bottom: 1px solid var(--border); } .compat-pill { width: auto; min-width: 110px; flex-shrink: 0; } .card-radar { border-left: 0; border-top: 1px solid var(--border); padding: 14px; } .card-main { padding: 14px 16px; } /* ─── "Ajouter un candidat manuellement" : 1 colonne, pas de débordement ─── */ .manual-form-grid { grid-template-columns: 1fr !important; padding: 14px !important; } .manual-files-grid { grid-template-columns: 1fr !important; } /* Inputs file : on évite que le texte natif "Aucun fichier sélectionné" déborde */ .add-inp[type="file"] { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; overflow: hidden; } } /* ═══════════ Board d'idées ═══════════ */ .ideas-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px} .ideas-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .ideas-sort{background:var(--s1);border:1px solid var(--border);color:var(--muted);padding:8px 14px;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;font-family:inherit;transition:.2s} .ideas-sort.on{background:var(--accent);color:#fff;border-color:var(--accent)} .ideas-sort:hover:not(.on){border-color:var(--muted);color:var(--text)} /* Dropdown custom filtre statut */ .idea-dd{position:relative;display:inline-block} .idea-dd-btn{display:inline-flex;align-items:center;gap:10px;background:var(--s1);border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:8px;font-size:.85rem;font-family:inherit;cursor:pointer;min-width:160px;justify-content:space-between;transition:border-color .2s} .idea-dd-btn:hover{border-color:var(--muted)} .idea-dd.open .idea-dd-btn{border-color:var(--accent)} .idea-dd-caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--muted);transition:transform .2s} .idea-dd.open .idea-dd-caret{transform:rotate(180deg)} .idea-dd-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:100%;background:var(--s1);border:1px solid var(--border);border-radius:10px;padding:5px;z-index:1500;box-shadow:0 12px 32px -8px rgba(0,0,0,.6);display:none;animation:ddIn .15s ease} .idea-dd.open .idea-dd-menu{display:block} @keyframes ddIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} .idea-dd-opt{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:7px;font-size:.85rem;color:var(--text);cursor:pointer;white-space:nowrap;transition:background .12s} .idea-dd-opt:hover{background:var(--s2)} .idea-dd-opt.selected{background:rgba(224,32,40,.1);color:var(--accent-texte,var(--accent));font-weight:600} .dd-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:currentColor} .dd-dot.st-soumise{background:#8189A8} .dd-dot.st-a_etude{background:#5B8AD9} .dd-dot.st-planifiee{background:#9082B8} .dd-dot.st-en_cours{background:#C79A4E} .dd-dot.st-livree{background:#4AA37B} .dd-dot.st-declinee{background:#EF4444} .btn-new-idea{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;border:none;padding:10px 18px;border-radius:9px;font-size:.88rem;font-weight:600;cursor:pointer;font-family:inherit;transition:.2s} .btn-new-idea:hover{filter:brightness(1.08);transform:translateY(-1px)} .idea-card{display:flex;gap:16px;background:var(--s1);border:1px solid var(--border);border-radius:14px;padding:18px 20px;margin-bottom:12px;transition:border-color .2s} .idea-card:hover{border-color:var(--s3)} .idea-vote{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:56px;border:1px solid var(--border);border-radius:10px;padding:8px 0;cursor:pointer;background:var(--s2);transition:.2s;user-select:none} .idea-vote:hover{border-color:var(--accent)} .idea-vote.voted{background:rgba(224,32,40,.1);border-color:var(--accent)} .idea-vote .arrow{font-size:1.1rem;line-height:1;color:var(--muted)} .idea-vote.voted .arrow{color:var(--accent-texte,var(--accent))} .idea-vote .count{font-size:1.15rem;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums} .idea-vote .lbl{font-size:.62rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)} .idea-body{flex:1;min-width:0} .idea-card-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px} .idea-title{font-size:1.02rem;font-weight:600;color:var(--text)} .idea-desc{font-size:.9rem;color:var(--muted);line-height:1.55;margin:6px 0 10px} .idea-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.78rem;color:var(--muted)} .idea-cat{background:var(--s2);border:1px solid var(--border);padding:2px 10px;border-radius:20px;font-size:.72rem;text-transform:capitalize} .idea-status{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border-radius:20px;font-size:.74rem;font-weight:600} .idea-status .sdot{width:6px;height:6px;border-radius:50%;background:currentColor} .st-soumise{color:#8189A8;background:rgba(129,137,168,.14)} .st-a_etude{color:#5B8AD9;background:rgba(14,165,233,.14)} .st-planifiee{color:#9082B8;background:rgba(168,85,247,.14)} .st-en_cours{color:#C79A4E;background:rgba(245,158,11,.14)} .st-livree{color:#4AA37B;background:rgba(22,163,74,.14)} .st-declinee{color:#EF4444;background:rgba(239,68,68,.14)} .idea-adminnote{margin-top:10px;background:rgba(224,32,40,.06);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:8px 12px;font-size:.82rem;color:var(--text)} .idea-adminnote b{color:var(--accent-texte,var(--accent));font-size:.72rem;text-transform:uppercase;letter-spacing:.05em} .idea-admin-ctrl{display:flex;gap:8px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px dashed var(--border)} .idea-admin-ctrl select{background:var(--s2);border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:7px;font-size:.8rem;font-family:inherit;cursor:pointer} .idea-empty{text-align:center;padding:50px 20px;color:var(--muted)} .idea-empty .ic{font-size:2.4rem;opacity:.4;margin-bottom:12px} .idea-delete{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.78rem;padding:4px 8px;border-radius:6px;transition:.2s} .idea-delete:hover{color:var(--rouge-texte,var(--red));background:rgba(239,68,68,.08)} /* Modal idée */ .idea-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:5000;align-items:center;justify-content:center;padding:20px} .idea-modal-overlay.on{display:flex} .idea-modal{background:var(--s1);border:1px solid var(--border);border-radius:20px;padding:26px 28px;width:min(520px,100%);max-height:90vh;overflow-y:auto;box-shadow:0 32px 80px rgba(0,0,0,.40);animation:modalSlideUp .26s cubic-bezier(.4,0,.2,1) both} .idea-modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px} .idea-modal-head h3{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;color:var(--text)} .idea-modal-close{background:none;border:none;color:var(--muted);font-size:1.8rem;line-height:1;cursor:pointer;padding:0 4px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:color .15s} .idea-modal-close:hover{color:var(--text)} .idea-modal-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .idea-field-label{display:block;font-size:.82rem;font-weight:600;color:var(--text);margin:14px 0 6px} #idea-title,#idea-desc,#idea-category{width:100%;background:var(--s2);border:1px solid var(--border);color:var(--text);padding:11px 13px;border-radius:9px;font-size:.92rem;font-family:inherit;box-sizing:border-box} #idea-desc{resize:vertical} #idea-title:focus,#idea-desc:focus,#idea-category:focus{outline:none;border-color:var(--accent)} .idea-modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:24px} .idea-btn-cancel{background:var(--s2);border:1px solid var(--border);color:var(--text);padding:10px 18px;border-radius:9px;font-size:.88rem;font-weight:600;cursor:pointer;font-family:inherit} .idea-btn-submit{background:var(--accent);border:none;color:#fff;padding:10px 20px;border-radius:9px;font-size:.88rem;font-weight:600;cursor:pointer;font-family:inherit} .idea-btn-submit:disabled{opacity:.5;cursor:not-allowed} /* ════════════ Harmonisation : rail vertical d'icônes (identique à admin config) ════════════ */ @media(min-width:901px){ #screen-admin, #screen-client{ padding-left:var(--rail); } #screen-admin > nav.nav, #screen-client > nav.nav{ position:fixed; left:0; top:0; bottom:0; width:var(--rail); flex-direction:column; align-items:stretch; gap:2px; padding:16px 10px 14px; overflow-y:auto; overflow-x:hidden; border-bottom:none; border-right:1px solid var(--border); background:var(--bg); z-index:100; } /* logo : pastille rouge + chevron blanc en haut */ #screen-admin > nav.nav .logo, #screen-client > nav.nav .logo{ margin:0 0 16px 2px; padding:0; width:38px; height:38px; border-radius:var(--radius-sm); justify-content:center; background:var(--brand-500); box-shadow:none; flex-shrink:0; } #screen-admin > nav.nav .logo .logo-text, #screen-client > nav.nav .logo .logo-text{ display:none; } #screen-admin > nav.nav .logo .logo-icon, #screen-client > nav.nav .logo .logo-icon{ width:22px; height:22px; filter:brightness(0) invert(1); } /* onglets : icône seule (texte masqué) */ #screen-admin > nav.nav .nav-tab, #screen-client > nav.nav .nav-tab{ width:auto; min-height:36px; padding:8px 10px 8px 15px; border-bottom:none!important; border-radius:8px; display:flex; align-items:center; justify-content:flex-start; gap:11px; font-family:'Space Mono', ui-monospace, monospace; font-size:12.5px; letter-spacing:.01em; font-weight:400; line-height:1.35; text-align:left; color:var(--soft); border:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-shrink:0; } #screen-admin > nav.nav .nav-tab::after, #screen-client > nav.nav .nav-tab::after{ display:none !important; } /* Le losange de la reference marque l onglet actif, en bord gauche. */ #screen-admin >nav.nav .nav-tab.on::after, #screen-client >nav.nav .nav-tab.on::after{ display:block!important; content:''; position:absolute; left:2px; top:50%; width:7px; height:7px; margin-top:-4px; bottom:auto; transform:rotate(45deg); background:var(--brand-500); border-radius:0; transition:none; } #screen-admin > nav.nav .nav-tab .icon-2d, #screen-client > nav.nav .nav-tab .icon-2d{ display:none; } #screen-admin > nav.nav .nav-tab::before, #screen-client > nav.nav .nav-tab::before{ content:''; width:18px; height:18px; flex:0 0 18px; background:currentColor; display:block; -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center; } #screen-admin >nav.nav .nav-tab:hover, #screen-client >nav.nav .nav-tab:hover{ background:rgba(255,255,255,.06); color:var(--text); } #screen-admin > nav.nav .nav-tab.on, #screen-client > nav.nav .nav-tab.on{ background:rgba(255,255,255,.10); color:var(--text); border:0; border-bottom:none!important; box-shadow:none; } /* séparateurs de sections dans le rail */ #screen-admin > nav.nav .nav-sep, #screen-client > nav.nav .nav-sep{ display:block; width:auto; height:1px; background:var(--border); opacity:1; margin:9px 6px; flex-shrink:0; } /* icône par onglet (mask Fluent) */ .nav-tab[onclick*="candidats"]::before{-webkit-mask-image:var(--ic-99de9b5920);mask-image:var(--ic-99de9b5920)} .nav-tab[onclick*="profils"]::before{-webkit-mask-image:var(--ic-4e39c3b8e9);mask-image:var(--ic-4e39c3b8e9)} .nav-tab[onclick*="bareme"]::before{-webkit-mask-image:var(--ic-f0d3b9e492);mask-image:var(--ic-f0d3b9e492)} .nav-tab[onclick*="import"]::before{-webkit-mask-image:var(--ic-d79a8b5cbf);mask-image:var(--ic-d79a8b5cbf)} .nav-tab[onclick*="stats"]::before{-webkit-mask-image:var(--ic-733ac7ce06);mask-image:var(--ic-733ac7ce06)} .nav-tab[onclick*="pool"]::before{-webkit-mask-image:var(--ic-26479c68c2);mask-image:var(--ic-26479c68c2)} .nav-tab[onclick*="equipe"]::before{-webkit-mask-image:var(--ic-c09d9bc8d3);mask-image:var(--ic-c09d9bc8d3)} .nav-tab[onclick*="evaluations"]::before{-webkit-mask-image:var(--ic-f282edc04d);mask-image:var(--ic-f282edc04d)} .nav-tab[onclick*="onboarding"]::before{-webkit-mask-image:var(--ic-e8f7223c7d);mask-image:var(--ic-e8f7223c7d)} .nav-tab[onclick*="equite"]::before{-webkit-mask-image:var(--ic-5ebf791c32);mask-image:var(--ic-5ebf791c32)} .nav-tab[onclick*="idees"]::before{-webkit-mask-image:var(--ic-24c2322037);mask-image:var(--ic-24c2322037)} /* Onglet Chatbot : seul de la liste sans règle dédiée ici -> carré vide (::before sans masque). Ce rail replié masque .icon-2d et ignore le markup Meri injecté en JS (pas de mask-image possible pour du SVG multi-couleur injecté) : repli sur l'icône Bot, déjà utilisée ailleurs pour ce même chatbot (section Analyse IA, bouton "Analyser tous"). */ .nav-tab[onclick*="chatbot"]::before{-webkit-mask-image:var(--ic-b73f51e3c6);mask-image:var(--ic-b73f51e3c6)} .nav-tab[onclick*="offres"]::before{-webkit-mask-image:var(--ic-b10dd270e1);mask-image:var(--ic-b10dd270e1)} .nav-tab[onclick*="'top'"]::before{-webkit-mask-image:var(--ic-ae557d49ba);mask-image:var(--ic-ae557d49ba)} .nav-tab[onclick*="mescandidats"]::before{-webkit-mask-image:var(--ic-b4b2d94aa0);mask-image:var(--ic-b4b2d94aa0)} /* utilitaires en bas : icônes compactes */ #screen-admin > nav.nav .nav-right, #screen-client > nav.nav .nav-right{ margin-left:0; margin-top:auto; flex-direction:column; align-items:center; gap:7px; padding-top:12px; border-top:1px solid var(--border); width:46px; } .nav .nav-right .btn-sm, .nav .nav-right .tour-replay, .nav .nav-right .usage-badge, .nav .nav-right .theme-toggle{ width:40px !important; height:40px !important; padding:0 !important; justify-content:center; gap:0; border-radius:11px; font-size:0 !important; overflow:hidden; } .nav .nav-right .icon-2d{ width:20px !important; height:20px !important; display:inline-block !important; } .nav .nav-right .usage-badge-current, .nav .nav-right .usage-badge-divider, .nav .nav-right .usage-badge-max, .nav .nav-right .usage-badge-mini-bar, .nav .nav-right .bias-dot{ display:none !important; } .nav .nav-right .user-menu{ width:40px; } .nav .nav-right .user-menu-btn{ width:40px; height:40px; padding:0 !important; justify-content:center; } .nav .nav-right .user-menu-caret{ display:none !important; } .nav .nav-right .user-menu-dropdown{ top:auto; bottom:0; left:calc(100% + 10px); right:auto; } } @media(min-width:901px) and (max-height:780px){ #screen-admin > nav.nav, #screen-client > nav.nav{ overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; } #screen-admin > nav.nav::-webkit-scrollbar, #screen-client > nav.nav::-webkit-scrollbar{ width:5px; height:0; } #screen-admin > nav.nav::-webkit-scrollbar:horizontal, #screen-client > nav.nav::-webkit-scrollbar:horizontal{ display:none; height:0; } } /* Rail toujours SOMBRE (premium) + couleurs d'icônes fixes (lisibles quel que soit le thème). Le !important neutralise l'ancien fond translucide clair (rgba(255,255,255,.72)) du top-nav. */ @media(min-width:901px){ #screen-admin > nav.nav, #screen-client > nav.nav{ background:linear-gradient(180deg,#14161e,#0a0b10) !important; border-right:1px solid rgba(255,255,255,.07) !important; } #screen-admin > nav.nav .nav-tab, #screen-client > nav.nav .nav-tab{ color:#8b93ad; } #screen-admin > nav.nav .nav-tab:hover, #screen-client > nav.nav .nav-tab:hover{ color:#e6e9f2; background:rgba(255,255,255,.06); } #screen-admin >nav.nav .nav-tab.on, #screen-client >nav.nav .nav-tab.on{ color:var(--text); background:rgba(255,255,255,.10); border:0; } /* utilitaires : icônes claires sur fond sombre */ .nav .nav-right .btn-sm, .nav .nav-right .usage-badge, .nav .nav-right .theme-toggle{ color:#aeb6cc !important; background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.12) !important; } .nav .nav-right .user-menu-btn{ color:#e6e9f2 !important; background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.14) !important; } /* Tuto : bien visible (accent rouge) */ .nav .nav-right .tour-replay{ color:var(--accent-texte,var(--accent)) !important; background:rgba(224,32,40,.16) !important; border:1px solid rgba(224,32,40,.45) !important; box-shadow:0 0 18px -6px rgba(0,0,0,.6); } .nav .nav-right .tour-replay .icon-2d{ width:21px !important; height:21px !important; } } /* ════════════ Bulles d'aide « ? » cliquables et modernes ════════════ */ .hlp{cursor:pointer} .hlp:hover{opacity:1} .hlp.help-open{opacity:1;background:var(--accent);color:#fff !important;border-color:var(--accent)} #help-pop{position:fixed;z-index:5000;max-width:300px;width:max-content; background:linear-gradient(150deg,rgba(30,34,47,.99),rgba(15,18,26,.99)); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border:1px solid rgba(224,32,40,.4);border-radius:14px;padding:13px 15px; font:400.82rem/1.55 'Plus Jakarta Sans',sans-serif;color:#cdd3e4; box-shadow:0 24px 60px -20px rgba(0,0,0,.92),0 0 40px -22px rgba(0,0,0,.5); display:none;opacity:0;transform:translateY(4px);transition:opacity .16s,transform .16s} #help-pop.on{display:block;opacity:1;transform:translateY(0)} #help-pop.help-pop-h{display:flex;align-items:center;gap:7px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-texte,var(--accent));margin-bottom:7px} #help-pop .help-pop-h .icon-2d{width:13px;height:13px} /* ════════ Cockpit candidat : toujours « noir premium » (lisible en clair comme en sombre) ════════ Les panneaux du cockpit sont volontairement sombres ; en thème clair ils devenaient gris-sur-gris (translucides sur fond clair + texte sombre). On verrouille le sous-arbre sur les tokens sombres + fonds opaques → cartes noir premium, lisibles dans les deux thèmes. */ .ck-id, .ck-card, .ck-rankrow{ --text:#E6E9F2; --muted:#8189A8; --s1:#181C26; --s2:#20242F; --s3:#2A2F3D; --border:#353B4D; --bg:#0B0D14; color:#E6E9F2; } .ck-id, .ck-card{ background:linear-gradient(150deg,#1b2030,#0e121b) !important; border-color:rgba(255,255,255,.09) !important; } .ck-rankrow{ background:#161a24 !important; border-color:rgba(255,255,255,.08) !important; } .ck-rankrow.on{ background:linear-gradient(120deg,#34181f,#161019) !important; border-color:rgba(224,32,40,.5) !important; } .ck-tile{ background:rgba(255,255,255,.035) !important; border-color:rgba(255,255,255,.07) !important; } .ck-card svg{ color:#E6E9F2 !important; } /* ════════ Rail : infobulles stylées (texte complet, lisibles - fini le tooltip natif tronqué) ════════ */ @media(min-width:901px){ #screen-admin > nav.nav .nav-tab, #screen-client > nav.nav .nav-tab, #screen-admin > nav.nav .nav-right > *, #screen-client > nav.nav .nav-right > *{ position:relative; overflow:visible !important; } #screen-admin > nav.nav [data-tip]::after, #screen-client > nav.nav [data-tip]::after{ content:attr(data-tip)!important; position:absolute!important; left:calc(100% + 12px)!important; top:50%!important; bottom:auto!important; transform:translateY(-50%)!important; display:block!important; width:auto!important; height:auto!important; background:linear-gradient(150deg,#1f2330,#12151e)!important; color:#e6e9f2!important; border:1px solid rgba(224,32,40,.35)!important; padding:8px 12px!important; border-radius:10px!important; font:500.78rem/1.3 'Plus Jakarta Sans',sans-serif!important; white-space:nowrap!important; box-shadow:0 18px 44px -18px rgba(0,0,0,.9)!important; opacity:0; pointer-events:none; transition:opacity .14s; z-index:6000; } #screen-admin > nav.nav [data-tip]:hover::after, #screen-client > nav.nav [data-tip]:hover::after{ opacity:1; } } /* ═══════════════════════════════════════════════════════════════════ DESIGN CRAFT PASS - Meritly (app.html) Typographie · Composants · Motion · A11y · Anti-clichés ═══════════════════════════════════════════════════════════════════ */ /* ─── 1. Typographie : contraste renforcé (titres/chiffres 800, labels légers) ─── */ /* Grands chiffres focaux : poids 800 pour les KPI montants */ .pool-stat-val, .eq-kpi-val, .usage-card-current, .ud-progress-count, .aifit-verdict{font-weight:800;letter-spacing:-.03em} /* Titres de sections : 700 bien défini partout */ .cmodal-section-title, .rh-block-title, .stats-poste-title{font-weight:700} /* Labels : muted + légers (400 max) pour respirer face aux valeurs */ .stat-lbl, .pool-stat-lbl, .eq-kpi-lbl, .usage-kpi-lbl, .pool-legend-item, .nm-score-lbl, .ck-rank-head, .aifit-h{font-weight:500;letter-spacing:.06em} /* ─── 2. Cohérence des rayons : panneaux/cartes 14-16px, modales 16-20px ─── */ /* Cards contenu standard → 14px (cohérence avec stat-card/kanban-card) */ .offre-card, .client-cand-card, .avis-card, .eq-kpi-card, .usage-kpi, .ud-progress-block, .ud-breakdown, .eq-section{border-radius:14px} /* Panneaux intermédiaires → 12px */ .nm-action-card, .bareme-card, .ai-card, .ai-q-item, .cv-block, .pool-filters{border-radius:12px} /* ─── 3. Ombres douces : renforcer la profondeur en sombre ─── */ /* En mode sombre, les tokens --shadow-md/lg sont déjà forts ; on les affine */ :root[data-theme="dark"]{ --shadow-md: 0 8px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3); --shadow-lg: 0 16px 40px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.3); } /* ─── 4. Hover discret sur les éléments cliquables - translateY(-2px) standard ─── */ /* Les cartes qui n'ont pas encore de hover lift */ .offre-card{transition:transform .22s cubic-bezier(.4,0,.2,1),box-shadow .22s cubic-bezier(.4,0,.2,1),border-color .22s;cursor:default} .offre-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--muted)} .avis-card{transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s} .avis-card:hover:not(.is-pending){transform:translateY(-1px);box-shadow:var(--shadow)} .eq-kpi-card{transition:transform .22s cubic-bezier(.4,0,.2,1),box-shadow .22s} .eq-kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)} /* ─── 5. Inputs & selects : focus plus précis (déjà géré) ; transitions cohérentes ─── */ .inp:focus, .add-inp:focus, .mmodal-input:focus, .cmodal-notes:focus, .pool-filter-input:focus, .filter-bar input:focus, .filter-bar select:focus{ box-shadow:0 0 0 3px rgba(0,0,0,.12); } .inp,.add-inp,.mmodal-input,.cmodal-notes,.pool-filter-input, .filter-bar input,.filter-bar select{ transition:border-color .18s cubic-bezier(.4,0,.2,1),box-shadow .18s cubic-bezier(.4,0,.2,1); } /* ─── 6. Badge/pill : homogénéiser le radius à 999px (pilules) ─── */ .lvl-badge,.chip,.tag,.badge-view{border-radius:6px} .badge-admin,.badge-client,.equipe-card-role,.avis-card-role, .assign-collab-role,.equipe-section-title .equipe-count, .ck-cat-head .ck-cat-cnt,.kanban-col-count{border-radius:999px} /* ─── 7. Supprimer un anti-cliché: la compat-pill en cyan #4FA396 sur fond sombre peut lire comme "couleur d'accent secondaire" - OK pour la marque car c'est voulu (scoreAiFit score IA vs score Humain), pas un défaut générique ─── */ /* ─── 8. prefers-reduced-motion : toutes les animations non fonctionnelles ─── */ @media (prefers-reduced-motion:reduce){ .panel.on,.panel.on .sh,.panel.on .stats-row,.panel.on .filters, .panel.on #admin-kanban-board,.panel.on .kanban-board, .panel.on .pool-table-wrap,.panel.on .config-grid{animation:none} .panel.on .stats-row > *,.panel.on .kanban-card{animation:none} .stat-card,.stat-card:hover{transition:none;transform:none} body::before,body::after{animation:none} .score-ring::before{animation:none} .bias-dot{animation:none} .kanban-col-count.pulse-active{animation:none} .btn-primary::before{animation:none} .aifit-agent-link{transition:none} .card{animation:none} /* Modales : couper toutes les entrées animées */ .cmodal.open .cmodal-content, .schedule-modal,.cf-card,.usage-modal, .dr-card,.qr-card,.idea-modal,.modal-card{animation:none} } /* ─── 9. Consistance de l'easing custom-select-chevron ─── */ .custom-select-chevron{transition:transform .18s cubic-bezier(.4,0,.2,1)} /* ─── 10. Inputs/select tour: outline supprimé quand border-color suffit ─── */ .schedule-field input:focus,.schedule-field select:focus,.schedule-field textarea:focus{ box-shadow:0 0 0 3px rgba(0,0,0,.12); } /* ─── 11. .nav glass : correction du background pour mode SOMBRE (rgb fallback) ─── */ :root[data-theme="dark"] .nav{ background:rgba(24,28,38,.88) !important; border-bottom-color:#353B4D !important; } /* ─── 12. .sh::before : masquer la barre verticale en clair (lisibilité sur fond clair) ─── */ :root /* ─── 13. Harmonisation radius des modales : 18-20px ─── */ .cmodal-content{border-radius:20px} .cf-card{border-radius:18px} .schedule-modal{border-radius:18px} .usage-modal{border-radius:18px} .modal-card{border-radius:18px} .dr-card{border-radius:18px} .qr-card{border-radius:18px} .idea-modal{border-radius:20px} /* ─── Responsive modales : quasi plein écran sur petit mobile ─── */ @media (max-width:480px){ .cmodal{padding:12px} .cmodal-content{max-width:100%;border-radius:16px} .schedule-modal,.modal-card,.cf-card,.usage-modal{max-width:100%;border-radius:14px} .dr-card,.qr-card,.idea-modal{max-width:100%;border-radius:14px} } /* ─── 14. Bouton primary : letter-spacing minimal, shadow précise, pas de gradient animé en permanence ─── */ .btn-primary{letter-spacing:.01em;font-weight:700} /* ─── 15. Scrollbar : plus fine et discrète ─── */ ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-thumb{border-radius:4px;border:2px solid var(--bg)} /* Correction des informations du candidat : un formulaire sobre, pas un modal. */ .edit-info{margin-top:10px;border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;background:var(--s1)} .edit-info-lbl{font-family:'Space Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.06em;color:var(--muted);margin:0 0 14px} .edit-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px 16px} .edit-info-champ{display:flex;flex-direction:column;gap:5px} .edit-info-champ span{font-size:12.5px;color:var(--muted)} .edit-info-champ input{padding:9px 11px;border:1px solid var(--border);border-radius:10px;background:var(--s2);color:var(--text);font-family:inherit;font-size:.88rem} .edit-info-champ input:focus{outline:none;border-color:var(--text);box-shadow:0 0 0 3px rgba(229,32,42,.14)} .edit-info-note{font-size:12.5px;color:var(--muted);line-height:1.5;margin:14px 0 0;max-width:56ch} .edit-info-actions{display:flex;gap:9px;margin-top:14px} /* ═══ LE REGISTRE, troisieme vue de l'ecran Candidats ═══ Deux colonnes : le dossier sous decision a gauche, le journal des actes a droite. Aucune carte imbriquee : la hierarchie tient au filet et au blanc. Toutes les couleurs passent par les jetons du theme, la vue suit donc le mode clair comme le mode sombre. */ .reg-plateau{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0; border:1px solid var(--border);border-radius:var(--radius-lg,16px);overflow:hidden;background:var(--s1)} @media(max-width:1100px){.reg-plateau{grid-template-columns:1fr}} .reg-travail{padding:26px 28px 30px;display:flex;flex-direction:column;min-height:520px} .reg-mono{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .reg-entete{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px} .reg-compte{font-family:var(--font-mono);font-size:.72rem;color:var(--text);opacity:.75} .reg-jauge{display:inline-flex;gap:7px;align-items:center} /* Une journee finie, pas une liste sans fin : on voit ce qui reste. */ .reg-perle{width:8px;height:8px;transform:rotate(45deg);border:1px solid var(--border);border-radius:1px; transition:background .2s cubic-bezier(.22,.61,.36,1),border-color .2s cubic-bezier(.22,.61,.36,1)} .reg-perle.faite{background:var(--muted);border-color:var(--muted)} .reg-perle.active{background:var(--accent);border-color:var(--accent)} .reg-dossier{flex:1;display:flex;flex-direction:column;justify-content:center} .reg-tete{display:flex;align-items:center;gap:16px;padding-bottom:20px;border-bottom:1px solid var(--border)} .reg-portrait{width:52px;height:52px;flex-shrink:0;border-radius:50%;display:grid;place-items:center; background:var(--overlay-low,rgba(255,255,255,.05));color:var(--muted); font:600 .85rem var(--font-sans);letter-spacing:.04em;transition:background .3s cubic-bezier(.22,.61,.36,1),color .3s cubic-bezier(.22,.61,.36,1)} .reg-dossier.revele .reg-portrait{background:var(--accent);color:#fff} .reg-identite{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px} .reg-nom{font:600 1.3rem/1.2 var(--font-sans);letter-spacing:-.02em;color:var(--text);display:inline-block} /* L'encre couvre un bloc a la largeur du nom. Le nom lui-meme n'est pas dans la page tant qu'il n'est pas revele, il n'y a donc rien a y lire. */ /* Un caviardage se lit noir, sur fond clair comme sur fond sombre. En clair sur fond sombre, la barre passait pour un champ de saisie vide. */ .reg-nom.couvert{height:1.35em;background:#0A0A0C;border-radius:2px; box-shadow:0 0 0 1px var(--border) inset} .reg-poste{font-size:.86rem;color:var(--muted)} .reg-ref{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right;flex-shrink:0} .reg-etat{color:var(--muted)} .reg-dossier.revele .reg-etat{color:var(--accent-texte,var(--accent))} .reg-axes{padding:22px 0 18px;display:flex;flex-direction:column;gap:13px} .reg-axe{display:grid;grid-template-columns:118px minmax(0,1fr) 54px;align-items:center;gap:16px} .reg-piste{position:relative;height:3px;background:var(--overlay-low,rgba(255,255,255,.07));border-radius:2px} .reg-barre{position:absolute;left:0;top:0;height:100%;background:var(--text);opacity:.62;border-radius:2px} /* Le niveau attendu du poste : la note ne se lit pas seule, elle se lit contre ce trait. C'est CONFIG.ideals, pas une reference decorative. */ /* Centre sur sa position : a 0 comme a 20 sur 20, le repere reste entier au lieu d etre coupe par le bord de la piste. */ .reg-attendu{position:absolute;top:-4px;width:1px;height:11px;background:var(--text);opacity:.95;transform:translateX(-.5px)} .reg-piste{overflow:visible} .reg-note-axe{font:600 .82rem var(--font-mono);color:var(--text);text-align:right} .reg-lecture{max-width:56ch;font-size:.9rem;line-height:1.6;color:var(--text);opacity:.82;margin:4px 0 0} .reg-legende{margin:12px 0 0;opacity:.6} .reg-actes{display:flex;align-items:center;gap:10px;flex-wrap:wrap; margin-top:26px;padding-top:20px;border-top:1px solid var(--border)} .reg-btn kbd{display:inline-grid;place-items:center;min-width:17px;height:17px;margin-left:7px;padding:0 4px; border:1px solid currentColor;border-radius:3px;opacity:.5; font:500 .62rem/1 var(--font-mono);vertical-align:middle} .reg-reveler{margin-left:auto} .reg-btn[disabled]{opacity:.4;pointer-events:none} /* Les boutons de cet ecran s'etirent sur toute la largeur : ici les trois actes doivent tenir sur une ligne, l'un a cote de l'autre. */ .reg-actes .reg-btn{width:auto;flex:0 0 auto;min-width:0;margin:0} .reg-actes .reg-reveler{margin-left:auto} .reg-vide,.reg-fin{flex:1;display:flex;flex-direction:column;justify-content:center;gap:12px;max-width:56ch} .reg-fin h3{font:500 1.6rem/1.25 var(--font-sans);letter-spacing:-.02em;color:var(--text);margin:6px 0 0} .reg-fin h3 em{font-style:normal;color:var(--accent-texte,var(--accent))} .reg-fin p,.reg-vide p{font-size:.9rem;line-height:1.6;color:var(--muted);margin:0} .reg-fin button{align-self:flex-start;margin-top:10px} .reg-note{opacity:.75} .reg-journal{border-left:1px solid var(--border);padding:26px 22px;background:var(--bg);min-width:0} @media(max-width:1100px){.reg-journal{border-left:0;border-top:1px solid var(--border)}} .reg-journal ul{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column} .reg-entree{padding:13px 0;border-bottom:1px solid var(--border);animation:reg-pose .3s cubic-bezier(.22,.61,.36,1)} .reg-entree:last-child{border-bottom:0} .reg-entree.vide{border-bottom:0;font-size:.82rem;line-height:1.6;color:var(--muted);padding-top:0} .reg-entree-tete{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .reg-entree-tete b{font:600 .86rem var(--font-sans);color:var(--text)} .reg-entree.rev .reg-entree-tete b{color:var(--accent-texte,var(--accent))} .reg-entree-objet{display:block;margin-top:3px;font-size:.78rem;line-height:1.5;color:var(--muted)} @keyframes reg-pose{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.reg-entree{animation:none}.reg-perle,.reg-portrait{transition:none}} /* ══════════════════════════════════════════════════════════════════ LOT 1: la coquille, au motif des onglets verticaux de la reference. ══════════════════════════════════════════════════════════════════ */ :root{ --rail:212px; } /* La barre laterale n'est plus un rail d'icones muettes: chaque entree dit son nom, en Space Mono, et l'onglet actif porte le losange de la reference. */ /* Sous 900px le rail se recontracte sur ses icones: une colonne de 212px mangerait la moitie d'un telephone. Ecart assume avec le brief, qui prevoit une bande horizontale a defilement. */ @media (max-width:900px){ :root{ --rail:64px; } /* Sous 900px la barre redevient horizontale. Elle etait restee en verre laiteux blanc, un reste de theme clair: sur fond nuit elle eblouissait. */ .nav{ background:var(--bg)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; border-bottom:1px solid var(--border)!important; border-right:0!important; width:auto!important; gap:2px; padding:8px 10px; } .nav .nav-tab{ justify-content:center; padding:10px; font-size:0; gap:0; } .nav .nav-tab::before{ flex:0 0 20px; width:20px; height:20px; } .nav .nav-tab.on::after{ left:3px; width:6px; height:6px; margin-top:-3px; } } /* Titres de section: la graisse 500 et l'interlettrage serre de la reference, et l'accent porte par la couleur seule. */ .sh-title{ font-weight:500; letter-spacing:-.035em; line-height:1.12; font-family:'Plus Jakarta Sans', system-ui, sans-serif; } .sh-title em{ font-style:normal; color:var(--brand-500); font-weight:500; margin-left:.06em; } /* Champs de choix: plus aucun chevron de navigateur, plus aucun fond blanc surgi du systeme d'exploitation. */ select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:var(--radius-sm); border:1px solid var(--border); background-color:var(--s1); background-image:linear-gradient(45deg,transparent 50%,var(--soft) 50%), linear-gradient(135deg,var(--soft) 50%,transparent 50%); background-position:calc(100% - 15px) center, calc(100% - 10px) center; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:32px; color:var(--text); font-family:'Plus Jakarta Sans', system-ui, sans-serif; } select:focus{ border-color:var(--text); box-shadow:0 0 0 3px rgba(229,32,42,.14); outline:none; } /* Champs de saisie: le meme filet, le meme anneau de focus. */ input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],textarea{ border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--s1); color:var(--text); } input[type=text]:focus,input[type=email]:focus,input[type=password]:focus, input[type=search]:focus,input[type=number]:focus,textarea:focus{ border-color:var(--text); box-shadow:0 0 0 3px rgba(229,32,42,.14); outline:none; } /* Focus clavier visible partout: jamais d'outline retiree sans remplacement. */ :focus-visible{ outline:2px solid var(--brand-500); outline-offset:2px; } /* Boutons: rayon pill, graisse 600, aucune ombre. */ .btn-primary,.btn-sm,.btn-sm-brand{ border-radius:var(--radius-pill); font-weight:600; box-shadow:none; transition:background.18s cubic-bezier(.22,.61,.36,1), color.18s cubic-bezier(.22,.61,.36,1), border-color.18s cubic-bezier(.22,.61,.36,1); } .btn-primary{ background:var(--brand-500); } .btn-primary:hover{ background:var(--brand-600); opacity:1; } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; } } /* ══ LOT 1 (suite): libelle de section, tableaux, cartes ══ */ /* Un libelle de section annonce, il ne crie pas. Space Mono, gris tertiaire, pas de pastille rouge: c'est le titre juste en dessous qui porte le poids. */ .sh-eyebrow{ background:transparent!important; border:0!important; padding:0!important; color:var(--soft)!important; font-family:'Space Mono', ui-monospace, monospace!important; font-size:12.5px!important; font-weight:400!important; letter-spacing:.01em!important; margin-bottom:16px!important; } .sh-eyebrow::before{ display:none!important; } /* Carte: le filet la detache, pas une ombre. */ .card,.stats-row >*{ border-radius:var(--r); border:1px solid var(--border); background:var(--s1); box-shadow:none; } /* Tableaux: pas de zebrure, pas de bordure exterieure. Un filet sous chaque ligne, des en-tetes en Space Mono, et la valeur mise en avant en rouge. */ table{ border-collapse:collapse; width:100%; } table th{ font-family:'Space Mono', ui-monospace, monospace; font-size:11.5px; font-weight:400; letter-spacing:.01em; color:var(--soft); text-align:left; text-transform:none; padding:10px 12px; border-bottom:1px solid var(--border); background:transparent; } table td{ padding:12px; border-bottom:1px solid var(--border); background:transparent; } table tr:nth-child(even) td,table tr:nth-child(odd) td{ background:transparent; } table td:first-child{ color:var(--text); font-weight:500; } /* Tuiles chiffrees du tableau de bord: chiffre serre, legende discrete. */ .stats-row >* { padding:20px 22px; } /* ══════════════════════════════════════════════════════════════════ LOT 2: tuiles chiffrees du tableau de bord. ══════════════════════════════════════════════════════════════════ */ /* Format de la bande de confiance de la landing: le chiffre est serre et dense, pas monumental. Un nombre de quarante pixels ne dit pas mieux que vingt-deux, il occupe seulement plus de place. */ .stat-card{ box-shadow:none; border:1px solid var(--border); border-radius:12px; padding:18px 20px; background:var(--s1); } .stat-lbl{ font-family:'Space Mono', ui-monospace, monospace; font-size:12px; font-weight:400; letter-spacing:.01em; color:var(--soft); margin-bottom:12px; text-transform:uppercase; } .stat-val{ font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-size:22px; font-weight:700; letter-spacing:-.04em; color:var(--text); line-height:1.1; } /* ══════════════════════════════════════════════════════════════════ LOT 3: pipeline et liste de candidatures. ══════════════════════════════════════════════════════════════════ */ /* Les colonnes s'annoncent en Space Mono, sans crier: c'est la carte du candidat qui doit retenir le regard, pas l'intitule de la colonne. */ .kanban-col-title{ font-family:'Space Mono', ui-monospace, monospace; font-size:11.5px; font-weight:400; letter-spacing:.01em; color:var(--soft); text-transform:uppercase; } .kanban-col-header{ border-bottom:1px solid var(--border); } /* Carte candidat: un filet la detache, jamais une ombre. */ .kanban-card{ border-radius:var(--r); box-shadow:none!important; border:1px solid var(--border); } .kanban-card:hover{ box-shadow:none!important; border-color:rgba(255,255,255,.22); } .kanban-card-name{ font-size:15px; font-weight:600; letter-spacing:-.015em; color:var(--text); } .kanban-card-poste{ font-size:12.5px; color:var(--soft); } /* Les niveaux: teintes recalculees pour le fond nuit. Les valeurs d'origine venaient d'un theme clair et tombaient a 2,4 pour 1, sous le minimum AA. */ .lvl-top{ background:rgba(31,122,85,.16); color:#34D399; border:1px solid rgba(52,211,153,.28); } .lvl-bon{ background:rgba(47,95,191,.16); color:#5FB4F0; border:1px solid rgba(95,180,240,.28); } .lvl-moyen{ background:rgba(181,115,11,.16); color:#E0A050; border:1px solid rgba(224,160,80,.28); } /* Le curseur de reglage de la reference: piste fine, pastille rouge cerclee de blanc. C'est celui du simulateur, repris tel quel. */ input[type=range]{ -webkit-appearance:none; appearance:none; background:transparent; height:18px; accent-color:var(--brand-500); } input[type=range]::-webkit-slider-runnable-track{ height:3px; border-radius:2px; background:rgba(255,255,255,.16); } input[type=range]::-moz-range-track{ height:3px; border-radius:2px; background:rgba(255,255,255,.16); } input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:18px; height:18px; margin-top:-7.5px; border-radius:50%; background:var(--brand-500); border:3px solid #fff; box-shadow:0 1px 6px rgba(0,0,0,.5); } input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--brand-500); border:3px solid #fff; box-shadow:0 1px 6px rgba(0,0,0,.5); } /* ══ Palette des dimensions: ce qui en dependait ══ */ /* Le cercle de score se lit par son chiffre, pas par un halo. */ .score-ring,.score-ring *{ box-shadow:none!important; filter:none!important; } /* Les intitules de poste reprennent la couleur du texte: le bleu en faisait des liens qui n'en sont pas, et disputait l'accent au rouge de marque. */ .cv-block-title{ color:var(--text); } /* Les liseres colores a gauche disparaissent: le brief les bannit, et un filet plus un titre suffisent a delimiter un bloc. */ .eq-bias-card,.dr-block,.idea-adminnote,.cv-exp-item,.cv-form-item,.avis-card-comment{ border-left:0; border-radius:var(--radius-sm); } .dr-block{ border-top:1px solid var(--border); border-radius:0; padding-left:0; background:transparent; } /* ══════════════════════════════════════════════════════════════════ LOT 4: fiche candidat, navigation par onglets verticaux. Le meme motif que la barre laterale: Space Mono, losange, fond au survol. ══════════════════════════════════════════════════════════════════ */ .cmodal-tabbed{ display:grid; grid-template-columns:196px minmax(0,1fr); gap:34px; align-items:start; } /* L'identite du candidat reste pleine largeur au-dessus: c'est ce qu'on lit en premier, elle ne se met pas en colonne a cote d'une navigation. */ .cmodal-tabbed >*:not(.cmodal-section):not(.cmodal-tabs){ grid-column:1 / -1; } .cmodal-tabs{ position:sticky; top:0; display:flex; flex-direction:column; gap:2px; padding:2px 0; grid-column:1; } .cmodal-tabbed >.cmodal-section.cmodal-sec-on{ grid-column:2; } .cmodal-tab{ position:relative; text-align:left; background:transparent; border:0; cursor:pointer; font-family:'Space Mono', ui-monospace, monospace; font-size:12.5px; letter-spacing:.01em; font-weight:400; line-height:1.35; color:var(--soft); padding:9px 10px 9px 15px; border-radius:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background.18s cubic-bezier(.22,.61,.36,1), color.18s cubic-bezier(.22,.61,.36,1); } .cmodal-tab:hover{ background:rgba(255,255,255,.06); color:var(--text); } .cmodal-tab.on{ background:rgba(255,255,255,.10); color:var(--text); } .cmodal-tab.on::after{ content:''; position:absolute; left:2px; top:50%; width:7px; height:7px; margin-top:-4px; transform:rotate(45deg); background:var(--brand-500); } .cmodal-tab:focus-visible{ outline:2px solid var(--brand-500); outline-offset:2px; } /* Une seule section a la fois: c'est tout l'objet de la manoeuvre, la fiche tenait sur trois ecrans de defilement. */ .cmodal-tabbed >.cmodal-section{ display:none; } .cmodal-tabbed >.cmodal-section.cmodal-sec-on{ display:block; } /* Filet de securite : une section restee hors du rail s'affiche quand meme, dans la colonne de contenu. Mieux vaut une section de trop qu'un pan du dossier invisible. */ .cmodal-tabbed >.cmodal-section.cmodal-sec-libre{ display:block; grid-column:2; } /* Le titre de section reste en place: il porte souvent une action, un engrenage ou un bouton. On l'aligne seulement sur l'echelle du systeme. */ .cmodal-tabbed >.cmodal-section.cmodal-sec-on >.cmodal-section-title{ font-size:19px; font-weight:600; letter-spacing:-.025em; } /* Sous 900px le rail devient une bande horizontale a defilement, sans barre visible: une colonne de 186px sur un telephone ne laisserait rien au contenu. */ @media (max-width:900px){ .cmodal-tabbed{ display:block; } .cmodal-tabs{ flex-direction:row; overflow-x:auto; gap:4px; margin-bottom:18px; padding-bottom:6px; border-bottom:1px solid var(--border); scrollbar-width:none; -ms-overflow-style:none; } .cmodal-tabs::-webkit-scrollbar{ display:none; } .cmodal-tab{ flex:0 0 auto; padding:9px 12px 9px 22px; } .cmodal-tab.on::after{ left:9px; } } /* La piece DISC remplace les barres de progression: la lettre est la jauge. */ canvas.disc-lettres{ display:block; width:100%; height:210px; margin:6px 0 18px; border:1px solid var(--border); border-radius:var(--r); background:var(--s1); } @media (max-width:680px){ canvas.disc-lettres{ height:170px; } } /* Caviardage: ce que le Bias Firewall retire, et ce qu'il garde. */ canvas.bias-caviardage{ display:block; width:100%; height:330px; margin:0 0 24px; border:1px solid var(--border); border-radius:var(--r); background:var(--s1); } @media (max-width:560px){ canvas.bias-caviardage{ height:560px; } } /* Floraison Team Chemistry: la couverture de l equipe et le creux comble. */ canvas.chem-floraison{display:block;width:100%;height:290px;margin:0 0 18px;border:1px solid var(--border);border-radius:var(--r);background:var(--s1)} @media (max-width:680px){canvas.chem-floraison{height:240px}} /* Jauges de competences: un filet de 3px, pas un ruban de 8. */ .ck-bar{ height:3px; border-radius:2px; background:rgba(255,255,255,.10); } .ck-bar-f{ border-radius:2px; } .ck-bar-tick{ top:-4px; bottom:-4px; width:1px; background:rgba(255,255,255,.75); border-radius:0; } /* em et i: le navigateur les met en italique de lui-meme, et la police n'a pas d'italique dessinee. L'accent se dit par la couleur, comme partout. */ em, i{ font-style:normal; } h1 em, h2 em, h3 em,.sh-title em,.hero h1 em{ color:var(--brand-500, #E5202A); font-weight:500; } /* ══════════════════════════════════════════════════════════════════ LOT 7: l'export de conformite se presente comme un document. Le rapport de decision est la piece qu'un candidat, un avocat ou un controleur peut demander a voir. Il ne doit pas ressembler a un tableau de bord mais a un document: marges genereuses, une seule colonne de lecture, metadonnees et horodatages en Space Mono. ══════════════════════════════════════════════════════════════════ */ /* Mesure de lecture: au-dela d'une soixantaine de caracteres par ligne, l'oeil perd la ligne suivante. Un rapport se lit, il ne se survole pas. */ .dr-section-body{ max-width:62ch; font-size:15.5px; line-height:1.6; } .dr-section{ padding:30px 0; border-top:1px solid var(--border); } .dr-title{ font-weight:500; letter-spacing:-.035em; } .dr-section-title{ font-size:19px; font-weight:600; letter-spacing:-.025em; margin-bottom:16px; } /* Metadonnees et horodatages: Space Mono, comme le veut le brief. Ce sont des references, pas de la prose, et elles doivent s'aligner a l'oeil. */ .dr-meta-key,.dr-meta-val,.dr-hero-label,.dr-disc-val,.dr-num{ font-family:'Space Mono', ui-monospace, monospace; font-size:12.5px; letter-spacing:.01em; } .dr-meta-key{ color:var(--soft); } .dr-meta-val{ color:var(--text); } .dr-meta-grid{ row-gap:9px; } /* Les jauges du rapport suivent celles de la fiche: un filet, pas un ruban. */ .dr-disc-track{ height:3px; border-radius:2px; } .dr-disc-fill{ border-radius:2px; } /* ── A l'impression ──────────────────────────────────────────────── Le rapport n'avait aucune regle d'impression: imprimer depuis la fiche sortait l'application entiere. */ @media print{ body *{ visibility:hidden; } .dr-backdrop,.dr-backdrop *{ visibility:visible; } .dr-backdrop{ position:absolute; inset:0; padding:0; overflow:visible; background:#fff!important; color:#0A0A0B!important; } .dr-card{ max-width:100%; max-height:none; box-shadow:none; border:0; background:#fff!important; color:#0A0A0B!important; } .dr-head{ position:static; background:#fff!important; border-bottom:1px solid #ddd; } .dr-actions,.dr-close,.dr-edit-title-btn{ display:none!important; } .dr-section{ border-top:1px solid #e2e2e2; break-inside:avoid; page-break-inside:avoid; } .dr-page-break{ break-before:page; page-break-before:always; } .dr-title,.dr-section-title,.dr-section-body,.dr-identity-name,.dr-meta-val{ color:#0A0A0B!important; } .dr-meta-key,.dr-subtitle,.dr-identity-poste{ color:#5F5C58!important; } .dr-badge,.dr-badge-green,.dr-badge-red,.dr-badge-amber,.dr-badge-neutral{ background:transparent!important; border:1px solid #999!important; color:#0A0A0B!important; } /* Une adresse imprimee ne se clique pas: on l'ecrit en toutes lettres. */ .dr-body a[href^="http"]::after{ content:"("attr(href) ")"; font-size:11px; color:#5F5C58; } @page{ margin:18mm 16mm; } } /* ═══ Saisie manuelle du Carl Jung, et relance du lien de completion ═══ */ .djs{margin-top:14px} .djs-corps{margin-top:12px;padding:16px 18px;border:1px solid var(--border);border-radius:14px;background:var(--s1)} .djs-intro{margin:0 0 14px;font-size:.82rem;line-height:1.55;color:var(--muted);max-width:56ch} .djs-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px} .djs-champ{display:flex;flex-direction:column;gap:6px} .djs-lbl{display:flex;align-items:center;gap:7px;font-size:.78rem;color:var(--muted)} .djs-dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px} /* Un champ nombre natif apporte ses fleches et son style de navigateur : on saisit deux chiffres dans un champ texte, filtre a la frappe. */ .djs-champ input{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:10px; background:var(--s2);color:var(--text);font-family:var(--font-mono);font-size:1rem;text-align:center;outline:none; transition:border-color .18s cubic-bezier(.22,.61,.36,1)} .djs-champ input:focus{border-color:var(--text)} .djs-pied{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px} .djs-somme{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.04em;color:var(--muted)} .djs-somme.est-juste{color:var(--text)} .djs-somme.est-faux{color:var(--brand-500)} .djs-actions{margin-left:auto;display:flex;gap:9px} .djs-actions .btn-primary{width:auto;padding:8px 18px;font-size:.85rem} .djs-actions .btn-primary[disabled]{opacity:.45;pointer-events:none} .djs-note{margin:12px 0 0;font-size:.76rem;color:var(--muted)} /* Relancer un candidat qui n'a pas complete son dossier est l'action courante : elle garde la taille d'un bouton, la date passe derriere. */ .cmodal-relance{margin-top:8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .cmodal-relance-note{font-size:.76rem;color:var(--muted)} /* Un dossier archive qu on affiche doit dire pourquoi il est la. */ .arc-badge{display:inline-flex;align-items:center;margin-top:8px;padding:3px 9px; border:1px solid var(--border);border-radius:6px;background:var(--s2); font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;color:var(--muted)} /* Une case a cocher heritait de « .filter-bar input » : 180 px de largeur minimum et 12 px de remplissage, d ou l ecart entre la case et son intitule. La case et son texte forment un seul objet, ils se touchent. */ .filter-bar input[type=checkbox],.filters input[type=checkbox], .filter-checkbox input[type=checkbox]{ width:14px;height:14px;min-width:0;margin:0;padding:0;flex:0 0 14px; accent-color:var(--accent);cursor:pointer;border-radius:4px} .filter-checkbox{gap:7px!important} /* ═══ Onboarding : les plis ═══ Un filet, un intitule, un etat. Pas de carte dans la carte : la hierarchie tient au trait et au blanc. */ .onb-pli{border-top:1px solid var(--border)} .onb-pli:first-child{border-top:0} .onb-pli-tete{display:flex;align-items:center;gap:14px;width:100%;padding:13px 2px; background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer; transition:color .18s cubic-bezier(.22,.61,.36,1)} .onb-pli-tete:hover{color:var(--text)} .onb-pli-tete:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px} .onb-pli-titre{font:500 .88rem var(--font-sans);letter-spacing:-.01em;color:var(--text)} /* Ferme, le pli doit dire son etat : c'est ce qui permet de ne pas l'ouvrir. */ .onb-pli-resume{margin-left:auto;font-family:var(--font-mono);font-size:.7rem; letter-spacing:.06em;color:var(--muted);white-space:nowrap} .onb-pli-chevron{width:13px;height:13px;flex:0 0 13px;background:currentColor;opacity:.5; transition:transform .2s cubic-bezier(.22,.61,.36,1)} .onb-pli.est-ouvert .onb-pli-chevron{transform:rotate(180deg)} .onb-pli-corps{display:none;padding:0 0 18px} .onb-pli.est-ouvert .onb-pli-corps{display:block} /* Le bloc porte deja son titre a l'interieur : le pli le remplace. */ .onb-pli-corps .onb-section-head, .onb-pli-corps .onb-referent-tasks-head{display:none} .onb-pli-corps .onb-section{margin:0} .onb-pli-corps>.onb-section:first-child{padding-top:0;border-top:0} @media (prefers-reduced-motion:reduce){.onb-pli-chevron{transition:none}} /* Vue Registre mise de cote : [hidden] seul ne suffit pas, .view-btn impose son propre display. */ .view-btn[hidden]{display:none!important} /* La fiche gardait soixante pixels de vide entre le filet d en-tete et la premiere action, dus a deux conteneurs vides. */ #cmodal-edit-info:empty,#cmodal-completion-link:empty{display:none} .cmodal-head{margin-bottom:14px} /* Le detail du parcours : seulement ce qui a ete rate. */ .onb-rally-detail{margin:14px 0 4px;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--s2)} .onb-rally-detail-tete{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px} .onb-rally-jeu+.onb-rally-jeu{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)} .onb-rally-jeu-tete{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font:500 .84rem var(--font-sans);color:var(--text)} .onb-rally-jeu-score{font-family:var(--font-mono);font-size:.74rem;color:var(--muted)} .onb-rally-rates{margin:7px 0 0;padding-left:17px;font-size:.82rem;line-height:1.65;color:var(--muted)} .onb-rally-rates li::marker{color:var(--accent-texte,var(--accent))} .onb-rally-parfait{margin-top:5px;font-size:.8rem;color:var(--muted);opacity:.7} .onb-rally-nodetail{margin:12px 0 4px;font-size:.8rem;line-height:1.6;color:var(--muted);max-width:60ch} /* ═══ Documents RH : evaluations deposees, rapports d'etonnement, pieces ═══ Un filet, une liste, un formulaire de depot. Pas de carte dans la carte. */ .docs-bloc{margin-top:20px;padding-top:18px;border-top:1px solid var(--border)} .doc-tete{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase; color:var(--muted);margin-bottom:9px} .doc-intro{margin:0 0 14px;font-size:.82rem;line-height:1.6;color:var(--muted);max-width:62ch} .doc-erreur{margin:0 0 12px;font-size:.8rem;line-height:1.55;color:var(--brand-500);max-width:62ch} .doc-vide{margin:0 0 14px;font-size:.8rem;color:var(--muted);opacity:.8} .doc-liste{list-style:none;margin:0 0 16px;padding:0} .doc-ligne{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)} .doc-ligne:last-child{border-bottom:0} .doc-ico{width:15px;height:15px;flex:0 0 15px;margin-top:2px;background:currentColor;color:var(--muted)} .doc-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} .doc-nom{font:500 .87rem var(--font-sans);color:var(--text);word-break:break-word} a.doc-nom{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border)} a.doc-nom:hover{text-decoration-color:var(--accent)} .doc-meta{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.05em;color:var(--muted)} .doc-com{font-size:.82rem;line-height:1.6;color:var(--muted);white-space:pre-wrap;max-width:62ch} .doc-retirer{flex:0 0 auto;background:none;border:0;padding:5px;border-radius:7px;cursor:pointer; color:var(--muted);opacity:.55;transition:opacity .18s cubic-bezier(.22,.61,.36,1),color .18s cubic-bezier(.22,.61,.36,1)} .doc-retirer:hover{opacity:1;color:var(--brand-500)} .doc-retirer .icon-2d{width:14px;height:14px;background:currentColor} .doc-retirer:focus-visible{outline:2px solid var(--accent);outline-offset:2px;opacity:1} .doc-ajout{padding:15px 16px;border:1px solid var(--border);border-radius:12px;background:var(--s2)} .doc-champs{display:flex;gap:12px;flex-wrap:wrap} .doc-champ{display:flex;flex-direction:column;gap:5px;flex:1 1 220px;margin-bottom:11px} .doc-champ-court{flex:0 0 150px} .doc-champ span{font-size:.75rem;color:var(--muted)} .doc-champ input,.doc-champ textarea{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:9px; background:var(--s1);color:var(--text);font-family:inherit;font-size:.86rem;outline:none;resize:vertical; transition:border-color .18s cubic-bezier(.22,.61,.36,1)} .doc-champ input:focus,.doc-champ textarea:focus{border-color:var(--text)} /* Le champ de fichier natif ne se style pas : on le cache et on declenche depuis un vrai bouton. */ .doc-fichier{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .doc-actions{display:flex;align-items:center;gap:11px;flex-wrap:wrap} .doc-choisi{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.04em;color:var(--muted); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px} .doc-deposer{margin-left:auto;width:auto;padding:9px 20px;font-size:.85rem} .doc-deposer[disabled]{opacity:.5;pointer-events:none} /* ═══ Rapport d'etonnement : deux jalons dates ═══ */ .eton-jalon{padding:16px 0;border-bottom:1px solid var(--border)} .eton-jalon:last-child{border-bottom:0;padding-bottom:0} .eton-tete{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap} .eton-titre{font:500 .9rem var(--font-sans);letter-spacing:-.01em;color:var(--text)} /* L'echeance dit d'un coup d'oeil si le moment est passe : au-dela, le regard neuf est perdu et le rapport ne se rattrape plus. */ .eton-quand{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.05em;color:var(--muted)} .eton-quand.est-du{color:var(--accent-texte,var(--accent))} .eton-intro{margin:7px 0 0;font-size:.82rem;line-height:1.6;color:var(--muted);max-width:62ch} .eton-bloc{margin-top:14px;padding-top:0;border-top:0} .eton-bloc .doc-tete{margin-bottom:8px} /* Une seance deja posee dans l agenda se distingue : on ne la pose pas deux fois. */ .onb-session-rm.est-pose{color:var(--green,#2f9e79);opacity:1} .onb-session-rm.est-pose .icon-2d{background:currentColor} /* Near-Miss Radar du vivier */ .nmr{margin:0 0 18px} .nmr-titre{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem;margin-bottom:10px;flex-wrap:wrap} .nmr-note{font-weight:400;font-size:.76rem;color:var(--muted)} .nmr-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:12px} .nmr-poste{background:var(--s1);border:1px solid var(--border);border-radius:12px;padding:14px 16px} .nmr-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px} .nmr-t{font-weight:600;font-size:.9rem} .nmr-s{font-size:.72rem;color:var(--muted);margin-top:2px} .nmr-l{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--border);cursor:pointer} .nmr-l:hover .nmr-id{color:var(--accent-texte,var(--accent))} .nmr-sc{font-family:'Space Mono',monospace;font-weight:700;font-size:1.05rem;text-align:right} .nmr-sous .nmr-sc{color:var(--muted)} .nmr-id{font-size:.84rem;line-height:1.25} .nmr-id em{display:block;font-style:normal;font-size:.72rem;color:var(--muted);margin-top:2px} .nmr-tg{font-size:.66rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border:1px solid var(--border);border-radius:999px;color:var(--muted);white-space:nowrap} .nmr-w{border-color:rgba(229,32,42,.45);color:var(--accent-texte,var(--accent))} .nmr-seuil{display:flex;align-items:center;gap:10px;margin:6px 0;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-texte,var(--accent))} .nmr-seuil::before,.nmr-seuil::after{content:"";flex:1;height:1px;background:var(--accent);opacity:.6} /* ── La marque : l'Emergent, en image, dans les deux themes ─────────── */ .logo-icon,.login-logo-icon{filter:none!important;background:none!important;-webkit-mask:none!important;mask:none!important;transform:none!important} img.logo-icon{width:26px;height:26px;display:inline-block} img.login-logo-icon{width:30px;height:30px;display:inline-block} @media(min-width:901px){ #screen-admin > nav.nav .logo,#screen-client > nav.nav .logo{background:transparent!important;box-shadow:none!important} #screen-admin > nav.nav .logo .logo-icon,#screen-client > nav.nav .logo .logo-icon{filter:none!important;width:26px;height:26px} } /* ═══════════════════════════════════════════════════════════════ THEME CLAIR, deuxieme version : contraste d'abord. Le sombre reste le defaut. Le clair est un vrai systeme, pas une version delavee : blanc franc, gris froids, texte a plus de 7:1, filets visibles, un seul accent rouge, Inter partout (titres compris), ombres courtes. Reference : les tableaux de bord les plus lisibles du marche (Linear, Vercel, Stripe), pas une page de lecture. ═══════════════════════════════════════════════════════════════ */ :root[data-theme="light"]{ color-scheme:light; --bg:#fbf8f3; --s1:#f4efe7; --s2:#ece6dc; --s3:#e2dacd; --border:#ddd5c8; --border-2:#c6bcab; --text:#15130f; --muted:#5a5347; --soft:#7a7263; --accent:#e5202a; --brand-500:#e5202a; --brand-bg:#fdecec; --brand-border:#f5b5b9; --success:#15803d; --success-bg:#dcfce7; --success-border:#86efac; --warning:#b45309; --warning-bg:#fef3c7; --warning-border:#fcd34d; --danger:#b91c1c; --danger-bg:#fee2e2; --danger-border:#fca5a5; --info:#1d4ed8; --info-bg:#dbeafe; --info-border:#93c5fd; --good:#15803d; --mid:#b45309; --bad:#b91c1c; --green:#15803d; --yellow:#b45309; --blue:#1d4ed8; --cyan:#0e7490; --overlay-low:rgba(11,13,18,.04); --overlay-mid:rgba(11,13,18,.08); --overlay-high:rgba(11,13,18,.14); --shadow-sm:0 1px 2px rgba(11,13,18,.05); --shadow:0 1px 2px rgba(11,13,18,.06),0 1px 3px rgba(11,13,18,.04); --shadow-md:0 8px 24px rgba(11,13,18,.10),0 1px 2px rgba(11,13,18,.06); --shadow-float:0 16px 40px rgba(11,13,18,.14),0 2px 6px rgba(11,13,18,.06); --shadow-premium-sm:0 1px 2px rgba(11,13,18,.05); --hero-gradient:#ffffff; --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-display:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --serif:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --r:12px; --radius-sm:8px; --radius-lg:12px; --radius-xl:16px; } :root[data-theme="light"] #screen-login{--bg:#fbf8f3;--s1:#f4efe7;--s2:#ece6dc;--s3:#e2dacd;--border:#ddd5c8;--text:#15130f;--muted:#5a5347;--soft:#7a7263} /* ── Le fond et la police ─────────────────────────────────────── */ :root[data-theme="light"] body{background:var(--bg)!important;background-image:none!important;color:var(--text);-webkit-font-smoothing:antialiased} :root[data-theme="light"] body::before,:root[data-theme="light"] body::after,:root[data-theme="light"] body > .aurora-blob-3, :root[data-theme="light"] .sh::before,:root[data-theme="light"] .sh::after, :root[data-theme="light"] .login-side-hero::before,:root[data-theme="light"] .login-side-hero::after{display:none!important} :root[data-theme="light"] .kanban-card::after{display:none} :root[data-theme="light"] body,:root[data-theme="light"] body *:not(code):not(pre):not(kbd){font-family:var(--font-sans)} :root[data-theme="light"] code,:root[data-theme="light"] pre,:root[data-theme="light"] kbd{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:.92em;background:var(--s1);border:1px solid var(--border);border-radius:6px;padding:.1em .4em} :root[data-theme="light"] ::selection{background:#fde3e4} :root[data-theme="light"] *{scrollbar-color:#c3cad3 transparent} :root[data-theme="light"] :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px} /* ── Les titres : Inter, gras, serres, en encre. Pas de serif, pas de halo, pas de mot rouge. ── */ :root[data-theme="light"] h1,:root[data-theme="light"] h2,:root[data-theme="light"] h3, :root[data-theme="light"] .sh h1,:root[data-theme="light"] .sh h2,:root[data-theme="light"] .sh-title, :root[data-theme="light"] .client-hero h1,:root[data-theme="light"] .login-hero-title,:root[data-theme="light"] .cmodal-title, :root[data-theme="light"] .ck-name,:root[data-theme="light"] .pool-title,:root[data-theme="light"] .admin-hero h1,:root[data-theme="light"] .admin-hero h2{ font-family:var(--font-sans);font-weight:600;letter-spacing:-.025em;color:var(--text);text-align:left} :root[data-theme="light"] .sh h1,:root[data-theme="light"] .sh h2,:root[data-theme="light"] .sh-title{font-size:1.9rem;line-height:1.15} :root[data-theme="light"] h1 em,:root[data-theme="light"] h2 em,:root[data-theme="light"] h3 em,:root[data-theme="light"] .sh h2 em, :root[data-theme="light"] .sh-title em,:root[data-theme="light"] .client-hero h1 em,:root[data-theme="light"] .hero h1 em, :root[data-theme="light"] .login-hero-title em{color:inherit;text-shadow:none;font-weight:inherit;font-style:normal;margin:0} :root[data-theme="light"] .sh{display:block} :root[data-theme="light"] .sh-sub{font-family:var(--font-sans);color:var(--muted);font-size:.98rem;line-height:1.55;max-width:60ch;margin-top:6px} :root[data-theme="light"] .sh .sh-actions,:root[data-theme="light"] .sh > .btn-sm,:root[data-theme="light"] .sh > div[style*="display:flex"]{margin-top:14px} :root[data-theme="light"] .sh-eyebrow,:root[data-theme="light"] .tour-step,:root[data-theme="light"] .eyebrow, :root[data-theme="light"] .login-hero-eyebrow,:root[data-theme="light"] .admin-hero-eyebrow,:root[data-theme="light"] .sec-eyebrow{ display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted)} :root[data-theme="light"] .sh-eyebrow::before,:root[data-theme="light"] .tour-step::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none} :root[data-theme="light"] .muted,:root[data-theme="light"] .hint,:root[data-theme="light"] small,:root[data-theme="light"] .small{color:var(--muted)} :root[data-theme="light"] .pool-stat-val,:root[data-theme="light"] .nmr-sc,:root[data-theme="light"] .login-kpi-val, :root[data-theme="light"] .usage-badge-current,:root[data-theme="light"] .usage-badge-max{color:var(--text);font-variant-numeric:tabular-nums} /* ── La marque ──────────────────────────────────────────────── */ :root[data-theme="light"] .logo,:root[data-theme="light"] .login-logo,:root[data-theme="light"] .login-logo *{font-family:"Source Serif 4",Georgia,serif!important;font-weight:600;color:var(--text)} :root[data-theme="light"] .logo{background:transparent!important} /* ── Le rail : blanc, filet, un etat actif qui se voit ───────── */ :root[data-theme="light"] nav.nav,:root[data-theme="light"] .nav{background:#fffdf9!important;background-image:none!important;border-color:var(--border)!important;backdrop-filter:none} :root[data-theme="light"] .nav-tab{color:var(--muted);font-weight:500;font-size:.9rem;border-radius:8px;transition:background .14s,color .14s} :root[data-theme="light"] .nav-tab:hover{color:var(--text);background:var(--s1)} :root[data-theme="light"] #screen-admin > nav.nav .nav-tab.on,:root[data-theme="light"] #screen-client > nav.nav .nav-tab.on, :root[data-theme="light"] .nav-tab.on{color:var(--text);background:var(--s2);font-weight:600;border-bottom-color:transparent} :root[data-theme="light"] .nav-tab .icon-2d{opacity:.85} :root[data-theme="light"] .nav-tab.on .icon-2d{opacity:1} :root[data-theme="light"] .nav .nav-right .tour-replay,:root[data-theme="light"] .nav .nav-right .usage-badge,:root[data-theme="light"] .theme-toggle{ color:var(--muted)!important;background:#fff!important;border:1px solid var(--border-2)!important;box-shadow:none;border-radius:8px} :root[data-theme="light"] .nav .nav-right .tour-replay:hover,:root[data-theme="light"] .nav .nav-right .usage-badge:hover,:root[data-theme="light"] .theme-toggle:hover{color:var(--text)!important;border-color:var(--text)!important} :root[data-theme="light"] .nav-level{background:conic-gradient(var(--accent) 0deg,var(--s3) 0deg)} :root[data-theme="light"] .nav-level::before{background:#fff} :root[data-theme="light"] .nav-level-num{color:var(--text)} :root[data-theme="light"] .user-menu-avatar{box-shadow:0 0 0 2px #fff} :root[data-theme="light"] .user-menu-dropdown{background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-float);color:var(--text)} :root[data-theme="light"] .user-menu-link{color:var(--text)} :root[data-theme="light"] .user-menu-link:hover{background:var(--s1)} :root[data-theme="light"] .user-menu-info-tenant{color:var(--text)} :root[data-theme="light"] .user-menu-info-role{color:var(--muted)} /* ── Les boutons : un seul primaire par ecran, en encre ; le reste en filet net ── */ :root[data-theme="light"] .btn-primary,:root[data-theme="light"] .btn-sm-brand,:root[data-theme="light"] .btn-brand, :root[data-theme="light"] .btn-add,:root[data-theme="light"] .btn-new-idea,:root[data-theme="light"] .idea-btn-submit, :root[data-theme="light"] .ideas-sort.on,:root[data-theme="light"] .tour-next,:root[data-theme="light"] .view-btn.on, :root[data-theme="light"] button[style*="background:var(--accent)"],:root[data-theme="light"] .btn-accent,:root[data-theme="light"] .btn-red{ background:var(--text)!important;color:#fff!important;border:1px solid var(--text)!important;border-radius:8px;font-weight:500;box-shadow:none; transition:background .14s,transform .14s} :root[data-theme="light"] .btn-primary:hover,:root[data-theme="light"] .btn-sm-brand:hover,:root[data-theme="light"] .btn-brand:hover, :root[data-theme="light"] .btn-add:hover,:root[data-theme="light"] .btn-new-idea:hover,:root[data-theme="light"] .idea-btn-submit:hover,:root[data-theme="light"] .tour-next:hover{background:#000!important;opacity:1} :root[data-theme="light"] .btn-sm,:root[data-theme="light"] .ideas-sort,:root[data-theme="light"] .tour-prev,:root[data-theme="light"] .view-btn, :root[data-theme="light"] .idea-btn-cancel,:root[data-theme="light"] .ck-btn-ghost{ background:#fff;border:1px solid var(--border-2);color:var(--text);border-radius:8px;font-weight:500;box-shadow:var(--shadow-sm)} :root[data-theme="light"] .btn-sm:hover,:root[data-theme="light"] .ideas-sort:hover:not(.on),:root[data-theme="light"] .view-btn:hover,:root[data-theme="light"] .ck-btn-ghost:hover{border-color:var(--text);background:#fff;color:var(--text)} :root[data-theme="light"] .btn-sm:disabled,:root[data-theme="light"] .btn-primary:disabled{opacity:.45} :root[data-theme="light"] .tour-skip{color:var(--muted);font-weight:500} :root[data-theme="light"] .tour-skip:hover{color:var(--text)} /* ── Les surfaces : blanc, filet visible, ombre courte ──────── */ :root[data-theme="light"] .card,:root[data-theme="light"] .pool-stat,:root[data-theme="light"] .nmr-poste,:root[data-theme="light"] .kanban-col, :root[data-theme="light"] .admin-panel,:root[data-theme="light"] .ck-card,:root[data-theme="light"] .cmodal-section,:root[data-theme="light"] .acc, :root[data-theme="light"] .gamif,:root[data-theme="light"] .bareme-card,:root[data-theme="light"] .ai-section{background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);border-radius:12px} :root[data-theme="light"] .card:hover{border-color:var(--border-2);transform:none} :root[data-theme="light"] .acc[open]{border-color:var(--border-2)} :root[data-theme="light"] .acc > summary,:root[data-theme="light"] .acc-sum{color:var(--text)} :root[data-theme="light"] .cmodal-content,:root[data-theme="light"] .cf-card,:root[data-theme="light"] .dr-card,:root[data-theme="light"] .qr-card, :root[data-theme="light"] .tour-pop{background:#fff;border:1px solid var(--border);color:var(--text);box-shadow:var(--shadow-float);border-radius:12px} :root[data-theme="light"] .dr-head,:root[data-theme="light"] .dr-actions,:root[data-theme="light"] .qr-head,:root[data-theme="light"] .qr-actions{background:#fff;border-color:var(--border)} :root[data-theme="light"] .tour-title{font-weight:600;color:var(--text)} :root[data-theme="light"] .tour-text{color:var(--muted)} :root[data-theme="light"] .tour-spot{box-shadow:0 0 0 9999px rgba(11,13,18,.45)} :root[data-theme="light"] .empty,:root[data-theme="light"] .empty-state,:root[data-theme="light"] .pool-empty{border:1px dashed var(--border-2);background:var(--s1);color:var(--muted);border-radius:12px} :root[data-theme="light"] [style*="background:var(--s3)"]{background:var(--s2)!important} :root[data-theme="light"] [style*="border:1px solid var(--accent)"]{border-color:var(--border)!important} :root[data-theme="light"] [style*="color:var(--accent-texte,var(--accent))"]:not(.btn-primary):not(.btn-brand):not(.retenu):not(.badge):not(.tag){color:var(--text)!important} /* ── Les tableaux ──────────────────────────────────────────── */ :root[data-theme="light"] .pool-table{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff} :root[data-theme="light"] .pool-table th{color:var(--muted);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;background:var(--s1);border-bottom:1px solid var(--border)} :root[data-theme="light"] .pool-table td{border-bottom:1px solid var(--s2);color:var(--text)} :root[data-theme="light"] .pool-table tr:hover td{background:var(--s1)} /* ── Les champs ────────────────────────────────────────────── */ :root[data-theme="light"] .inp,:root[data-theme="light"] input[type=text],:root[data-theme="light"] input[type=email], :root[data-theme="light"] input[type=password],:root[data-theme="light"] input[type=search],:root[data-theme="light"] input[type=number], :root[data-theme="light"] textarea,:root[data-theme="light"] select,:root[data-theme="light"] .pool-filter-input{ background:#fff;color:var(--text);border:1px solid var(--border-2);border-radius:8px;box-shadow:var(--shadow-sm)} :root[data-theme="light"] .inp:focus,:root[data-theme="light"] input:focus,:root[data-theme="light"] textarea:focus,:root[data-theme="light"] select:focus, :root[data-theme="light"] .pool-filter-input:focus{border-color:var(--text);outline:none;box-shadow:0 0 0 3px rgba(11,13,18,.08)} :root[data-theme="light"] ::placeholder{color:#8a919e} :root[data-theme="light"] input[type=checkbox],:root[data-theme="light"] input[type=radio]{accent-color:var(--text)} /* ── Les badges : fond teinte, texte fonce, toujours lisibles ── */ :root[data-theme="light"] .badge,:root[data-theme="light"] .chip,:root[data-theme="light"] .tag,:root[data-theme="light"] .nmr-tg{border-radius:999px;font-weight:600;letter-spacing:.02em} :root[data-theme="light"] .badge-success,:root[data-theme="light"] .badge.top,:root[data-theme="light"] .lvl-top{background:var(--success-bg);color:var(--success);border-color:var(--success-border)} :root[data-theme="light"] .badge-warning,:root[data-theme="light"] .badge.mid,:root[data-theme="light"] .lvl-mid{background:var(--warning-bg);color:var(--warning);border-color:var(--warning-border)} :root[data-theme="light"] .badge-danger,:root[data-theme="light"] .badge.low,:root[data-theme="light"] .lvl-low{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-border)} :root[data-theme="light"] .nmr-w{border-color:var(--danger-border);color:var(--danger);background:var(--danger-bg)} :root[data-theme="light"] .gamif-badge,:root[data-theme="light"] .gamif-achv{background:#fff;border:1px solid var(--border-2);color:var(--muted)} :root[data-theme="light"] .gamif-badge.on,:root[data-theme="light"] .gamif-achv.on,:root[data-theme="light"] .gamif-badge.unlocked{background:var(--s2);color:var(--text);border-color:var(--border-2)} :root[data-theme="light"] .gamif-level-badge{background:var(--accent);box-shadow:none;border-radius:10px;font-weight:600} :root[data-theme="light"] .gamif-xp-track{background:var(--s3)} /* ── Le bareme : cinq cartes identiques ──────────────────── */ :root[data-theme="light"] .bareme-card{--dim-color:var(--text)} :root[data-theme="light"] .bareme-card-head{color:var(--text)} :root[data-theme="light"] .bareme-card-pts{color:var(--muted);background:var(--s1);border:1px solid var(--border-2);border-radius:999px;font-weight:600} :root[data-theme="light"] .bareme-card-rows li{border-bottom-color:var(--s2);color:var(--text)} :root[data-theme="light"] .bareme-card-rows li span:last-child{color:var(--text);font-weight:600} :root[data-theme="light"] [style*="color:var(--yellow)"],:root[data-theme="light"] [style*="color:var(--cyan)"], :root[data-theme="light"] [style*="color:var(--blue)"],:root[data-theme="light"] [style*="color:var(--green)"]{color:var(--text)!important} /* ── Le cockpit candidat ─────────────────────────────────── */ :root[data-theme="light"] .ck-id,:root[data-theme="light"] .ck-card,:root[data-theme="light"] .ck-rankrow{--text:#15130f;--muted:#4b5563;--border:#d9dee5;--s1:#f6f7f9;--s2:#eef0f3;color:#15130f} :root[data-theme="light"] .ck-rankrow{background:#fff;border:1px solid var(--border)} :root[data-theme="light"] .ck-rankrow:hover{border-color:var(--border-2);background:var(--s1)} :root[data-theme="light"] .ck-rankrow.on{background:#15130f!important;color:#fff;border-color:#15130f} :root[data-theme="light"] .ck-rankrow.on .ck-rowname,:root[data-theme="light"] .ck-rankrow.on .ck-rowsub,:root[data-theme="light"] .ck-rankrow.on .ck-rowlbl{color:#fff} :root[data-theme="light"] .ck-rowmatch{color:#15130f!important} :root[data-theme="light"] .ck-rankrow.on .ck-rowmatch{color:#fff!important} :root[data-theme="light"] .ck-rowmatch.is-perfect{color:var(--accent-texte,var(--accent))!important} :root[data-theme="light"] .ck-rowsub,:root[data-theme="light"] .ck-rowlbl,:root[data-theme="light"] .ck-h,:root[data-theme="light"] .ck-tile-l,:root[data-theme="light"] .ck-comp-l{color:var(--muted)} :root[data-theme="light"] .ck-cat-dot{background:#15130f!important} :root[data-theme="light"] .ck-cat-sec{color:var(--text)} :root[data-theme="light"] .ck-bar{background:var(--s3)} :root[data-theme="light"] .ck-bar-f{background:#15130f} :root[data-theme="light"] .ck-tile{background:var(--s1);border:1px solid var(--border)} :root[data-theme="light"] .ck-tile-v,:root[data-theme="light"] .ck-comp-v{color:var(--text)} /* ── L'ecran de connexion ─────────────────────────────────── */ :root[data-theme="light"] .login-side-form{background:#fffdf9;border-right:1px solid var(--border)} :root[data-theme="light"] .login-side-hero{background:var(--s1);padding:64px} :root[data-theme="light"] .login-hero-title{font-size:clamp(2rem,3.4vw,3rem);line-height:1.1;letter-spacing:-.03em} :root[data-theme="light"] .login-hero-sub,:root[data-theme="light"] .login-sub{color:var(--muted);font-size:1rem} .login-choisir{position:relative;width:100%;aspect-ratio:16/9;margin:34px 0 22px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff} .login-choisir canvas{position:absolute;inset:0;width:100%;height:100%;display:block} .login-choisir-cap{position:absolute;left:18px;bottom:14px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted)} .login-demo-lien{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;color:var(--muted);cursor:pointer;text-decoration:none;font-weight:500} .login-demo-lien:hover{color:var(--text)} .login-demo-lien::before{content:"";width:0;height:0;border:5px solid transparent;border-left:8px solid currentColor;margin-left:2px} @media (prefers-reduced-motion:reduce){:root[data-theme="light"] .btn-primary:hover{transform:none}} /* ── Le rail, a la meme specificite que ses regles d'origine ─── */ @media(min-width:901px){ :root[data-theme="light"] #screen-admin > nav.nav,:root[data-theme="light"] #screen-client > nav.nav{background:#fffdf9!important;background-image:none!important;border-right:1px solid var(--border)} :root[data-theme="light"] #screen-admin > nav.nav .logo,:root[data-theme="light"] #screen-client > nav.nav .logo{background:transparent;width:38px;height:38px} :root[data-theme="light"] #screen-admin > nav.nav .nav-tab,:root[data-theme="light"] #screen-client > nav.nav .nav-tab{ font-family:var(--font-sans);font-size:13.5px;font-weight:500;letter-spacing:-.01em;color:var(--muted);min-height:38px} :root[data-theme="light"] #screen-admin >nav.nav .nav-tab:hover,:root[data-theme="light"] #screen-client >nav.nav .nav-tab:hover{background:var(--s1);color:var(--text)} :root[data-theme="light"] #screen-admin > nav.nav .nav-tab.on,:root[data-theme="light"] #screen-client > nav.nav .nav-tab.on{background:var(--s2);color:var(--text);font-weight:600} :root[data-theme="light"] #screen-admin > nav.nav .nav-sep,:root[data-theme="light"] #screen-client > nav.nav .nav-sep{background:var(--border)} } :root[data-theme="light"] .nav-right .icon-2d,:root[data-theme="light"] .nav-right .tour-replay .icon-2d{background:currentColor} :root[data-theme="light"] .sh-eyebrow,:root[data-theme="light"] .eyebrow,:root[data-theme="light"] .tour-step,:root[data-theme="light"] .sec-eyebrow{font-family:var(--font-sans)!important} /* Le cockpit etait verrouille en noir a coups de !important : en clair, il passe au blanc, avec la meme force. */ :root[data-theme="light"] .ck-id,:root[data-theme="light"] .ck-card{background:#fff!important;border-color:var(--border)!important;box-shadow:var(--shadow)!important;backdrop-filter:none} :root[data-theme="light"] .ck-rankrow{background:#fff!important;border-color:var(--border)!important;backdrop-filter:none} :root[data-theme="light"] .ck-rankrow:hover{background:var(--s1)!important;border-color:var(--border-2)!important} :root[data-theme="light"] .ck-rankrow.on{background:#15130f!important;border-color:#15130f!important;box-shadow:none!important} :root[data-theme="light"] .ck-tile{background:var(--s1)!important;border-color:var(--border)!important} :root[data-theme="light"] .ck-card svg{color:#15130f!important} :root[data-theme="light"] .ck-name{color:var(--text)} :root[data-theme="light"] .ck-h{font-family:var(--font-sans)!important;font-size:11px;font-weight:600;letter-spacing:.08em} :root[data-theme="light"] .ck-rowlbl{font-family:var(--font-sans)!important} :root[data-theme="light"] .demo-bar{background:#fff!important;border:1px solid var(--border)!important;box-shadow:var(--shadow-float)!important;color:var(--text)} :root[data-theme="light"] .demo-bar-lbl{color:var(--muted)} :root[data-theme="light"] .demo-bar select,:root[data-theme="light"] .demo-bar .inp{background:#fff;color:var(--text);border-color:var(--border-2)} :root[data-theme="light"] .ck-gauge [style*="color:#fff"]{color:var(--text)!important} :root[data-theme="light"] .ck-gauge circle[stroke="rgba(255,255,255,.08)"]{stroke:var(--s3)} :root[data-theme="light"] .ck-btn-primary{background:var(--text)!important;color:#fff!important;border-radius:8px;box-shadow:none;font-weight:500} :root[data-theme="light"] .ck-btn-primary:hover{background:#000!important} /* ── Epure : le clair en monochrome, une seule couleur pour signaler ────────── Les niveaux ne sont plus des pastilles pastel mais un chiffre en encre et une barre grise. Les radars, jauges et profils passent en encre. Rayons courts. */ :root[data-theme="light"]{--r:10px;--radius-lg:10px;--radius-xl:12px} :root[data-theme="light"] .ck-id,:root[data-theme="light"] .ck-card,:root[data-theme="light"] .card,:root[data-theme="light"] .profil-card,:root[data-theme="light"] .pool-stat{border-radius:10px!important} :root[data-theme="light"] .ck-rankrow{border-radius:8px!important} :root[data-theme="light"] .pool-td-compat-cell{background:#fff!important;color:var(--text)!important;border:1px solid var(--border)!important;border-radius:6px;font-weight:600;font-variant-numeric:tabular-nums;min-width:60px;padding:6px 10px 11px} :root[data-theme="light"] .pool-td-compat-cell::after{content:"";position:absolute;left:8px;right:8px;bottom:4px;height:3px;border-radius:2px;background:var(--s3)} :root[data-theme="light"] .pool-td-compat-cell::before{content:"";position:absolute;left:8px;bottom:4px;height:3px;border-radius:2px;background:#15130f;z-index:1;width:calc((100% - 16px) * var(--lv,0))} :root[data-theme="light"] .lv-4{--lv:1} :root[data-theme="light"] .lv-3{--lv:.72} :root[data-theme="light"] .lv-2{--lv:.5} :root[data-theme="light"] .lv-1{--lv:.25} :root[data-theme="light"] .pool-td-compat-cell.lv-1{color:var(--muted)!important} :root[data-theme="light"] .pool-td-compat-cell.is-best{border-color:var(--accent)!important;box-shadow:0 0 0 1px var(--accent)} :root[data-theme="light"] .pool-td-compat-cell.is-current{border-style:dashed!important;border-color:var(--border-2)!important} :root[data-theme="light"] .pool-table tbody tr:hover .pool-td-compat-cell{transform:none;filter:none} :root[data-theme="light"] .pool-legend-dot{border:1px solid transparent!important;background:var(--s3)!important;border-radius:3px} :root[data-theme="light"] .pool-legend-dot.lv-4{background:#15130f!important} :root[data-theme="light"] .pool-legend-dot.lv-3{background:#4b5563!important} :root[data-theme="light"] .pool-legend-dot.lv-2{background:#9aa3ae!important} :root[data-theme="light"] .pool-legend-dot.lv-1{background:#d9dee5!important} :root[data-theme="light"] .pool-legend{background:#fff;border:1px solid var(--border);border-radius:8px;color:var(--muted)} :root[data-theme="light"] .pool-table th[style*="color:"],:root[data-theme="light"] .stats-poste-title[style*="color:"]{color:var(--text)!important} :root[data-theme="light"] .pool-poste-bar{background:var(--border-2)!important} /* Radars : candidat en encre, cible en gris, libelles en gris moyen, pas de halo. */ :root[data-theme="light"] .ck-card svg polygon[style],:root[data-theme="light"] .profil-card-radar svg polygon[style]{stroke:#15130f!important;fill:rgba(11,13,18,.08)!important;filter:none!important} :root[data-theme="light"] .ck-card svg polygon[stroke="#e8edf7"],:root[data-theme="light"] .profil-card-radar svg polygon[stroke="#e8edf7"]{stroke:#c3cad3!important} :root[data-theme="light"] .ck-card svg circle[fill="#e8edf7"],:root[data-theme="light"] .profil-card-radar svg circle[fill="#e8edf7"]{fill:#c3cad3!important} :root[data-theme="light"] .ck-card svg circle[stroke],:root[data-theme="light"] .profil-card-radar svg circle[stroke]{stroke:#15130f!important} :root[data-theme="light"] .profil-card-radar svg circle[fill]:not([fill="#fff"]):not([fill="#e8edf7"]){fill:#15130f!important} :root[data-theme="light"] .ck-card svg text,:root[data-theme="light"] .profil-card-radar svg text{fill:var(--muted)!important;font-family:var(--font-sans)!important;font-weight:500!important} :root[data-theme="light"] .ck-card svg polygon[stroke-dasharray],:root[data-theme="light"] .profil-card-radar svg polygon[stroke-dasharray]{stroke:#c3cad3!important} /* La jauge : un anneau fin en encre, le chiffre en gras. */ :root[data-theme="light"] .ck-gauge circle[stroke="url(#adqGrad)"]{stroke:#15130f!important} :root[data-theme="light"] .ck-gauge svg{filter:none!important} :root[data-theme="light"] .ck-gauge .ring-num{font-weight:600;letter-spacing:-.03em} /* Profils ideaux : plus de couleur par famille ni par dimension. */ :root[data-theme="light"] .profils-cat-section,:root[data-theme="light"] .profil-card{--cat-color:#15130f} :root[data-theme="light"] .profil-card{border-top:1px solid var(--border)!important;box-shadow:var(--shadow)} :root[data-theme="light"] .profil-card-title{color:var(--text)!important;font-weight:600} :root[data-theme="light"] .profils-cat-title{color:var(--text);border-left:2px solid #15130f} :root[data-theme="light"] .profil-list-lbl{color:var(--muted)!important} :root[data-theme="light"] .profil-list-fill{background:#15130f!important} :root[data-theme="light"] .profil-list-bar{background:var(--s3)} :root[data-theme="light"] .profil-list-val{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums} /* Le cockpit : tuiles et libelles en gris, chiffres en encre, adequation en encre. */ :root[data-theme="light"] .ck-comp-v,:root[data-theme="light"] .ck-tile-v{color:var(--text)!important} :root[data-theme="light"] .ck-bar-f{background:#15130f!important} :root[data-theme="light"] .ck-bar-tick{background:var(--border-2)!important} :root[data-theme="light"] .ck-card [style*="color:#"]:not(.ring-num){color:var(--text)!important} :root[data-theme="light"] .ck-cat-sec{--cat-color:#15130f!important} :root[data-theme="light"] .ck-id-sub{color:var(--muted)!important} :root[data-theme="light"] .ck-rowmatch.is-perfect{color:#15130f!important} :root[data-theme="light"] .ck-rankrow.on .ck-rowmatch.is-perfect{color:#fff!important} :root[data-theme="light"] .ring-perfect{filter:none!important} :root[data-theme="light"] .ring-perfect.ring-num,:root[data-theme="light"] .ring-num{background:none!important;-webkit-text-fill-color:#15130f!important;color:#15130f!important;animation:none!important} :root[data-theme="light"] .pool-td-compat-cell.is-current{outline:none!important;box-shadow:none!important} :root[data-theme="light"] .pool-td-compat-cell.is-current.is-best{border-style:solid!important;border-color:var(--accent)!important;box-shadow:0 0 0 1px var(--accent)!important} /* La marque en clair : le meme logo, en version encre. */ :root[data-theme="light"] img.logo-icon,:root[data-theme="light"] img.login-logo-icon{content:url(/meritly-mark.svg)} /* La jauge : plus de disque tournant derriere, un anneau en encre sur piste creme. */ :root[data-theme="light"] .ck-gauge div[style*="conic-gradient"]{display:none!important} :root[data-theme="light"] .ck-gauge circle[stroke="rgba(255,255,255,.08)"]{stroke:var(--s3)!important} :root[data-theme="light"] .ck-gauge{filter:none!important} /* ════════════════════════════════════════════════════════════════════════════ REFONTE DE L'INTERFACE, 17 septembre 2026 Posee en fin de feuille : elle prend le pas sur tout ce qui precede, sans rien supprimer. Pour revenir en arriere, retirer ce bloc suffit. Sombre = « la salle de montage » : le prolongement du teaser et du site. Clair = « le parcours » : la retenue de Things, la chaleur et la progression de Duolingo, sans le bleu systeme ni le ton pour enfants. ════════════════════════════════════════════════════════════════════════════ */ /* ── Polices : celles du site et du film. Plus de Plus Jakarta, plus de mono. ── */ :root{ --font-sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --font-display:"Bricolage Grotesque","Instrument Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; --font-mono:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; } :root[data-theme="light"]{ --font-sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --font-display:"Bricolage Grotesque","Instrument Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; } body,body *:not(code):not(pre):not(kbd):not(.owl-svg):not(.owl-svg *){font-family:var(--font-sans)!important} body svg text{font-family:var(--font-sans)!important} body{font-variant-numeric:tabular-nums;letter-spacing:-.008em} /* Les titres de section posent une phrase : linéale grasse, comme sur le site. */ .sh-title,.login-hero-title,body h1,body h2{font-family:var(--font-display)!important;font-weight:700!important;letter-spacing:-.035em!important} .sh-title em,.sh-title span{font-weight:700!important} /* Ce qui etait en mono : meme police que le texte, chiffres alignes, espacement adouci. */ #pool-tooltip-floating.ptt-pct, #screen-client > nav.nav .nav-tab, .aifit-task-delai, .bareme-card-pts, .bareme-card-val, .ck-comp-v, .ck-email-input, .ck-h, .ck-id-meta, .ck-legend, .ck-rank, .ck-rank-head, .ck-rowlbl, .ck-rowmatch, .ck-tile-d, .ck-tile-l, .client-cand-scores, .cmodal-score-lbl, .cmodal-score-val, .cmodal-tab, .comp-pts, .compat-pct, .compat-val, .cv-langue-niv, .dim-pts, .disc-bar-value, .disc-target-delta, .djs-somme, .doc-choisi, .doc-meta, .doc-tete, .dr-disc-val, .dr-gauge-val, .dr-hero-label, .dr-hero-num, .dr-meta-val, .dr-num, .edit-info-lbl, .eq-hist-count, .eq-hist-stats strong, .eq-learn-decisions, .eq-learn-table td.eq-learn-curr, .eq-learn-table td.eq-learn-new, .eq-pct, .export-step-desc code, .gamif-lb-streak, .gamif-xp-txt, .ideal-row.val, .import-box.import-formats span, .kanban-card-compat, .kanban-card-score, .login-hero-eyebrow, .login-kpi-val, .modal-title, .nmr-sc, .onb-rally-detail-tete, .onb-rally-jeu-score, .onbqr-link-row input, .pool-filter-val, .pool-stat-val, .pool-td-compat, .pool-td-name-sub, .profil-list-val, .reg-compte, .reg-mono, .sh-eyebrow, .stat-lbl, .stats-poste-best-score, .stats-poste-chip-pct, .stats-poste-meta strong, .tour-step, .usage-card-pct, .usage-modal-head h3, /* Chiffres héros en italique + accent cyan IA sur la compatibilité */, .score-num, /* Ferme, /* L'echeance dit d'un coup d'oeil si le moment est passe : au-dela, /* Metadonnees et horodatages: Space Mono, /* Un dossier archive qu on affiche doit dire pourquoi il est la. */, .arc-badge, /* onglets : icône seule (texte masqué) */, #screen-admin > nav.nav .nav-tab, /* ══ LOT 1 (suite): libelle de section, cartes ══ */, /* Un libelle de section annonce, comme le veut le brief. Ce sont des, references, et elles doivent s'aligner a l'oeil. */, .dr-meta-key, et il porte une information reelle. */, .cf-eyebrow, filtre a la frappe. */, .djs-champ input, gris tertiaire, il ne crie pas. Space Mono, le pli doit dire son etat : c'est ce qui permet de ne pas l'ouvrir. */, .onb-pli-resume, le regard, neuf est perdu et le rapport ne se rattrape plus. */, .eton-quand, pas de la prose, pas de pastille rouge: c'est le titre juste en dessous qui porte le poids. */, .sh-eyebrow, pas l'intitule de la colonne. */, .kanban-col-title, sans crier: c'est la carte du, candidat qui doit retenir le regard, table th, tableaux{font-variant-numeric:tabular-nums;letter-spacing:.02em!important} /* ── Plus de décor : ni halo rouge, ni grille technique, ni blobs animés ── */ body{background-image:none!important} body::before,body::after,body > .aurora-blob-3,.aurora-blob-3, .sh::before,.sh::after, .login-side-hero::before,.login-side-hero::after,.login-video-cover::before{display:none!important} /* ── Les jauges : un anneau et un chiffre, sans lueur ni dégradé tournant ── */ .ck-gauge{filter:none!important} .ck-gauge div[style*="conic-gradient"]{display:none!important} .ring-perfect{filter:none!important} .ring-perfect.ring-num,.ring-num{background:none!important;-webkit-text-fill-color:var(--text)!important;color:var(--text)!important;animation:none!important;font-family:var(--font-display)!important;font-weight:700!important} /* ════ SOMBRE, la salle de montage : noir profond, un seul rouge ════ */ :root,:root[data-theme="dark"]{ --bg:#0b0b0d; --s1:#111114; --s2:#16161a; --s3:#1e1e22; --s1-rgb:17,17,20; --border-rgb:38,38,43; --border:#1f1f24; --border-2:#2a2a30; --text:#f4f1ec; --muted:#a4a1a0; --soft:#8b8b90; --accent:#e5202a; --brand-500:#e5202a; --brand-600:#c41a23; --hero-gradient:#0b0b0d; --shadow-md:0 10px 30px rgba(0,0,0,.45); --shadow-float:0 14px 36px rgba(0,0,0,.5); } /* ════ CLAIR, le parcours : toile chaude, cartes blanches, encre chaude ════ */ :root[data-theme="light"]{ --bg:#faf8f4; --s1:#ffffff; --s2:#f4f1ea; --s3:#e8e3da; --s1-rgb:255,255,255; --border-rgb:232,227,218; --border:#e8e3da; --border-2:#d9d1c4; --text:#1f1b16; --muted:#4f4841; --soft:#7d766d; --accent:#e5202a; --brand-500:#e5202a; --brand-bg:#fbe9e6; --brand-border:#f3c3bd; --hero-gradient:#faf8f4; --shadow:0 1px 2px rgba(60,40,20,.05),0 1px 3px rgba(60,40,20,.03); --shadow-md:0 10px 28px rgba(60,40,20,.08),0 1px 2px rgba(60,40,20,.05); --shadow-float:0 16px 40px rgba(60,40,20,.12),0 2px 6px rgba(60,40,20,.05); } :root[data-theme="light"] #screen-login{--bg:#faf8f4;--s1:#ffffff;--s2:#f4f1ea;--s3:#e8e3da;--border:#e8e3da;--text:#1f1b16;--muted:#4f4841;--soft:#7d766d} /* En clair, les cartes se posent sur la toile par une ombre douce plutôt qu'un filet dur. */ :root[data-theme="light"] .ck-card,:root[data-theme="light"] .ck-rankrow,:root[data-theme="light"] .offre-card, :root[data-theme="light"] .kanban-card,:root[data-theme="light"] .eq-kpi-card{box-shadow:var(--shadow)} :root[data-theme="light"] .ck-rankrow.on{box-shadow:var(--shadow-md)} /* ── Le bandeau « Secteur de démo » ── Fixé en haut au centre, il masquait les titres de section (Équité notamment). Il descend en bas de l'écran, et son menu s'ouvre vers le haut. */ .demo-bar{top:auto!important;bottom:18px!important} .demo-dd-menu{top:auto!important;bottom:calc(100% + 9px)!important;transform-origin:bottom center} /* En clair, le thème ne stylait que l'ancien sélecteur natif : le menu sur mesure gardait un texte blanc sur fond blanc. */ :root[data-theme="light"] .demo-dd-trigger{background:var(--s2)!important;border-color:var(--border-2)!important;color:var(--text)!important} :root[data-theme="light"] .demo-dd-trigger:hover{border-color:var(--accent)!important} :root[data-theme="light"] .demo-dd-caret{background:var(--soft)!important} :root[data-theme="light"] .demo-dd-menu{background:#fff!important;border-color:var(--border)!important;box-shadow:var(--shadow-float)!important} :root[data-theme="light"] .demo-dd-opt{color:var(--text)!important} :root[data-theme="light"] .demo-dd-opt:hover{background:var(--s2)!important;color:var(--text)!important} /* ── Refonte, tour 1 : le rail, comme dans le prototype ── Le mot-marque revient a cote de la marque, en Source Serif. Les onglets sont des lignes sobres : icone, libelle, fond leger au survol, barre rouge a gauche quand l'onglet est actif. Plus de losange, plus de pastille rouge en tete. */ #screen-admin > nav.nav,#screen-client > nav.nav{ background:var(--bg)!important;border-right:1px solid var(--border)!important; padding:22px 14px 16px!important;gap:2px!important} :root[data-theme="light"] #screen-admin > nav.nav,:root[data-theme="light"] #screen-client > nav.nav{background:var(--s2)!important} #screen-admin > nav.nav .logo,#screen-client > nav.nav .logo{ width:auto!important;height:auto!important;margin:0 0 20px!important;padding:2px 10px!important; background:transparent!important;border-radius:0!important;justify-content:flex-start!important;gap:10px!important} #screen-admin > nav.nav .logo .logo-icon,#screen-client > nav.nav .logo .logo-icon{ width:26px!important;height:26px!important;filter:none!important;transform:none!important} #screen-admin > nav.nav .logo:hover .logo-icon{transform:none!important} #screen-admin > nav.nav .logo .logo-text,#screen-client > nav.nav .logo .logo-text{ display:block!important;font-family:"Source Serif 4",Georgia,serif!important;font-weight:600!important; font-size:21px!important;letter-spacing:-.025em!important;color:var(--text)!important} #screen-admin > nav.nav .nav-tab,#screen-client > nav.nav .nav-tab{ min-height:38px!important;padding:8px 10px!important;border-radius:8px!important;gap:11px!important; font-family:var(--font-sans)!important;font-size:14px!important;font-weight:500!important; letter-spacing:-.012em!important;text-transform:none!important;color:var(--muted)!important; background:transparent!important;position:relative} #screen-admin > nav.nav .nav-tab::before,#screen-client > nav.nav .nav-tab::before{opacity:.8;width:17px!important;height:17px!important;flex-basis:17px!important} #screen-admin > nav.nav .nav-tab:hover,#screen-client > nav.nav .nav-tab:hover{background:var(--s1)!important;color:var(--text)!important} #screen-admin > nav.nav .nav-tab.on,#screen-client > nav.nav .nav-tab.on{ background:var(--s2)!important;color:var(--text)!important;font-weight:500!important; box-shadow:inset 2px 0 0 var(--accent)!important} #screen-admin > nav.nav .nav-tab.on::before,#screen-client > nav.nav .nav-tab.on::before{opacity:1} #screen-admin > nav.nav .nav-tab.on::after,#screen-client > nav.nav .nav-tab.on::after{display:none!important} #screen-admin > nav.nav .nav-sep,#screen-client > nav.nav .nav-sep{margin:12px 8px!important;background:var(--border)!important} :root[data-theme="light"] #screen-admin > nav.nav .nav-tab.on,:root[data-theme="light"] #screen-client > nav.nav .nav-tab.on{background:var(--s1)!important;box-shadow:inset 2px 0 0 var(--accent),var(--shadow)!important} /* Le bas du rail : les outils du compte, sobres. */ #screen-admin > nav.nav .tour-replay,#screen-client > nav.nav .tour-replay{ background:transparent!important;border-color:transparent!important;color:var(--muted)!important;border-radius:8px!important} #screen-admin > nav.nav .tour-replay:hover{background:var(--s1)!important;color:var(--text)!important} #screen-admin > nav.nav .theme-toggle,#screen-client > nav.nav .theme-toggle{ background:var(--s1)!important;border:1px solid var(--border)!important;border-radius:8px!important;box-shadow:none!important} #screen-admin > nav.nav .theme-toggle:hover{transform:none!important;color:var(--text)!important;border-color:var(--border-2)!important} #screen-admin > nav.nav .usage-badge,#screen-client > nav.nav .usage-badge{background:var(--s1)!important;border-color:var(--border)!important;border-radius:8px!important} #screen-admin > nav.nav .nav-level::before{background:var(--bg)!important} #screen-admin > nav.nav .user-menu-btn,#screen-client > nav.nav .user-menu-btn{background:var(--s1)!important;border-color:var(--border)!important} /* ── Refonte, tour 2 : la liste des candidats et le dossier ouvert ── Des lignes sobres : avatar, nom, un sous-titre, le score en chiffre. Plus de numero de rang, plus de flou, plus de degrade, plus de mono. Le dossier a droite est une carte plate, ses jauges sont des traits. */ .ck-rank-head{font-family:var(--font-sans)!important;font-size:12px!important;font-weight:600!important; letter-spacing:.02em!important;text-transform:none!important;color:var(--soft)!important;padding:8px 4px 6px!important} .ck-rankrow{gap:14px!important;padding:12px 14px!important;border-radius:10px!important; background:var(--s1)!important;border:1px solid var(--border)!important; backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important; transition:border-color .15s ease!important;transform:none!important} .ck-rankrow:hover{border-color:var(--border-2)!important;transform:none!important;background:var(--s1)!important} .ck-rankrow.on{background:var(--s1)!important;border-color:var(--accent)!important;box-shadow:none!important} .ck-rank{display:none!important} .ck-rowav .avatar,.ck-rowav .avatar-sm{width:34px!important;height:34px!important;box-shadow:none!important;border:1px solid var(--border)!important} .ck-rowname{font-size:14.5px!important;font-weight:600!important;letter-spacing:-.012em!important;color:var(--text)!important} .ck-rowsub{font-size:12.5px!important;color:var(--soft)!important;margin-top:2px!important} .ck-rowmatch{font-family:var(--font-display)!important;font-size:20px!important;font-weight:700!important; letter-spacing:-.02em!important;line-height:1!important;color:var(--text)!important; background:none!important;-webkit-text-fill-color:var(--text)!important;animation:none!important} .ck-rankrow.on .ck-rowmatch{color:var(--text)!important;-webkit-text-fill-color:var(--text)!important} .ck-rowlbl{font-family:var(--font-sans)!important;font-size:10.5px!important;color:var(--soft)!important;letter-spacing:.02em!important;text-transform:none!important} :root[data-theme="light"] .ck-rankrow{background:#fff!important;box-shadow:var(--shadow)!important} :root[data-theme="light"] .ck-rankrow.on{background:#fff!important;border-color:var(--accent)!important;box-shadow:var(--shadow-md)!important;color:var(--text)!important} :root[data-theme="light"] .ck-rankrow.on .ck-rowname,:root[data-theme="light"] .ck-rankrow.on .ck-rowmatch, :root[data-theme="light"] .ck-rankrow.on .ck-rowmatch.is-perfect{color:var(--text)!important;-webkit-text-fill-color:var(--text)!important} :root[data-theme="light"] .ck-rankrow.on .ck-rowsub,:root[data-theme="light"] .ck-rankrow.on .ck-rowlbl{color:var(--soft)!important} /* Le dossier ouvert : une carte plate, un titre en linéale grasse, des traits. */ .ck-id,.ck-card{background:var(--s1)!important;border:1px solid var(--border)!important;border-radius:14px!important; backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important} :root[data-theme="light"] .ck-id,:root[data-theme="light"] .ck-card{box-shadow:var(--shadow)!important} .ck-name{font-family:var(--font-display)!important;font-size:22px!important;font-weight:700!important;letter-spacing:-.03em!important} .ck-id-sub{color:var(--muted)!important;font-size:13.5px!important} .ck-id-meta{font-family:var(--font-sans)!important;font-size:12.5px!important;color:var(--soft)!important;letter-spacing:0!important} .ck-h{font-family:var(--font-sans)!important;font-size:13px!important;font-weight:600!important;letter-spacing:0!important; text-transform:none!important;color:var(--soft)!important;margin-bottom:12px!important} .ck-btn-ghost{background:var(--s2)!important;color:var(--text)!important;border:1px solid var(--border-2)!important; border-radius:8px!important;padding:9px 14px!important;font:500 13.5px var(--font-sans)!important;box-shadow:none!important} .ck-btn-ghost:hover{border-color:var(--soft)!important;background:var(--s2)!important;transform:none!important} .ck-tile{background:transparent!important;border:1px solid var(--border)!important;border-radius:9px!important;padding:10px 6px!important} .ck-tile-l{font-family:var(--font-sans)!important;font-size:11px!important;letter-spacing:0!important;text-transform:none!important;color:var(--soft)!important} .ck-tile-v{font-family:var(--font-display)!important;font-size:17px!important;font-weight:700!important;letter-spacing:-.02em!important} .ck-tile-d{font-family:var(--font-sans)!important;font-size:11px!important} .ck-comp{gap:12px!important;margin-bottom:11px!important} .ck-comp-l{font-size:13.5px!important;color:var(--muted)!important;font-weight:500!important} .ck-comp-v{font-family:var(--font-sans)!important;font-size:13px!important;font-weight:600!important;color:var(--text)!important} .ck-bar{height:4px!important;border-radius:2px!important;background:var(--s3)!important} .ck-bar-f{border-radius:2px!important;background:var(--muted)!important;background-image:none!important} :root[data-theme="light"] .ck-bar-f{background:var(--text)!important} .ck-bar-tick{width:1px!important;top:-4px!important;bottom:-4px!important;background:var(--soft)!important;opacity:.7} .ck-legend{font-family:var(--font-sans)!important;font-size:11.5px!important;letter-spacing:0!important;text-transform:none!important;border-top-color:var(--border)!important;color:var(--soft)!important} .ck-legend-tick{background:var(--soft)!important} .ck-card svg text{fill:var(--soft)!important;font-family:var(--font-sans)!important} /* L'onglet Chatbot porte deja l'icone de Meri : plus d'icone generique devant. */ #screen-admin > nav.nav .nav-tab[onclick*="chatbot"]::before{display:none!important} /* ── Refonte, tour 3 : la jauge et les avatars ── Le chiffre porte l'information, l'anneau ne fait que l'accompagner. Les avatars sont neutres : une couleur par personne n'apportait rien et bruitait la liste. */ .adq-num{font-family:var(--font-display);font-size:38px;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--text)} .adq-num .ring-num{font-family:var(--font-display)!important;font-weight:700!important} .adq-lbl{font-family:var(--font-sans);font-size:11.5px;color:var(--soft);margin-top:4px;letter-spacing:0;text-transform:none} .avatar{background:var(--s3)!important;color:var(--text)!important;font-family:var(--font-sans)!important;font-weight:600!important; text-transform:uppercase!important;box-shadow:none!important;border:1px solid var(--border)!important} :root[data-theme="light"] .avatar{background:var(--s2)!important} .avatar img{width:100%;height:100%;object-fit:cover} /* ── Refonte, tour 4 : le jalon avec Meri, en tete de la liste des candidats ── Un bandeau calme. Rouge pale quand tout est lu, neutre sinon. Meri est posee a gauche, sans balancement : elle accompagne, elle ne fait pas le spectacle. */ .jalon{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:14px; background:var(--s1);border:1px solid var(--border);margin:0 0 22px} .jalon.est-complet{background:var(--brand-bg);border-color:transparent} :root[data-theme="light"] .jalon{box-shadow:var(--shadow)} :root[data-theme="light"] .jalon.est-complet{box-shadow:none} .jalon-meri{width:58px;height:58px;flex:none;display:flex;align-items:flex-end;justify-content:center;overflow:visible} .jalon-meri .meri-slot{margin:0!important;width:58px} .jalon-meri .owl-svg{width:56px!important;animation:none!important} .jalon-meri .owl-svg.rise{opacity:1!important;transform:none!important;animation:none!important} .jalon-txt{min-width:0} .jalon-txt b{display:block;font-weight:600;font-size:14.5px;color:var(--text);letter-spacing:-.012em} .jalon-txt span{display:block;font-size:13px;color:var(--muted);margin-top:1px} .jalon-btn{margin-left:auto;flex:none;height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--border-2); background:var(--s2);color:var(--text);font:500 13.5px var(--font-sans);cursor:pointer;transition:border-color .15s ease} .jalon-btn:hover{border-color:var(--soft)} .jalon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* ── Refonte, tour 5 : le parcours du recrutement, par poste ── Cinq etapes, un trait fin au-dessus de chacune. Vert quand c'est fait, rouge pour l'etape en cours, gris pour la suite. La progression de Duolingo, la retenue de Things. */ .parcours{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:4px 0 22px} .etape{padding:10px 0 0;border-top:2px solid var(--border-2);color:var(--soft);font-size:12.5px;line-height:1.35} .etape b{display:block;color:var(--text);font-weight:600;font-size:13px;margin-bottom:1px;letter-spacing:-.01em} .etape.fait{border-top-color:var(--success)} .etape.fait b::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--success);margin-right:7px;vertical-align:2px} .etape.cours{border-top-color:var(--accent)} .etape.cours b{color:var(--accent-texte,var(--accent))} @media (max-width:900px){.parcours{grid-template-columns:1fr 1fr}} /* ── Refonte, tour 6 : le dossier ouvert, cinq dimensions en traits et la raison, écrite ── Plus de radar : cinq lignes, un trait par dimension, un repère pour le niveau attendu, le trait rouge pour la dimension la plus forte. Dessous, ce que l'IA a lu, en clair. */ .ck-dims{display:flex;flex-direction:column;gap:10px;margin:2px 0 0} .ck-dim{display:grid;grid-template-columns:112px 1fr 44px;gap:12px;align-items:center;font-size:13.5px} .ck-dim .l{color:var(--muted);font-weight:500} .ck-dim .b{position:relative;height:4px;border-radius:2px;background:var(--s3);overflow:visible} .ck-dim .b i{display:block;height:100%;border-radius:2px;background:var(--text);transition:width .4s cubic-bezier(.22,.61,.36,1)} .ck-dim .b i.acc{background:var(--accent)} .ck-dim .b em{position:absolute;top:-4px;bottom:-4px;width:1px;background:var(--soft);opacity:.7} .ck-dim .v{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)} .ck-dim .v small{font-size:11px;font-weight:500;color:var(--soft)} .ck-dim.est-vide .v{font-size:11.5px;font-weight:500;color:var(--soft);white-space:nowrap;text-align:left;grid-column:2/4} .ck-dim.est-vide .b{display:none} .ck-raison{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)} .ck-raison h3{font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--soft);margin:0 0 8px;letter-spacing:0} .ck-raison p{font-size:14px;color:var(--muted);line-height:1.55;margin:0} .ck-raison p.vide{color:var(--soft);margin-bottom:12px} .ck-marq{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px} .ck-marq span{font-size:12px;line-height:1.35;padding:3px 9px;border-radius:999px;border:1px solid var(--border-2);color:var(--muted);max-width:100%} .ck-marq span.p{border-color:var(--success);color:var(--success)} .ck-marq span.d{border-color:#C79A4E;color:#C79A4E} :root[data-theme="light"] .ck-raison p{color:var(--text)} :root[data-theme="light"] .ck-marq span.d{border-color:#9A6B1F;color:#9A6B1F} /* ── Refonte, tour 7 : le mot-marque en Source Serif sur l'écran de connexion et le rail client ── Le mark rouge à quatre points est déjà là (clair sur sombre, encre sur clair) ; le mot suit désormais la même lettre que le site et le rail admin. */ .login-logo{font-family:"Source Serif 4",Georgia,serif!important;font-weight:600!important;font-size:1.7rem!important;letter-spacing:-.025em!important;gap:9px!important} .login-logo .login-logo-text{font-family:"Source Serif 4",Georgia,serif!important} .login-logo:hover .login-logo-icon{transform:none!important} .login-sub{font-size:.9rem!important;color:var(--soft)!important;margin-bottom:28px!important} .login-hero-eyebrow{font-family:var(--font-sans)!important;font-size:12.5px!important;letter-spacing:0!important;text-transform:none!important} .login-hero-title{font-family:var(--font-display)!important;font-weight:700!important;letter-spacing:-.04em!important} /* ── Refonte, tour 9 : la carte Meri qui accompagne, sous le dossier ouvert ── Une chouette, une phrase, deux liens. Elle n'apparait que si elle a quelque chose a dire. */ .meri-ck{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;padding:12px 14px;margin-top:16px; border-radius:14px;border:1px solid var(--border);background:var(--s1)} :root[data-theme="light"] .meri-ck{background:#fff;box-shadow:var(--shadow)} .meri-ck-owl{width:64px;height:64px;display:flex;align-items:flex-end;justify-content:center;overflow:visible} .meri-ck-owl .owl-svg{width:64px!important;height:auto!important;animation:none!important} .meri-ck-owl .owl-svg.rise{opacity:1!important;transform:none!important} .meri-ck p{font-size:13.5px;color:var(--muted);line-height:1.45;margin:0} .meri-ck p b{color:var(--text);font-weight:600} .meri-ck-lien{margin-top:6px;display:inline-flex;gap:14px} .meri-ck-lien button{background:none;border:0;padding:0;font:600 13px var(--font-sans);color:var(--accent-texte,var(--accent));cursor:pointer} .meri-ck-lien button.doux{color:var(--soft);font-weight:500} .meri-ck-lien button:hover{text-decoration:underline} .meri-ck-lien button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} /* ── Refonte, tour 10 : l'en-tete d'ecran, un titre-phrase ── Un titre en Bricolage a 30 px, une phrase d'etat en dessous, plus de mot en rouge, plus de filet ni de trait sous l'en-tete : la page commence par une phrase, pas par un bandeau. */ .sh{margin-bottom:26px!important;padding-bottom:0!important;border-bottom:0!important;gap:24px!important;align-items:flex-end!important} .sh::after{display:none!important} .sh-left{gap:6px!important} .sh-eyebrow{font-family:var(--font-sans)!important;font-size:12.5px!important;letter-spacing:0!important;text-transform:none!important; font-weight:500!important;color:var(--soft)!important;background:transparent!important;box-shadow:none!important;transform:none!important;padding:0!important;margin-bottom:2px} .sh-eyebrow:hover{background:transparent!important;transform:none!important} .sh h2,.sh h2.sh-title{font-family:var(--font-display)!important;font-weight:700!important;font-size:30px!important;line-height:1.15!important; letter-spacing:-.03em!important;color:var(--text)!important;text-wrap:balance} .sh h2 em,.sh h2.sh-title em{font-style:normal!important;color:inherit!important;font-weight:inherit!important;text-shadow:none!important;margin:0!important} .sh-sub{font-family:var(--font-sans)!important;font-size:15px!important;line-height:1.5!important;color:var(--soft)!important;max-width:640px!important;margin:0!important;font-weight:400!important} @media (max-width:600px){.sh h2,.sh h2.sh-title{font-size:24px!important}} /* ── Refonte, tour 11 : l'ecran Onboarding, les recrues en lignes ── Avatar, nom, la phase en cours en une ligne, un trait de progression sur une colonne fixe, le compte a droite. Vert quand ca avance, rouge quand ca prend du retard. */ .onb-card{border-radius:12px!important;padding:14px 16px!important;box-shadow:none!important} :root[data-theme="light"] .onb-card{background:#fff!important;box-shadow:var(--shadow)!important} .onb-card-top{display:grid!important;grid-template-columns:38px 1fr auto;gap:16px!important;align-items:center!important} .onb-card-av .avatar,.onb-card-av .avatar-sm{width:38px!important;height:38px!important;font-size:13px!important} .onb-card-id{min-width:0} .onb-card-name{font-size:15px!important;font-weight:600!important;letter-spacing:-.012em!important} .onb-card-poste{font-size:13px!important;color:var(--muted)!important;margin-top:1px!important} .onb-card-phase{font-size:12px;color:var(--soft);margin-top:3px} .onb-card-progress{gap:16px!important;min-width:0!important} .onb-card-progress .ud-progress-bar{width:220px!important;height:6px!important;border-radius:3px!important;background:var(--s3)!important} .onb-card-progress .ud-progress-fill{background:var(--success)!important;border-radius:3px!important} .onb-card-progress .ud-progress-fill.en-retard{background:var(--accent)!important} .onb-progress-pct{font-size:15px!important;font-weight:600!important;color:var(--text)!important;min-width:44px!important;font-variant-numeric:tabular-nums} .onb-progress-pct small{font-size:12px;font-weight:500;color:var(--soft)} .onb-card .onb-chevron{color:var(--soft)} @media (max-width:900px){.onb-card-top{grid-template-columns:38px 1fr}.onb-card-progress{grid-column:2}.onb-card-progress .ud-progress-bar{width:100%!important}} /* ── Refonte, tour 12 : la barre de filtres de l'ecran Candidats ── Des puces sur une ligne, la recherche a droite, les cases a cocher et les outils en dessous, plus discrets. La legende du radar est partie avec le radar. */ #screen-admin .filter-bar{gap:8px!important;margin:0 0 22px!important;align-items:center!important} #screen-admin .filter-bar select{appearance:none;-webkit-appearance:none;background:transparent!important;border:1px solid var(--border-2)!important;border-radius:999px!important; padding:7px 30px 7px 13px!important;font:500 13px var(--font-sans)!important;color:var(--muted)!important;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='%23888' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")!important; background-repeat:no-repeat!important;background-position:right 11px center!important} #screen-admin .filter-bar select:hover{border-color:var(--soft)!important;color:var(--text)!important} #screen-admin .filter-bar select:focus{border-color:var(--accent)!important;outline:none;box-shadow:none!important} #screen-admin .filter-bar .search-wrap{order:10;margin-left:auto;flex:0 1 260px!important;min-width:200px!important;max-width:300px!important} #screen-admin .filter-bar .search-wrap input{background:var(--s1)!important;border:1px solid var(--border)!important;border-radius:999px!important; padding:7px 12px 7px 32px!important;font:400 13px var(--font-sans)!important;color:var(--text)!important;min-width:0!important} #screen-admin .filter-bar .search-wrap input:focus{border-color:var(--accent)!important;box-shadow:none!important} #screen-admin .filter-bar > div[style*="gap:16px"]{order:20;flex-basis:100%!important;padding-top:4px} #screen-admin .filter-bar .filter-checkbox{font-size:12.5px!important;color:var(--soft)!important} #screen-admin .filter-bar .filter-checkbox:hover{color:var(--text)!important} #screen-admin .filter-bar .view-toggle{order:21;margin-left:0!important;border-radius:999px!important;border-color:var(--border-2)!important} #screen-admin .filter-bar .view-btn{padding:6px 13px!important;font:500 13px var(--font-sans)!important;color:var(--muted)!important} #screen-admin .filter-bar .view-btn.on{background:var(--text)!important;color:var(--bg)!important} #screen-admin .filter-bar > .btn-sm{order:22;background:transparent!important;border:1px solid var(--border-2)!important;border-radius:999px!important; padding:6px 13px!important;font:500 13px var(--font-sans)!important;color:var(--muted)!important;box-shadow:none!important} #screen-admin .filter-bar > .btn-sm:hover{border-color:var(--soft)!important;color:var(--text)!important;transform:none!important} #screen-admin .filter-bar > .btn-sm#btn-batch-analyze{margin-left:auto;color:var(--accent-texte,var(--accent))!important;border-color:var(--accent)!important} #screen-admin .filter-bar > .btn-sm .icon-2d{width:13px!important;height:13px!important;opacity:.8} #screen-admin .legend[hidden]{display:none!important} #screen-admin .filter-bar .filter-checkbox input[type="checkbox"]{accent-color:var(--accent);width:14px;height:14px;margin:0;cursor:pointer} /* ── Refonte, tour 13 : la fiche detail, en-tete propre ── Le bouton de fermeture retrouve sa place (sa regle etait cassee), les deux actions sous l'en-tete se rangent sur une ligne, plus de grands vides. */ .cmodal-close{background:var(--s2)!important;border:1px solid var(--border)!important;border-radius:8px!important;width:34px!important;height:34px!important;color:var(--muted)!important} .cmodal-close:hover{background:var(--s3)!important;color:var(--text)!important} #cmodal-edit-info,#cmodal-completion-link{display:inline-block;vertical-align:top;margin:0 8px 16px 0;padding:0;min-height:0} #cmodal-edit-info:empty,#cmodal-completion-link:empty{display:none} #cmodal-edit-info > .btn-sm,#cmodal-completion-link .btn-sm{margin-top:0!important} .cmodal-content{background:var(--s1)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:1px solid var(--border)!important;box-shadow:0 30px 80px rgba(0,0,0,.45)!important} :root[data-theme="light"] .cmodal-content{background:#fff!important;box-shadow:0 30px 80px rgba(31,27,22,.18)!important} #cmodal-edit-info:not(:empty),#cmodal-completion-link:not(:empty){display:inline-block!important} .cmodal-actions-ligne{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 18px} .cmodal-actions-ligne #cmodal-edit-info,.cmodal-actions-ligne #cmodal-completion-link{margin:0!important} .cmodal-actions-ligne .btn-sm{margin-top:0!important} /* ── Refonte, tour 14 : l'ecran Import, plus de champ fichier natif ── Le champ des lettres de motivation se cache, son libelle devient le bouton ; la liste des fichiers choisis est deja ecrite par le JS (#lmFilesLabel). La zone de depot reste centree. */ #lmPdfFiles{display:none!important} label[for="lmPdfFiles"]{display:inline-flex!important;align-items:center;gap:8px;padding:7px 13px;border:1px solid var(--border-2);border-radius:999px; font:500 13px var(--font-sans)!important;color:var(--muted)!important;background:transparent;cursor:pointer;transition:border-color .15s ease,color .15s ease} label[for="lmPdfFiles"]:hover{border-color:var(--soft);color:var(--text)!important} label[for="lmPdfFiles"]:focus-within,label[for="lmPdfFiles"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px} #lmFilesLabel{font-size:12.5px!important;color:var(--soft)!important;margin-top:8px!important} .import-box{border-radius:14px!important;transform:none!important;box-shadow:none!important} .import-box:hover,.import-box.drag{transform:none!important;box-shadow:none!important} .import-box h3{font-family:var(--font-display)!important;font-size:18px!important;font-weight:700!important;letter-spacing:-.02em!important;text-align:center!important;display:block!important;width:auto!important;margin:0 0 6px!important} .import-box p{text-align:center!important} /* ── Refonte, tour 15 : humaniser ── Retour de l'utilisateur sur les captures : « trop IA, trop homogene gris-noir, on doit etre a l'aise et tout comprendre, plus d'espace, rien de complexe ». Le clair devient le theme par defaut. Plus d'air, des mots simples, une seule couleur d'accent : plus de bleu par categorie ni de couleur par dimension. */ /* L'espace. La page respire, la lecture tient dans 1140 px. */ .panel{max-width:1140px!important;padding:44px 40px 100px!important} @media (max-width:900px){.panel{padding:28px 18px 84px!important}} body{font-size:15.5px;line-height:1.5} .sh{margin-bottom:36px!important} .sh h2,.sh h2.sh-title{font-size:32px!important} .sh-sub{font-size:15.5px!important;max-width:60ch!important;line-height:1.55!important} .sh-right{gap:10px!important} /* Le rail, en clair : blanc casse, onglets un peu plus grands. */ :root[data-theme="light"] #screen-admin > nav.nav,:root[data-theme="light"] #screen-client > nav.nav{background:#fcfbf8!important} #screen-admin > nav.nav .nav-tab,#screen-client > nav.nav .nav-tab{min-height:40px!important;font-size:14.5px!important;padding:9px 12px!important;gap:12px!important} /* La liste des candidats : des lignes plus hautes, un chiffre et un mot. */ .ck-rank-head{padding:10px 6px 10px!important;font-size:12.5px!important;color:var(--soft)!important} .ck-rankrow{padding:14px 16px!important;gap:16px!important;border-radius:14px!important;margin-bottom:10px!important} .ck-rowav .avatar,.ck-rowav .avatar-sm{width:38px!important;height:38px!important} .ck-rowname{font-size:15px!important} .ck-rowsub{font-size:13px!important} .ck-rowmatch{font-size:22px!important} .ck-rowlbl{text-transform:none!important;letter-spacing:0!important;font-size:11.5px!important} .ck-rowmatch + .ck-rowlbl{margin-top:2px} .cockpit-grid{gap:20px!important} .ck-row2{gap:18px!important} /* Le dossier ouvert : cartes plus larges, en-tetes en phrase, plus de tag en capitales. */ .ck-id,.ck-card{padding:24px 26px!important;border-radius:18px!important} .ck-name{font-size:24px!important} .ck-h{font-size:14px!important;margin-bottom:16px!important} .ck-h span[style*="letter-spacing:.1em"],.ck-h span[style*="letter-spacing: .1em"]{display:none!important} .ck-card [style*="text-transform:uppercase"],.cmodal-content [style*="text-transform:uppercase"],.ck-card [style*="text-transform: uppercase"]{ text-transform:none!important;letter-spacing:0!important;font-size:11.5px!important;color:var(--soft)!important} .ck-dims{gap:12px!important} .ck-dim{font-size:14px!important;grid-template-columns:118px 1fr 48px!important} .ck-raison h3{font-size:14px!important} .ck-raison p{font-size:15px!important;line-height:1.55!important} .ck-marq span{font-size:12.5px!important;padding:4px 11px!important} .ck-comp{gap:14px!important;margin-bottom:14px!important} .ck-comp-l{font-size:14px!important} .ck-btn-primary{border-radius:999px!important;padding:10px 18px!important;font-size:14px!important} .ck-btn-ghost{border-radius:999px!important} /* Les avatars : une teinte chaude, pas un disque gris. */ :root[data-theme="light"] .avatar,:root[data-theme="light"] .avatar-sm,:root[data-theme="light"] .avatar-lg{ background:#f3e9dc!important;color:#7a4b2a!important;border-color:#eadfce!important} :root[data-theme="light"] .ck-avatar .avatar-lg{background:#f3e9dc!important} /* Les postes et leurs categories : plus de bleu, une seule encre. */ .poste-label{color:var(--text)!important;font-size:15.5px!important;padding:12px 0 14px!important;font-weight:600!important} .poste-label [style*="background"]{background:var(--s3)!important;border-radius:6px!important} .poste-label .poste-cnt{color:var(--soft)!important;font-weight:500!important;font-size:13px!important} .parcours{margin:10px 0 24px!important} /* Le bareme : la meme carte pour les cinq dimensions, sans bandeau de couleur. */ .bareme-card{--dim-color:var(--text);border-top:1px solid var(--border)!important;padding:24px!important;border-radius:16px!important;box-shadow:none!important} :root[data-theme="light"] .bareme-card{box-shadow:var(--shadow)!important} .bareme-card-head{color:var(--muted)!important;margin-bottom:16px!important} .bareme-card-title{font-size:16px!important} .bareme-card-pts{background:var(--s2)!important;color:var(--muted)!important;border-radius:999px!important;font-size:12px!important;padding:3px 10px!important} .bareme-card-val{color:var(--text)!important;font-size:13.5px!important} .bareme-card-rows > li,.bareme-card-rows > div{padding:9px 0!important;font-size:14px!important} /* Les profils ideaux : une carte blanche, un titre en encre, des traits d'une seule couleur. */ .profil-card{--cat-color:var(--text);border-top:1px solid var(--border)!important;padding:24px!important;border-radius:16px!important} .profil-card-title{color:var(--text)!important;font-size:17px!important} .profils-cat-title{font-size:18px!important;margin:0 0 18px!important} .profils-cat-section{margin-bottom:40px!important} .profils-grid{gap:18px!important} .ideal-row{font-size:13.5px!important;margin-bottom:10px!important;color:var(--muted)!important} .ideal-row [style*="background"]{background:var(--text)!important} .profil-card-list [style*="color:"]{color:var(--muted)!important} /* La progression (Stats) : une carte calme, un badge de niveau doux. */ .gamif{background:var(--s1)!important;border-radius:18px!important;padding:26px 28px!important;box-shadow:none!important} :root[data-theme="light"] .gamif{box-shadow:var(--shadow)!important} .gamif-level-badge{background:var(--brand-bg)!important;color:var(--accent-texte,var(--accent))!important;border-radius:14px!important;box-shadow:none!important} .gamif-level-name{font-size:17px!important} .lvl-badge{border-radius:999px!important;font-weight:500!important} /* Les boutons secondaires : des pilules legeres, pas des cadres. */ .btn-sm{border-radius:999px!important;padding:8px 15px!important;font-size:13.5px!important;box-shadow:none!important} .btn-sm:hover{transform:none!important} /* La barre de filtres : les cases a cocher en dessous, plus discretes. */ #screen-admin .filter-bar{margin-bottom:28px!important} #screen-admin .filter-bar > div[style*="gap:16px"]{padding-top:8px} /* Les tuiles de chiffres : des mots, pas des capitales. */ .panel [class*="kpi-lbl"],.panel [class*="kpi-label"],.panel [class*="stat-lbl"],.panel [class*="stat-label"],.panel .usage-kpi-lbl{ text-transform:none!important;letter-spacing:0!important;font-size:13px!important;color:var(--soft)!important} /* ── Refonte, tour 16 : plus aucun panneau sombre en theme clair ── Retour de l'utilisateur, capture a l'appui : une bande sombre recouvrait le rail. C'etait le panneau d'aide et l'infobulle du rail, peints en sombre en dur, sans variante claire. Ils passent au blanc, comme le reste. */ /* Le panneau d'aide (le bouton « ? » du rail). */ :root[data-theme="light"] #help-pop{ background:#fff!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important; border:1px solid var(--border)!important;color:var(--muted)!important; box-shadow:var(--shadow-float)!important} :root[data-theme="light"] #help-pop .help-pop-h{color:var(--accent-texte,var(--accent))!important} #help-pop{font-family:var(--font-sans)!important;font-size:13.5px!important;line-height:1.55!important;max-width:320px!important;padding:14px 16px!important;border-radius:12px!important} #help-pop .help-pop-h{text-transform:none!important;letter-spacing:0!important;font-size:12.5px!important} /* Les infobulles du rail, au survol d'un onglet. */ :root[data-theme="light"] #screen-admin > nav.nav [data-tip]::after, :root[data-theme="light"] #screen-client > nav.nav [data-tip]::after{ background:var(--text)!important;color:#fff!important;border-color:transparent!important; box-shadow:var(--shadow-md)!important} #screen-admin > nav.nav [data-tip]::after,#screen-client > nav.nav [data-tip]::after{ font-family:var(--font-sans)!important;font-size:12.5px!important;border-radius:8px!important; max-width:min(260px,60vw)!important;white-space:normal!important} /* Le selecteur de date. */ :root[data-theme="light"] .mdp{ background:#fff!important;border-color:var(--border)!important;color:var(--text)!important; box-shadow:var(--shadow-float)!important} :root[data-theme="light"] .mdp-nav{background:var(--s2)!important;border-color:var(--border)!important;color:var(--text)!important} :root[data-theme="light"] .mdp-nav:hover{border-color:var(--accent)!important;color:var(--accent-texte,var(--accent))!important} /* Les voiles de fond : en clair, un voile d'encre chaude plutot qu'un noir pur. */ :root[data-theme="light"] .cmodal-backdrop,:root[data-theme="light"] .modal-backdrop, :root[data-theme="light"] .dr-backdrop,:root[data-theme="light"] .qr-backdrop, :root[data-theme="light"] .usage-modal-backdrop,:root[data-theme="light"] .schedule-modal-backdrop, :root[data-theme="light"] .idea-modal-overlay,:root[data-theme="light"] .cf-backdrop{ background:rgba(31,27,22,.38)!important} /* Les barres de repartition : une seule encre, plus de bleu ni de gris systeme. */ :root[data-theme="light"] .rh-bar-fill.status-fill{background:var(--text)!important} :root[data-theme="light"] .rh-bar-fill.refuse-fill{background:var(--s3)!important} :root[data-theme="light"] .rh-bar{background:var(--s2)!important} /* Les derniers aplats sombres codes en dur, en clair. */ :root[data-theme="light"] .reg-nom.couvert{background:var(--s3)!important;color:transparent!important} :root[data-theme="light"] .pm-card-icon{background:var(--brand-bg)!important;color:var(--accent-texte,var(--accent))!important} :root[data-theme="light"] .pool-cell-explore:hover,:root[data-theme="light"] .usage-card-cta:hover{background:var(--brand-600)!important} :root[data-theme="light"] .kanban-col-count.pulse-active{background:var(--accent)!important} /* La bascule de theme : on dit ce qu'elle fait. */ .theme-toggle{border-radius:999px!important} /* ── Correction : l'infobulle du rail prenait la largeur du bouton ── Le pseudo-element est en position absolue sans largeur propre : il heritait des 40 px du bouton, le texte s'y enroulait sur dix lignes et dessinait une bande sombre, etroite et haute, par-dessus le rail. C'est la bande signalee. Une largeur au contenu, plafonnee, et elle redevient une bulle. */ #screen-admin > nav.nav [data-tip]::after,#screen-client > nav.nav [data-tip]::after{ width:max-content!important;max-width:min(280px,42vw)!important; left:calc(100% + 12px)!important;right:auto!important; top:50%!important;bottom:auto!important;transform:translateY(-50%)!important; padding:9px 13px!important;line-height:1.35!important;text-align:left!important; z-index:6000!important} /* Elle n'apparait qu'au survol, et jamais sur un ecran tactile ou elle resterait collee. */ #screen-admin > nav.nav [data-tip]::after,#screen-client > nav.nav [data-tip]::after{opacity:0;pointer-events:none;transition:opacity .14s ease} #screen-admin > nav.nav [data-tip]:hover::after,#screen-admin > nav.nav [data-tip]:focus-visible::after, #screen-client > nav.nav [data-tip]:hover::after,#screen-client > nav.nav [data-tip]:focus-visible::after{opacity:1} @media (hover:none){#screen-admin > nav.nav [data-tip]::after,#screen-client > nav.nav [data-tip]::after{display:none!important}} /* meri.css fusionne */ /* Meri, la chouette Meritly - composant reutilisable (voir Brand OS) */ .meri-slot{position:relative;display:flex;justify-content:center;margin:0 auto} .owl-svg{width:120px;height:auto;overflow:visible;animation:mBob 4.4s cubic-bezier(.22,.61,.36,1) infinite} .owl-svg .squish{transform-box:fill-box;transform-origin:center bottom;transition:transform .3s cubic-bezier(.34,1.56,.64,1)} .meri-slot:hover .owl-svg .squish{transform:scale(1.05,.95)} .owl-svg .eyes{transform-box:fill-box;transform-origin:center;animation:mBlink 5.4s infinite} .owl-svg .pupils{transform-box:fill-box;transform-origin:center;animation:mLook 7s ease-in-out infinite} .owl-svg .spark{animation:mTw 3s ease-in-out infinite} .owl-svg .wing-l{transform-box:fill-box;transform-origin:80% 20%;animation:mFlapL 6s cubic-bezier(.22,.61,.36,1) infinite} .owl-svg .wing-r{transform-box:fill-box;transform-origin:20% 20%;animation:mFlapR 6s cubic-bezier(.22,.61,.36,1) infinite} /* Sourcils : levier n°1 d'expressivite. Origine cote nez pour pivoter naturellement. */ .owl-svg .brow-l{transform-box:fill-box;transform-origin:100% 50%} .owl-svg .brow-r{transform-box:fill-box;transform-origin:0% 50%} .owl-svg .brows{transform-box:fill-box} /* Paupieres superieures : descendent depuis le haut de l'oeil pour le fermer (triste/timide/endormie) */ .owl-svg .lid-l,.owl-svg .lid-r{transform-box:fill-box;transform-origin:50% 0%;transform:scaleY(0)} /* Accessoires thematiques (props), masques par defaut, reveles par une classe meri-prop- */ .owl-svg .prop-loupe,.owl-svg .prop-globe,.owl-svg .prop-shield,.owl-svg .prop-heart,.owl-svg .prop-binoculars{display:none} .owl-svg.meri-prop-loupe .prop-loupe{display:block} .owl-svg.meri-prop-globe .prop-globe{display:block} .owl-svg.meri-prop-shield .prop-shield{display:block} .owl-svg.meri-prop-heart .prop-heart{display:block} .owl-svg.meri-prop-binoculars .prop-binoculars{display:block} @keyframes mBob{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-9px) rotate(1.2deg)}} @keyframes mBlink{0%,90%,100%{transform:scaleY(1)}94%,96%{transform:scaleY(.1)}} @keyframes mLook{0%,40%,100%{transform:translateX(0)}55%,80%{transform:translateX(5px)}} @keyframes mTw{0%,100%{opacity:.2}50%{opacity:.9}} @keyframes mFlapL{0%,88%,100%{transform:rotate(0)}92%,96%{transform:rotate(-9deg)}} @keyframes mFlapR{0%,88%,100%{transform:rotate(0)}92%,96%{transform:rotate(9deg)}} /* ═══ Reactions a l'action (amplitudes marquees : lisibles en un regard, pas subtiles) ═══ */ /* happy : petite victoire (ex : analyse IA reussie) - ailes qui fretillent, plus vive */ .owl-svg.react-happy .squish{animation:mrJump .7s cubic-bezier(.34,1.56,.64,1)} .owl-svg.react-happy .eyes{animation:mrSquint .7s} .owl-svg.react-happy .brows{animation:mrBrowUpSmall .7s} .owl-svg.react-happy .wing-l{animation:mrHappyWingL .7s cubic-bezier(.34,1.56,.64,1)} .owl-svg.react-happy .wing-r{animation:mrHappyWingR .7s cubic-bezier(.34,1.56,.64,1)} @keyframes mrJump{0%{transform:translateY(0)}30%{transform:translateY(-26px) scale(.9,1.14)}60%{transform:translateY(0) scale(1.12,.88)}100%{transform:none}} @keyframes mrSquint{0%,100%{transform:scaleY(1)}40%,72%{transform:scaleY(.2)}} @keyframes mrBrowUpSmall{0%,100%{transform:translateY(0)}40%,72%{transform:translateY(-8px)}} @keyframes mrHappyWingL{0%,100%{transform:rotate(0)}30%,65%{transform:rotate(-20deg)}} @keyframes mrHappyWingR{0%,100%{transform:rotate(0)}30%,65%{transform:rotate(20deg)}} /* celebrate : grande victoire (embauche) */ .owl-svg.react-celebrate .squish{animation:mrJump2 .9s cubic-bezier(.34,1.56,.64,1)} .owl-svg.react-celebrate .wing-l{animation:mrFlapL .9s} .owl-svg.react-celebrate .wing-r{animation:mrFlapR .9s} .owl-svg.react-celebrate .brows{animation:mrBrowUpSmall .9s} @keyframes mrJump2{0%{transform:none}22%{transform:translateY(-38px)}48%{transform:translateY(0) scale(1.14,.84)}70%{transform:translateY(-15px)}100%{transform:none}} @keyframes mrFlapL{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-40deg)}40%,80%{transform:rotate(-8deg)}} @keyframes mrFlapR{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(40deg)}40%,80%{transform:rotate(8deg)}} /* curious : attention, profil intriguant (near-miss) - les deux sourcils se levent */ .owl-svg.react-curious .eyes{animation:mrWide .7s cubic-bezier(.34,1.56,.64,1)} .owl-svg.react-curious .pupils{animation:mrUp .7s} .owl-svg.react-curious .brows{animation:mrBrowUpBoth .7s} @keyframes mrWide{0%,100%{transform:scale(1)}42%{transform:scale(1.32)}} @keyframes mrUp{0%,100%{transform:translateY(0)}45%,75%{transform:translateY(-8px)}} @keyframes mrBrowUpBoth{0%,100%{transform:translateY(0)}45%,75%{transform:translateY(-10px)}} /* look : attention dirigee (ouverture d'un rapport de decision) */ .owl-svg.react-look .pupils{animation:mrDart .8s} @keyframes mrDart{0%,100%{transform:translate(0,0)}40%,72%{transform:translate(15px,-8px)}} /* shy : action delicate (supprimer) - paupieres mi-closes, regard fuyant, se recroqueville */ .owl-svg.react-shy .squish{animation:mrDuck .9s ease} .owl-svg.react-shy .wing-l{animation:mrHugL .9s ease} .owl-svg.react-shy .wing-r{animation:mrHugR .9s ease} .owl-svg.react-shy .pupils{animation:mrDown .9s} .owl-svg.react-shy .lid-l,.owl-svg.react-shy .lid-r{animation:mrLidShy .9s ease} @keyframes mrDuck{0%,100%{transform:none}42%{transform:translateY(19px) scale(1.1,.84)}} @keyframes mrHugL{0%,100%{transform:rotate(0)}42%{transform:rotate(42deg)}} @keyframes mrHugR{0%,100%{transform:rotate(0)}42%{transform:rotate(-42deg)}} @keyframes mrDown{0%,100%{transform:translateY(0)}42%,72%{transform:translateY(10px)}} @keyframes mrLidShy{0%,100%{transform:scaleY(0)}42%,72%{transform:scaleY(.52)}} /* wave : accueil, bienvenue */ .owl-svg.react-wave .wing-r{animation:mrWave .9s cubic-bezier(.34,1.56,.64,1)} .owl-svg.react-wave .eyes{animation:mrSquint .9s} @keyframes mrWave{0%,100%{transform:rotate(0)}20%{transform:rotate(-42deg)}35%{transform:rotate(-4deg)}50%{transform:rotate(-42deg)}65%{transform:rotate(-4deg)}80%{transform:rotate(-24deg)}} /* sad : refus, mauvaise nouvelle - sourcils inquiets + paupieres lourdes + regard bas + tout s'affaisse */ .owl-svg.react-sad .squish{animation:mrSlump 1.5s ease-out} .owl-svg.react-sad .wing-l{animation:mrDropL 1.5s ease-out} .owl-svg.react-sad .wing-r{animation:mrDropR 1.5s ease-out} .owl-svg.react-sad .pupils{animation:mrDown2 1.5s ease-out} .owl-svg.react-sad .brow-l{animation:mrBrowSadL 1.5s ease-out} .owl-svg.react-sad .brow-r{animation:mrBrowSadR 1.5s ease-out} .owl-svg.react-sad .lid-l,.owl-svg.react-sad .lid-r{animation:mrLidSad 1.5s ease-out} @keyframes mrSlump{0%,100%{transform:none}42%,78%{transform:translateY(16px) scale(1.07,.86)}} @keyframes mrDropL{0%,100%{transform:rotate(0)}42%,78%{transform:rotate(10deg)}} @keyframes mrDropR{0%,100%{transform:rotate(0)}42%,78%{transform:rotate(-10deg)}} @keyframes mrDown2{0%,100%{transform:translateY(0)}42%,78%{transform:translateY(11px)}} @keyframes mrBrowSadL{0%,100%{transform:rotate(0)}42%,78%{transform:rotate(27deg)}} @keyframes mrBrowSadR{0%,100%{transform:rotate(0)}42%,78%{transform:rotate(-27deg)}} @keyframes mrLidSad{0%,100%{transform:scaleY(0)}42%,78%{transform:scaleY(.68)}} /* sleepy : attente, vivier vide - paupieres qui se ferment presque completement */ .owl-svg.react-sleepy .lid-l,.owl-svg.react-sleepy .lid-r{animation:mrLidSleep 2s ease-in-out} .owl-svg.react-sleepy .squish{animation:mrDoze 2s ease-in-out} .owl-svg.react-sleepy .brows{animation:mrBrowDoze 2s ease-in-out} @keyframes mrLidSleep{0%,100%{transform:scaleY(0)}45%,80%{transform:scaleY(.93)}} @keyframes mrDoze{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(5px) rotate(-3deg)}} @keyframes mrBrowDoze{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}} /* think : l'IA reflechit, chargement */ .owl-svg.react-think .pupils{animation:mrOrbit 1.6s linear} @keyframes mrOrbit{0%,100%{transform:translate(0,0)}25%{transform:translate(8px,-5px)}50%{transform:translate(0,-8px)}75%{transform:translate(-8px,-5px)}} /* startled : erreur inattendue - sursaut + sourcils qui se levent d'un coup */ .owl-svg.react-startled .squish{animation:mrJolt .55s cubic-bezier(.34,1.56,.64,1)} .owl-svg.react-startled .eyes{animation:mrWide2 .55s} .owl-svg.react-startled .brows{animation:mrBrowJolt .55s} @keyframes mrJolt{0%,100%{transform:none}30%{transform:translateY(-19px) scale(.87,1.16)}60%{transform:translateY(3px)}} @keyframes mrWide2{0%,100%{transform:scale(1)}35%{transform:scale(1.5)}} @keyframes mrBrowJolt{0%,100%{transform:translateY(0)}30%{transform:translateY(-12px)}} /* confused : ambiguite - un seul sourcil se leve (regard interrogateur) */ .owl-svg.react-confused .squish{animation:mrTilt 1.1s ease-in-out} .owl-svg.react-confused .pupils{animation:mrDart2 1.1s ease-in-out} .owl-svg.react-confused .brow-r{animation:mrBrowQuizz 1.1s ease-in-out} @keyframes mrTilt{0%,100%{transform:rotate(0)}30%{transform:rotate(-14deg)}70%{transform:rotate(11deg)}} @keyframes mrDart2{0%,100%{transform:translate(0,0)}30%{transform:translate(8px,0)}70%{transform:translate(-8px,0)}} @keyframes mrBrowQuizz{0%,100%{transform:translateY(0)}35%,75%{transform:translateY(-9px)}} .meri-confetti{position:absolute;top:42%;left:50%;width:9px;height:9px;border-radius:2px;pointer-events:none;z-index:5} .owl-svg.rise{opacity:0;transform:translateY(18px) scale(.94);animation:mRise .8s cubic-bezier(.34,1.56,.64,1) forwards} @keyframes mRise{to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.owl-svg,.owl-svg *{animation:none!important}.owl-svg.rise{opacity:1;transform:none;animation:none}} /* ── Refonte, tour 17 : la feuille ── Retour de l'utilisateur sur la direction Parcours : « police, encadré et couleurs font trop IA ». Trois choses changent, et partout. La police : Funnel Display (titres, 800) et Funnel Sans (texte) remplacent Bricolage et Instrument, la paire des pages generees. L'encadre : plus de carte blanche arrondie sur toile creme. Tout se pose sur du blanc et se separe par des filets, comme un document ; les panneaux qui restent ont un bord fin, des coins de 10 px, et plus aucune ombre. La couleur : le rouge, et rien d'autre. Ce qui est actif porte un trait rouge a gauche ; ce qui est bon est en encre ; ce qui manque est en gris. Plus de vert, plus d'ambre, plus de teinte chaude sur les avatars. */ /* La police. */ :root,:root[data-theme="light"],:root[data-theme="dark"]{ --font-sans:"Funnel Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --font-display:"Funnel Display","Funnel Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; --font-mono:"Funnel Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif} .sh-title,.login-hero-title,body h1,body h2,.sh h2,.sh h2.sh-title,.ck-name,.ck-rowmatch,.ck-tile-v,.adq-num{font-weight:800!important} .login-hero-title{font-weight:800!important} /* La feuille : blanc, encre neutre, gris de trait. Plus de toile creme, plus d'ombre. */ :root[data-theme="light"],:root[data-theme="light"] #screen-login{ --bg:#ffffff; --s1:#ffffff; --s2:#f6f6f6; --s3:#ececec; --s1-rgb:255,255,255; --border-rgb:228,228,228; --border:#e4e4e4; --border-2:#cfcfcf; --text:#141414; --muted:#5a5a5a; --soft:#8c8c8c; --brand-bg:#fdecec; --brand-border:#f5c2c2; --hero-gradient:#ffffff; --shadow:none; --shadow-md:none; --shadow-float:0 14px 36px rgba(0,0,0,.10)} :root[data-theme="light"] .ck-card,:root[data-theme="light"] .ck-rankrow,:root[data-theme="light"] .offre-card, :root[data-theme="light"] .kanban-card,:root[data-theme="light"] .eq-kpi-card,:root[data-theme="light"] .ck-id, :root[data-theme="light"] .jalon,:root[data-theme="light"] .meri-ck,:root[data-theme="light"] .bareme-card, :root[data-theme="light"] .gamif,:root[data-theme="light"] .profil-card{box-shadow:none!important} /* Le rail : blanc, et l'onglet actif se signale par un trait rouge, pas par un fond. */ :root[data-theme="light"] #screen-admin > nav.nav,:root[data-theme="light"] #screen-client > nav.nav{background:#fff!important} #screen-admin > nav.nav .nav-tab,#screen-client > nav.nav .nav-tab{border-radius:6px!important;font-weight:500!important} #screen-admin > nav.nav .nav-tab.on,#screen-client > nav.nav .nav-tab.on, :root[data-theme="light"] #screen-admin > nav.nav .nav-tab.on,:root[data-theme="light"] #screen-client > nav.nav .nav-tab.on{ background:transparent!important;box-shadow:none!important;font-weight:600!important;color:var(--text)!important} #screen-admin > nav.nav .nav-tab.on::after,#screen-client > nav.nav .nav-tab.on::after{ display:block!important;content:""!important;position:absolute!important;left:-14px!important;top:8px!important;bottom:8px!important; width:3px!important;height:auto!important;border-radius:0 2px 2px 0!important;background:var(--accent)!important; transform:none!important;opacity:1!important} /* Les panneaux : bord fin, coins de 10 px. Les boutons : coins de 8 px, plus de pilules. */ .ck-id,.ck-card,.bareme-card,.profil-card,.gamif,.jalon,.meri-ck,.kanban-card,.eq-kpi-card,.offre-card{border-radius:10px!important} .ck-btn-primary,.ck-btn-ghost,.btn-sm,.jalon-btn,.theme-toggle,.btn-primary,.btn,button.btn{border-radius:8px!important} .ck-btn-primary{background:var(--accent)!important;color:#fff!important;font-weight:600!important} .ck-btn-ghost{background:#fff!important;border:1px solid var(--text)!important;color:var(--text)!important;font-weight:600!important} :root[data-theme="light"] .ck-btn-ghost:hover{background:var(--s2)!important} /* La liste des candidats est une liste : des lignes et des filets, pas des cartes. */ :root[data-theme="light"] .ck-rankrow,.ck-rankrow{ background:transparent!important;border:0!important;border-top:1px solid var(--border)!important;border-radius:0!important; margin:0!important;padding:13px 12px 13px 0!important;position:relative} .ck-rankrow:first-of-type,.ck-rank-head + .ck-rankrow{border-top:0!important} :root[data-theme="light"] .ck-rankrow:hover,.ck-rankrow:hover{background:transparent!important;border-color:var(--border)!important} :root[data-theme="light"] .ck-rankrow.on,.ck-rankrow.on{background:transparent!important;border-color:var(--border)!important;box-shadow:none!important} .ck-rankrow.on::before{content:"";position:absolute;left:-16px;top:8px;bottom:8px;width:3px;background:var(--accent);border-radius:0 2px 2px 0} .ck-rowmatch{color:var(--soft)!important;-webkit-text-fill-color:var(--soft)!important} :root[data-theme="light"] .ck-rankrow.on .ck-rowmatch,:root[data-theme="light"] .ck-rankrow.on .ck-rowmatch.is-perfect,.ck-rankrow.on .ck-rowmatch{ color:var(--accent-texte,var(--accent))!important;-webkit-text-fill-color:var(--accent)!important} .ck-rowav .avatar,.ck-rowav .avatar-sm{border-radius:50%!important} .cockpit-grid{gap:34px!important} /* Les avatars : un cercle au trait, des initiales en gris. Plus de teinte chaude. */ :root[data-theme="light"] .avatar,:root[data-theme="light"] .avatar-sm,:root[data-theme="light"] .avatar-lg,:root[data-theme="light"] .ck-avatar .avatar-lg{ background:#fff!important;color:var(--muted)!important;border:1.5px solid var(--border-2)!important} :root[data-theme="light"] .ck-rankrow.on .avatar,:root[data-theme="light"] .ck-rankrow.on .avatar-sm{border-color:var(--text)!important;color:var(--text)!important} /* Le dossier ouvert : le score en grand chiffre rouge, la dimension la plus forte en rouge. */ .adq-num,.adq-num .ring-num{color:var(--accent-texte,var(--accent))!important;font-size:40px!important;letter-spacing:-.05em!important} :root[data-theme="light"] .ck-bar-f{background:var(--text)!important} .ck-dim .b i.acc{background:var(--accent)!important} /* Une seule couleur. Le vert et l'ambre passent a l'encre et au gris. */ .etape.fait{border-top-color:var(--text)!important} .etape.fait b::before{background:var(--text)!important} .ck-marq span.p{border-color:var(--text)!important;color:var(--text)!important} .ck-marq span.d,:root[data-theme="light"] .ck-marq span.d{border-color:var(--border-2)!important;color:var(--muted)!important} .ck-marq span{border-radius:6px!important} .bareme-card-pts,.lvl-badge,.gamif-level-badge{border-radius:6px!important} .gamif-level-badge{background:transparent!important;border:1.5px solid var(--accent)!important} /* Les en-tetes : une phrase, en Funnel Display 800, plus serree. */ .sh h2,.sh h2.sh-title{font-size:30px!important;letter-spacing:-.04em!important;line-height:1.05!important} .sh-sub{color:var(--muted)!important} /* L'ecran de connexion : le mot-marque garde sa serif, le titre passe en Funnel Display. */ .login-hero-title{letter-spacing:-.045em!important} /* ── Refonte, tour 18 : une seule couleur, partout ── Une sonde a passe chaque ecran du compte demo pour lister ce qui portait encore du vert, du bleu, de l'ambre ou du violet. Tout passe a l'encre et au gris ; le rouge reste seul a juger. Les barres de progression sont en encre, les badges sont des contours, les pastilles de legende sont des gris etages. */ /* L'ecran de connexion : la colonne du formulaire etait encore creme. */ :root[data-theme="light"] .login-side-form,:root[data-theme="light"] #screen-login .login-side-form{background:#fff!important} /* Candidats : le triangle d'alerte ambre pres du score, les traits des competences. */ .icon-2d.ico-warning{background:var(--soft)!important;color:var(--soft)!important} .icon-2d.ico-edit{background:var(--soft)!important} .ck-bar,.ck-dim .b{background:var(--s3)!important} .ck-bar-f,.ck-dim .b i{background:var(--text)!important} .ck-dim .b i.acc{background:var(--accent)!important} .adq svg circle:first-child{stroke:var(--s3)!important} .ck-comp-l,.ck-dim .l,.ck-id-sub{color:var(--muted)!important} .ck-marq span.d{color:var(--muted)!important} /* Stats : la progression et les objectifs, en encre. Les badges deviennent des contours. */ .gamif-obj-fill{background:var(--text)!important} .gamif-obj-track{background:var(--s3)!important} .lvl-badge,.lvl-badge.lvl-top,.lvl-badge.lvl-bon,.lvl-badge.lvl-faible,.lvl-badge.lvl-moyen{ background:transparent!important;border:1px solid var(--border-2)!important;color:var(--muted)!important;border-radius:6px!important} .lvl-badge.lvl-top{border-color:var(--text)!important;color:var(--text)!important;font-weight:600!important} .gamif-streak,.gamif-streak.is-on{background:transparent!important;border:1px solid var(--border-2)!important;color:var(--muted)!important;border-radius:6px!important} .icon-2d.ico-icon-5{background:var(--muted)!important;color:var(--muted)!important} /* Le radar disparait : il ne dit rien qu'une liste de cinq traits ne dise mieux. */ .profil-card-radar{display:none!important} .profil-card-body{grid-template-columns:1fr!important;display:block!important} .profil-list-lbl,.profil-card-list [style*="color:"]{color:var(--muted)!important} .profil-list-fill,.profil-card-list [style*="background"]{background:var(--text)!important} .profil-list-bar{background:var(--s3)!important} /* Vivier : la legende des niveaux en gris etages, l'ecart en rouge franc. */ .pool-legend-dot.lv-4{color:var(--text)!important;background:var(--text)!important} .pool-legend-dot.lv-3{color:var(--muted)!important;background:var(--muted)!important} .pool-legend-dot.lv-2{color:var(--soft)!important;background:var(--soft)!important} .pool-legend-dot.lv-1{color:var(--border-2)!important;background:var(--border-2)!important} .nmr-tg.nmr-w{border-color:var(--accent)!important;color:var(--accent-texte,var(--accent))!important;background:transparent!important} .nmr-tg{border-radius:6px!important} /* Equite : les verdicts, les chiffres et l'histogramme en encre ; les postes en gris. */ .eq-bias-verdict,.eq-kpi-val{color:var(--text)!important} .eq-poste-dot{background:var(--muted)!important} .eq-hist-fill{background:var(--text)!important} .eq-hist-track{background:var(--s3)!important} /* Onboarding : la barre d'avancement en encre. */ .ud-progress-fill{background:var(--text)!important} .ud-progress-track,.ud-progress{background:var(--s3)!important} /* ── Refonte, tour 19 : les couleurs codees en dur ── Ce que la sonde a montre ensuite : le vert, le bleu et l'ambre ne venaient plus de la feuille mais du script, qui pose des couleurs en ligne (scoreColor, DIM_COLORS, couleurs de categorie) et de jetons semantiques (--success, --info). En clair, ces jetons deviennent encre et gris, et les couleurs posees en ligne sont rattrapees par leur valeur. Les radars de Stats et du Vivier disparaissent. */ :root[data-theme="light"]{ --success:#141414;--good:#141414;--green:#141414; --info:#5a5a5a;--blue:#5a5a5a; --success-bg:#f6f6f6;--success-border:#cfcfcf;--info-bg:#f6f6f6;--info-border:#cfcfcf} /* Les couleurs posees en ligne par le script : vert, bleu, violet, ambre. */ :root[data-theme="light"] [style*="color:#4aa37b" i],:root[data-theme="light"] [style*="color: #4aa37b" i], :root[data-theme="light"] [style*="color:#5b8ad9" i],:root[data-theme="light"] [style*="color: #5b8ad9" i], :root[data-theme="light"] [style*="color:#9082b8" i],:root[data-theme="light"] [style*="color: #9082b8" i], :root[data-theme="light"] [style*="color:#c79a4e" i],:root[data-theme="light"] [style*="color: #c79a4e" i], :root[data-theme="light"] [style*="color:#d97706" i],:root[data-theme="light"] [style*="color: #d97706" i], :root[data-theme="light"] [style*="color:#047857" i],:root[data-theme="light"] [style*="color: #047857" i], :root[data-theme="light"] [style*="color:#15803d" i],:root[data-theme="light"] [style*="color: #15803d" i], :root[data-theme="light"] [style*="color:#1d4ed8" i],:root[data-theme="light"] [style*="color: #1d4ed8" i]{color:var(--text)!important} :root[data-theme="light"] [style*="background:#4aa37b" i],:root[data-theme="light"] [style*="background: #4aa37b" i], :root[data-theme="light"] [style*="background:#5b8ad9" i],:root[data-theme="light"] [style*="background: #5b8ad9" i], :root[data-theme="light"] [style*="background:#9082b8" i],:root[data-theme="light"] [style*="background: #9082b8" i], :root[data-theme="light"] [style*="background:#c79a4e" i],:root[data-theme="light"] [style*="background: #c79a4e" i], :root[data-theme="light"] [style*="background:#d97706" i],:root[data-theme="light"] [style*="background: #d97706" i], :root[data-theme="light"] [style*="background-color:#4aa37b" i],:root[data-theme="light"] [style*="background-color:#5b8ad9" i]{background-color:var(--text)!important;background-image:none!important} :root[data-theme="light"] svg [stroke="#4AA37B"],:root[data-theme="light"] svg [stroke="#5B8AD9"],:root[data-theme="light"] svg [stroke="#9082B8"], :root[data-theme="light"] svg [stroke="#C79A4E"],:root[data-theme="light"] svg [stroke="#D97706"]{stroke:var(--text)!important} :root[data-theme="light"] svg [fill="#4AA37B"],:root[data-theme="light"] svg [fill="#5B8AD9"],:root[data-theme="light"] svg [fill="#9082B8"], :root[data-theme="light"] svg [fill="#C79A4E"],:root[data-theme="light"] svg [fill="#D97706"]{fill:var(--text)!important} /* Les radars qui restaient : Stats et Vivier. */ .stats-poste-radar,.pool-radar{display:none!important} /* Les vieux hex du theme sombre, poses en dur dans le dossier ouvert. */ :root[data-theme="light"] .ck-card,:root[data-theme="light"] .ck-id{border-color:var(--border)!important} :root[data-theme="light"] .ck-comp-l,:root[data-theme="light"] .ck-card .l,:root[data-theme="light"] .ck-card .d{color:var(--muted)!important} :root[data-theme="light"] .ck-card .b,:root[data-theme="light"] .ck-comp .b{background:var(--s3)!important} :root[data-theme="light"] .integration-status-connected{color:var(--text)!important} :root[data-theme="light"] .ck-rowmatch.is-perfect{background:none!important;-webkit-text-fill-color:var(--soft)!important} :root[data-theme="light"] .ck-rankrow.on .ck-rowmatch.is-perfect{-webkit-text-fill-color:var(--accent)!important} /* Le dossier ouvert redefinissait ses propres jetons (une ancienne variante claire du cockpit, ligne 4329) : gris ardoise, bleu nuit, encre chaude. Il reprend ceux de la feuille. */ :root[data-theme="light"] .ck-id,:root[data-theme="light"] .ck-card,:root[data-theme="light"] .ck-rankrow, :root[data-theme="light"] .cockpit-grid,:root[data-theme="light"] .cockpit-detail,:root[data-theme="light"] .cockpit-rank, :root[data-theme="light"] .ck-row2,:root[data-theme="light"] .ck-dims{ --text:#141414;--muted:#5a5a5a;--soft:#8c8c8c;--border:#e4e4e4;--border-2:#cfcfcf; --s1:#ffffff;--s2:#f6f6f6;--s3:#ececec;color:var(--text)} /* ── Refonte, tour 20 : le chemin, le grand chiffre, et les avatars ── Le tour 19 rattrapait les couleurs posees en ligne ; il a aussi rattrape les avatars, qui portent leur teinte en ligne, et les a peints en noir. Ils redeviennent des cercles au trait. Le parcours du poste devient le chemin de la direction Parcours : un trait, cinq points numerotes, plein pour ce qui est fait, cercle rouge pour l'etape en cours. La jauge ronde disparait : le score est un grand chiffre rouge, et c'est tout. */ /* Les avatars, quelle que soit la couleur posee en ligne. */ :root[data-theme="light"] .avatar[style],:root[data-theme="light"] .avatar-sm[style],:root[data-theme="light"] .avatar-lg[style], :root[data-theme="light"] .avatar,:root[data-theme="light"] .avatar-sm,:root[data-theme="light"] .avatar-lg{ background-color:#fff!important;background-image:none!important;color:var(--muted)!important;border:1.5px solid var(--border-2)!important} :root[data-theme="light"] .ck-rankrow.on .avatar,:root[data-theme="light"] .ck-rankrow.on .avatar-sm{border-color:var(--text)!important;color:var(--text)!important} /* Le chemin : un trait continu, cinq points numerotes. */ .parcours{counter-reset:etape;position:relative;gap:0!important;margin:6px 0 26px!important;padding-top:0} .parcours::before{content:"";position:absolute;left:10%;right:10%;top:11px;height:1.5px;background:var(--border-2)} .etape{position:relative;border-top:0!important;padding:32px 8px 0!important;text-align:center;font-size:12.5px!important;color:var(--soft)!important} .etape::before{counter-increment:etape;content:counter(etape);position:absolute;left:50%;top:0;transform:translateX(-50%); width:22px;height:22px;border-radius:50%;background:var(--s1);border:1.5px solid var(--border-2);color:var(--soft); font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1} .etape b{display:block;color:var(--soft)!important;font-weight:500!important;font-size:13px!important;margin-bottom:1px!important} .etape b::before{display:none!important} .etape.fait{color:var(--muted)!important} .etape.fait b{color:var(--muted)!important} .etape.fait::before{background:var(--text);border-color:var(--text);color:#fff} .etape.cours{color:var(--muted)!important} .etape.cours b{color:var(--text)!important;font-weight:700!important} .etape.cours::before{border-color:var(--accent);border-width:2px;color:var(--accent-texte,var(--accent));background:var(--s1)} @media (max-width:900px){.parcours::before{display:none}.etape{text-align:left;padding-left:30px!important;padding-top:4px!important}.etape::before{left:0;transform:none;top:2px}} /* Le score du dossier ouvert : un grand chiffre, plus d'anneau. */ .adq svg{display:none!important} .adq{width:auto!important;height:auto!important;flex-direction:column;align-items:flex-end!important} .adq > div[style*="position:absolute"]{position:static!important;text-align:right!important} .adq-num,.adq-num .ring-num{font-size:44px!important;line-height:.95!important} .adq-lbl{margin-top:4px!important} /* Le jalon : blanc, un filet, pas de bandeau rose. Meri y reste. */ :root[data-theme="light"] .jalon,:root[data-theme="light"] .jalon.est-complet{background:#fff!important;border:1px solid var(--border)!important} .jalon{border-radius:10px!important} /* Le titre de poste et sa categorie : un trait rouge sous le poste ouvert. */ .poste-label{border-bottom:1px solid var(--border)!important} /* Le score parfait gardait un degrade dore : il est rouge comme les autres. Les categories de postes portaient encore leur couleur sur le filet : encre. */ .adq.ring-perfect .adq-num,.adq.ring-perfect .ring-num,.adq .adq-num,.adq .ring-num{ color:var(--accent-texte,var(--accent))!important;-webkit-text-fill-color:var(--accent)!important;background:none!important;background-image:none!important;animation:none!important} .profils-cat-title,.profils-cat-section .profils-cat-title{border-left-color:var(--text)!important} .profils-cat-title::before{background:var(--text)!important} .poste-label [style*="background"]{background:var(--s3)!important} /* ── Refonte, tour 21 : la couche Parcours ── Meri parle en bas du rail, la fiche est une page au sommaire en quatre chapitres, une palette de commandes remplace les menus, les filtres se replient, et le verdict ouvre un carton noir. Le script assets/plateforme-*.js pose les elements ; cette couche les habille. */ /* Meri, en bas du rail. Le jalon du haut de liste n'a plus lieu d'etre. */ #ck-jalon{display:none!important} .rail-meri{margin-top:auto;padding:12px 6px 8px;border-top:1px solid var(--border);display:flex;gap:10px;align-items:flex-start} .rail-meri-owl{width:32px;flex:none;display:flex;align-items:flex-end;justify-content:center;overflow:visible} .rail-meri-owl .meri-slot{margin:0!important;width:32px} .rail-meri-owl .owl-svg{width:32px!important;height:auto!important;animation:none!important} .rail-meri-owl .owl-svg.rise{opacity:1!important;transform:none!important} .rail-meri-txt{min-width:0;font-size:12.5px;line-height:1.4;color:var(--muted)} .rail-meri-txt b{display:block;color:var(--text);font-weight:600;letter-spacing:-.01em} .rail-meri-txt span{display:block;margin-top:2px} .rail-meri-btn{margin-top:8px;font:600 12px var(--font-sans);padding:6px 10px;border-radius:6px;border:1px solid var(--text);background:#fff;color:var(--text);cursor:pointer} :root[data-theme="dark"] .rail-meri-btn{background:transparent;border-color:var(--border-2);color:var(--text)} #screen-admin > nav.nav .nav-right{margin-top:10px!important} /* La palette et son bouton dans le rail. */ .rail-palette{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px;padding:7px 10px;border-radius:8px;border:1px solid var(--border);background:var(--s1);color:var(--soft);font:500 12.5px var(--font-sans);cursor:pointer;text-align:left} .rail-palette:hover{border-color:var(--border-2);color:var(--text)} .rail-palette kbd{font:500 10.5px var(--font-sans);border:1px solid var(--border);border-radius:4px;padding:1px 5px;color:var(--soft)} .palette{position:fixed;inset:0;z-index:5000} .palette[hidden]{display:none} .palette-voile{position:absolute;inset:0;background:rgba(0,0,0,.28)} .palette-boite{position:absolute;left:50%;top:14vh;transform:translateX(-50%);width:min(640px,calc(100% - 32px));background:var(--s1);border:1px solid var(--border-2);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.25);overflow:hidden} .palette-champ{width:100%;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--text);font:500 18px var(--font-sans);padding:18px 20px;outline:none} .palette-champ::placeholder{color:var(--soft)} .palette-liste{max-height:52vh;overflow:auto;padding:6px} .palette-item{display:grid;grid-template-columns:78px 1fr auto;gap:12px;align-items:baseline;padding:10px 14px;border-radius:8px;cursor:pointer;font-size:14.5px;color:var(--text)} .palette-item.on{background:var(--s2)} .palette-type{font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--soft)} .palette-sous{font-size:12.5px;color:var(--soft)} .palette-vide{padding:18px;color:var(--soft);font-size:14px} .palette-pied{display:flex;gap:16px;padding:9px 16px;border-top:1px solid var(--border);font-size:11.5px;color:var(--soft)} /* Les filtres : un bouton, un panneau qui se deplie. */ #admin-candidats .filter-bar{gap:10px!important} .filtres-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:8px;border:1px solid var(--border-2);background:var(--s1);color:var(--text);font:600 13.5px var(--font-sans);cursor:pointer} .filtres-btn.on{border-color:var(--text)} .filtres-btn .filtres-n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;font-size:11px;font-style:normal;font-weight:700} .filtres-panneau{flex-basis:100%;display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center;padding:12px 0 4px;border-top:1px solid var(--border);margin-top:4px} .filtres-panneau[hidden]{display:none} .filtres-panneau > div{flex-basis:100%} /* La fiche : une page, juste apres le rail. */ :root[data-theme="light"] #candidate-modal.cmodal,#candidate-modal.cmodal{display:block;padding:0!important;background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;align-items:stretch!important} #candidate-modal .cmodal-backdrop{display:none!important} #candidate-modal .cmodal-content{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:var(--rail-w,212px)!important;width:auto!important;max-width:none!important;height:auto!important;max-height:none!important; border-radius:0!important;border:0!important;border-left:1px solid var(--border)!important;box-shadow:none!important;padding:34px 48px 80px!important;overflow:auto!important;transform:none!important;animation:none!important} @media (max-width:900px){#candidate-modal .cmodal-content{left:0!important;padding:24px 18px 80px!important}} .fiche-retour{grid-column:1/-1;display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:0;border:0;background:none;color:var(--soft);font:500 13.5px var(--font-sans);cursor:pointer} .fiche-retour:hover{color:var(--text)} #candidate-modal .cmodal-close{top:26px!important;right:28px!important} #candidate-modal #cmodal-delete-btn{right:70px!important} .cmodal-tabbed{grid-template-columns:210px minmax(0,1fr)!important;gap:40px!important} .cmodal-tabs{top:0!important;gap:1px!important} .cmodal-chapitre{font:600 11.5px var(--font-sans);letter-spacing:.03em;text-transform:uppercase;color:var(--soft);padding:16px 10px 6px} .cmodal-chapitre:first-child{padding-top:0} .cmodal-tab{font:500 14px var(--font-sans)!important;letter-spacing:-.01em!important;color:var(--muted)!important;padding:8px 10px 8px 14px!important;border-radius:6px!important;position:relative} .cmodal-tab:hover{background:var(--s2)!important;color:var(--text)!important} .cmodal-tab.on{background:transparent!important;color:var(--text)!important;font-weight:600!important} .cmodal-tab.on::after{width:3px!important;height:auto!important;top:7px!important;bottom:7px!important;left:0!important;margin:0!important;transform:none!important;border-radius:0 2px 2px 0!important;background:var(--accent)!important} .cmodal-tabbed > .cmodal-section.cmodal-sec-on > .cmodal-section-title{font-family:var(--font-display)!important;font-weight:800!important;font-size:22px!important;letter-spacing:-.03em!important} .cmodal-name{font-family:var(--font-display)!important;font-weight:800!important;font-size:30px!important;letter-spacing:-.04em!important} .cmodal-gauge .adq{align-items:flex-end!important} .cmodal-status-badge{border-radius:6px!important;background:transparent!important;border:1px solid var(--border-2)!important;color:var(--muted)!important} /* Le carton noir du verdict. */ .carton{position:fixed;inset:0;z-index:6000;background:#0b0b0d;color:#f4f1eb;display:flex;align-items:center;justify-content:center;padding:40px;overflow:auto} .carton[hidden]{display:none} .carton::before{content:"";position:absolute;inset:auto -10% -40% -10%;height:80%;background:radial-gradient(50% 50% at 50% 100%,rgba(229,32,42,.32),transparent 72%);pointer-events:none} .carton-in{position:relative;width:min(1040px,100%);display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center} .carton-k{font:500 11.5px var(--font-sans);letter-spacing:.06em;color:#8a8a92} .carton-titre{margin-top:12px;font-family:var(--font-display)!important;font-weight:800!important;font-size:clamp(40px,6vw,84px)!important;letter-spacing:-.045em!important;line-height:.95!important;color:#f4f1eb!important} .carton-titre .carton-r{color:var(--accent-texte,var(--accent))} .carton-p{margin-top:16px;color:#a9a59e;max-width:52ch;font-size:15.5px;line-height:1.5} .carton-mots{margin-top:18px;width:min(560px,100%);background:#17171b;border:1px solid rgba(255,255,255,.14);border-radius:12px;color:#f4f1eb;font:400 15px var(--font-sans);padding:12px 14px;resize:vertical;outline:none} .carton-mots:focus{border-color:var(--accent)} .carton-pied{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px} .carton-btn{font:600 14px var(--font-sans);padding:11px 18px;border-radius:999px;border:1px solid transparent;cursor:pointer} .carton-blanc{background:#f4f1eb;color:#0b0b0d} .carton-fant{background:transparent;border-color:rgba(255,255,255,.22);color:#f4f1eb} .carton-meri{width:150px;display:flex;align-items:flex-end;justify-content:center;overflow:visible} .carton-meri .meri-slot{margin:0!important} .carton-meri .owl-svg{width:150px!important;height:auto!important} @media (max-width:760px){.carton-in{grid-template-columns:1fr}.carton-meri{width:100px}.carton-meri .owl-svg{width:100px!important}} /* Le theme sombre suit : memes lignes, memes traits, sans ombre. */ :root[data-theme="dark"] .ck-rankrow{border-top:1px solid var(--border)!important} :root[data-theme="dark"] .ck-id,:root[data-theme="dark"] .ck-card,:root[data-theme="dark"] .jalon,:root[data-theme="dark"] .meri-ck{box-shadow:none!important;border-radius:10px!important} :root[data-theme="dark"] .avatar,:root[data-theme="dark"] .avatar-sm,:root[data-theme="dark"] .avatar-lg{background:transparent!important;border:1.5px solid var(--border-2)!important;color:var(--muted)!important} :root[data-theme="dark"] #candidate-modal .cmodal-content{background:var(--bg)!important} :root[data-theme="dark"] .palette-boite{background:var(--s1)} :root[data-theme="dark"] .filtres-btn,:root[data-theme="dark"] .rail-palette{background:var(--s1)} /* Retouches apres la premiere scene : le compteur de filtres se cache a zero, la corbeille rejoint la croix en haut a droite, le bouton de palette tient sur une ligne, l'en-tete de la fiche perd ses grands vides. */ .filtres-btn .filtres-n[hidden]{display:none!important} #candidate-modal #cmodal-delete-btn{left:auto!important;right:72px!important;top:26px!important} .rail-palette{padding:6px 8px 6px 10px;font-size:12px} .rail-palette span,.rail-palette kbd{white-space:nowrap} .rail-palette kbd{font-size:10px;padding:1px 4px} #candidate-modal .cmodal-header{margin-bottom:12px!important;padding-bottom:14px!important} #candidate-modal .cmodal-meta{margin-bottom:16px!important;gap:6px 24px!important} #candidate-modal .cmodal-actions-ligne{margin:0 0 12px!important} /* Le panneau des filtres passe en dernier et ses menus reprennent leur largeur. Le verdict et l'en-tete de la fiche perdent leurs dernieres couleurs : le rouge ne sert qu'a juger. */ .filtres-panneau{order:99} .filtres-panneau select{flex:0 1 auto!important;width:auto!important;min-width:190px} .review-note-val,.review-note-lbl{color:var(--text)!important} .review-delta-out{color:var(--muted)!important} .review-arrow{color:var(--soft)!important} #candidate-modal .cmodal-dr-btn{border-color:var(--border-2)!important;color:var(--text)!important;background:transparent!important;border-radius:8px!important} #candidate-modal .cmodal-dr-btn:hover{border-color:var(--text)!important} #candidate-modal .cmodal-poste{color:var(--muted)!important} #candidate-modal .cmodal-section-title{border-left:0!important;padding-left:0!important} /* Les menus du panneau de filtres ne prennent pas toute la largeur. */ .filtres-panneau select{flex:0 0 auto!important;max-width:230px!important} /* ── Refonte, tour 22 : toute la largeur, et rien de deplie d'avance ── Retour de l'utilisateur, captures a l'appui : « etendre au max la page pour ne pas trop laisser d'espaces », « en mode accordeon et pas tout developpe direct », et la carte de progression « fait encore trop IA » (barre et badge en degrade rouge). */ /* La page prend l'ecran. Les textes de lecture gardent leur mesure : c'est la liste et le dossier qui profitent de la largeur, pas les paragraphes. */ .panel{max-width:none!important;padding:40px clamp(28px,3.4vw,64px) 100px!important} @media (max-width:900px){.panel{padding:28px 18px 84px!important}} .sh-sub{max-width:68ch!important} /* Au-dela de deux mille pixels, le dossier n'a plus besoin de s'etirer. */ .cockpit-grid{grid-template-columns:minmax(340px,.85fr) minmax(0,1.15fr)!important;max-width:1900px} .nmr-grille{grid-template-columns:repeat(auto-fit,minmax(420px,1fr))!important} .profils-grid,.offres,.eq-kpis{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))!important} /* Les blocs replies : le meme vocabulaire que les categories de la liste. */ .bloc-tete{display:flex!important;align-items:center;gap:12px;width:100%;user-select:none} .bloc-tete .ck-acc-chevron{margin-left:auto} .nmr-poste{padding-bottom:0!important} .nmr-poste .ck-acc-body > div{padding-bottom:14px} .nmr-h{margin-bottom:0!important;padding:14px 0!important;border-bottom:0!important} .nmr-poste .ck-acc-body:not(.collapsed) > div{padding-top:4px;border-top:1px solid var(--border)} .stats-poste-card .ck-acc-body > div{padding-top:8px} .ck-acc-chevron{width:9px;height:9px;border-right:1.5px solid var(--soft);border-bottom:1.5px solid var(--soft);transform:rotate(45deg);transition:transform .2s cubic-bezier(.22,.61,.36,1);flex:none;margin-top:-3px} .collapsed > .ck-acc-chevron,.ck-cat-head.collapsed .ck-acc-chevron{transform:rotate(-45deg)} /* La progression : une barre d'encre et un chiffre, plus de degrade ni de pastille rouge. */ .gamif-xp-fill{background:var(--text)!important;background-image:none!important;border-radius:3px!important} .gamif-xp-track{background:var(--s3)!important;height:5px!important;border-radius:3px!important} .gamif-level-badge{background:transparent!important;background-image:none!important;border:1.5px solid var(--border-2)!important;color:var(--text)!important; border-radius:10px!important;box-shadow:none!important;font-family:var(--font-display)!important;font-weight:800!important} .gamif-xp-txt{font-family:var(--font-sans)!important;color:var(--soft)!important} .gamif-obj-fill{background:var(--text)!important;background-image:none!important} .gamif-obj-track{background:var(--s3)!important} /* Le niveau atteint est le seul a porter le rouge : c'est lui qui se gagne. */ .gamif-level-badge.is-current,.gamif .gamif-level-badge{border-color:var(--accent)!important;color:var(--accent-texte,var(--accent))!important} /* ── Refonte, tour 23 : le rail sur un ecran etroit ── Le rail vertical n'existait qu'au-dessus de 901 px. En dessous, aucune regle : il retombait en barre horizontale, ses douze onglets sortaient de l'ecran et devenaient inatteignables, et la page s'elargissait a 1815 px dans une fenetre de 768. C'est ce que voyait un telephone ou une tablette en portrait. En dessous de 901 px, le rail devient une barre qui defile du bout du doigt : la marque reste a gauche, les onglets glissent, les outils du compte tiennent au bout. */ @media (max-width:900px){ #screen-admin,#screen-client{padding-left:0!important} #screen-admin > nav.nav,#screen-client > nav.nav{ position:sticky!important;top:0!important;left:auto!important;bottom:auto!important;width:auto!important; flex-direction:row!important;align-items:center!important;flex-wrap:nowrap!important; gap:4px!important;padding:8px 12px!important; overflow-x:auto!important;overflow-y:hidden!important; border-right:0!important;border-bottom:1px solid var(--border)!important; background:var(--bg)!important;z-index:100; scrollbar-width:none;-ms-overflow-style:none; -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain} #screen-admin > nav.nav::-webkit-scrollbar,#screen-client > nav.nav::-webkit-scrollbar{display:none} /* La marque, a gauche, sans defiler avec le reste. */ #screen-admin > nav.nav .logo,#screen-client > nav.nav .logo{ position:sticky;left:0;z-index:2;flex:none!important;margin:0 6px 0 0!important;padding:0 8px 0 0!important; background:var(--bg)!important;border-radius:0!important;height:38px!important;width:auto!important} #screen-admin > nav.nav .logo .logo-text{display:block!important;font-size:18px!important} #screen-admin > nav.nav .logo .logo-icon{width:22px!important;height:22px!important;filter:none!important} /* Les onglets : une taille que le doigt atteint, et ils ne se compriment pas. */ #screen-admin > nav.nav .nav-tab,#screen-client > nav.nav .nav-tab{ flex:0 0 auto!important;min-height:40px!important;padding:9px 14px!important; white-space:nowrap!important;border-bottom:0!important;border-radius:8px!important} #screen-admin > nav.nav .nav-tab.on::after,#screen-client > nav.nav .nav-tab.on::after{ left:10px!important;right:10px!important;top:auto!important;bottom:2px!important; width:auto!important;height:2px!important;border-radius:2px!important;transform:none!important;display:block!important} #screen-admin > nav.nav .nav-sep,#screen-client > nav.nav .nav-sep{ flex:none!important;width:1px!important;height:22px!important;margin:0 6px!important} /* Meri reprend sa place en tete de liste : dans une barre, elle n'aurait pas la place. */ #rail-meri{display:none!important} #ck-jalon{display:block!important} /* Les outils du compte : au bout de la barre, l'essentiel seulement. */ #screen-admin > nav.nav .nav-right,#screen-client > nav.nav .nav-right{ flex:0 0 auto!important;margin:0 0 0 6px!important;padding:0!important;gap:6px!important; flex-direction:row!important;width:auto!important;border-top:0!important} #screen-admin > nav.nav .tour-replay span:not(.icon-2d),#screen-admin > nav.nav .usage-badge{display:none!important} #screen-admin > nav.nav .theme-toggle,#screen-admin > nav.nav .user-menu-btn,#screen-admin > nav.nav .tour-replay{ min-width:40px!important;min-height:40px!important} .rail-palette{flex:0 0 auto!important;margin:0 4px 0 0!important;min-height:40px} .rail-palette span{display:none} .rail-palette kbd{display:none} .rail-palette::before{content:"Rechercher";font-weight:600} /* Le contenu repart sous la barre, sur toute la largeur. */ .panel{padding:22px 16px 90px!important} .cockpit-grid{grid-template-columns:1fr!important;gap:22px!important} .parcours{grid-template-columns:1fr 1fr!important;gap:10px 8px!important} .parcours::before{display:none!important} .etape{text-align:left!important;padding:4px 6px 4px 30px!important} .etape::before{left:0!important;transform:none!important;top:2px!important} } /* Sous 620 px, les commandes de la liste passent a la ligne plutot que de se serrer. */ @media (max-width:620px){ #admin-candidats .filter-bar{gap:8px!important} #admin-candidats .filter-bar .search-wrap{flex:1 1 100%!important;order:-1} .view-toggle,.filtres-btn{flex:0 0 auto} .btn-sm{min-height:38px} .sh h2,.sh h2.sh-title{font-size:26px!important} .parcours{grid-template-columns:1fr!important} } /* ── Refonte, tour 24 : des commandes que le doigt atteint ── La sonde a trouve, sur six ecrans, des boutons de 29 a 32 px et des cases a cocher de 17 px. Sur un ecran tactile, on les rate une fois sur deux. Sous 900 px, tout ce qui se clique fait au moins 40 px de haut, et les cases 20 px de cote. */ @media (max-width:900px){ .btn-sm,.view-btn,.stats-poste-invite,.src-mode,.jalon-btn,.filtres-btn, .ck-btn-primary,.ck-btn-ghost,.onb-action-ghost,.eq-btn,.idea-btn-cancel,.idea-btn-submit, .btn-primary,.tour-replay,.theme-toggle,.user-menu-btn,.usage-card-cta,.usage-card-cta-secondary{ min-height:40px!important;padding-top:9px!important;padding-bottom:9px!important} /* Les boutons ronds gardent leur forme : on agrandit sans les deformer. */ .theme-toggle,.user-menu-btn,.usage-badge{min-width:40px!important} /* Une icone seule dans un bouton : on lui donne de la surface autour. */ .panel button:not(.btn-sm):not(.nav-tab):not(.cmodal-tab):not(.palette-item) > .icon-2d:only-child{padding:10px;box-sizing:content-box} /* Les cases a cocher et les boutons radio, a la taille du doigt. */ input[type=checkbox],input[type=radio]{width:20px!important;height:20px!important;min-height:20px!important;accent-color:var(--accent)} .filter-checkbox,label:has(> input[type=checkbox]){min-height:40px;display:inline-flex!important;align-items:center;gap:10px!important} /* Les champs de saisie : la hauteur d'un bouton, et jamais de zoom au focus (iOS agrandit la page sous 16 px). */ input[type=text],input[type=email],input[type=search],input[type=tel],input[type=number],input[type=date],select,textarea{ font-size:16px!important;min-height:44px!important} textarea{min-height:88px!important} /* Les liens d'action en ligne dans une liste restent des zones, pas des mots. */ .meri-ck-lien button,.ck-email-edit,.nm-link{min-height:36px!important;padding:6px 4px!important} } /* ── Refonte, tour 25 : les tableaux glissent au lieu de deborder ── Le tableau du vivier sortait de 381 px sur un telephone, celui de l'equite de 25. Un tableau de dix colonnes ne rentre pas dans un telephone et le retrecir le rend illisible : il garde sa largeur et glisse du doigt, dans une enveloppe qui tient dans l'ecran. La couche plateforme pose l'enveloppe, cette regle l'habille. */ .table-defile{max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;scrollbar-width:thin} .table-defile::-webkit-scrollbar{height:8px} .table-defile::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:4px} .table-defile::-webkit-scrollbar-track{background:transparent} /* Une enveloppe qui faisait deja defiler : on la borne, sinon elle s'elargit avec son contenu. */ .table-bornee,.pool-table-wrap{max-width:100%!important;overflow-x:auto!important} /* Un parent en grille ou en flex refuse de retrecir sous son contenu : on l'autorise. */ .panel,.panel > *,.cockpit-grid > *,.ck-card,.ck-id{min-width:0} /* Le curseur de compatibilite : une piste et une pastille qu'on attrape. */ input[type=range]{height:24px;accent-color:var(--accent)} @media (max-width:900px){ input[type=range]{height:40px!important;min-height:40px!important;width:100%} /* Sur un telephone, le tableau du vivier commence par la colonne du candidat. */ .pool-table td:first-child,.pool-table th:first-child{position:sticky;left:0;background:var(--s1);z-index:1} :root[data-theme="dark"] .pool-table td:first-child,:root[data-theme="dark"] .pool-table th:first-child{background:#181C26} } /* Les listes de profils : le libelle ne se coupe plus, il passe a la ligne. */ .profil-list-lbl,.ideal-row{white-space:normal!important;overflow:visible!important;text-overflow:clip!important} @media (max-width:620px){ .profil-list-row{grid-template-columns:1fr auto!important;gap:4px 10px!important} .profil-list-bar{grid-column:1/-1} } /* ── Refonte, tour 26 : aucune colonne plus large que l'ecran ── Une grille ecrite minmax(420px,1fr) impose une colonne de 420 px : dans une fenetre de 360, elle deborde, et le telephone elargit alors toute la page. La sonde voyait la page s'ouvrir a 436 px au lieu de 360. Partout, le minimum devient min(Xpx,100%) : la colonne garde sa largeur de confort quand la place existe, et se contente de la place disponible sinon. */ .nmr-grille{grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))!important} .profils-grid,.offres,.eq-kpis{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))!important} .cockpit-grid{grid-template-columns:minmax(min(340px,100%),.85fr) minmax(0,1.15fr)!important} .offres-grid{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))!important} .src-grid{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))!important} .edit-info-grid{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))!important} .djs-grille{grid-template-columns:repeat(auto-fit,minmax(min(120px,100%),1fr))!important} /* L'ecran de connexion : la colonne du formulaire ne descend pas sous l'ecran. */ .login-layout{grid-template-columns:minmax(min(420px,100%),34%) 1fr} /* Les lignes a colonnes fixes se replient quand la largeur manque. */ @media (max-width:620px){ .rh-bar-row{grid-template-columns:1fr auto!important;gap:4px 10px!important} .rh-bar-row > :nth-child(2){grid-column:1/-1} .onb-session-row{grid-template-columns:1fr 1fr auto auto!important;gap:8px 6px!important} .onb-session-row > :first-child{grid-column:1/-1} .dr-disc-row,.reg-axe{grid-template-columns:1fr auto!important;gap:4px 10px!important} .dr-disc-row > :nth-child(2),.reg-axe > :nth-child(2){grid-column:1/-1} .ck-dim{grid-template-columns:1fr auto!important;gap:4px 10px!important} .ck-dim .b{grid-column:1/-1} } /* La regle precedente, ecrite sans borne, ecrasait la mise en une colonne du mobile : le dossier repartait sur deux colonnes dans 360 px. Elle ne vaut que sur large. */ @media (max-width:900px){ .cockpit-grid{grid-template-columns:1fr!important} .ck-row2{grid-template-columns:1fr!important} .ck-gauge{margin-left:0!important} } /* ── Refonte, tour 27 : l'en-tete d'un bloc replie tient dans l'ecran ── Certains en-tetes portent un bouton (« Ajouter une competence ») pose en bout de ligne : le chevron de l'accordeon se retrouvait pousse hors de l'ecran, et la page s'elargissait de quatorze pixels. Sous 700 px, l'en-tete passe a la ligne et le chevron garde sa place au bout du titre. */ .ck-cat-head,.bloc-tete{flex-wrap:wrap;padding-right:6px} .ck-acc-chevron{flex:none} @media (max-width:700px){ .ck-cat-head > .btn-sm,.bloc-tete > .btn-sm{order:9;flex:1 1 100%;margin-left:0!important;margin-top:8px} .ck-cat-head .ck-acc-chevron,.bloc-tete .ck-acc-chevron{order:5} } /* ── Refonte, tour 28 : la fiche et la barre d'outils sur un telephone ── Les captures au doigt montrent deux desordres : le couple Liste/Kanban chevauchait le bouton Filtres, et l'en-tete de la fiche s'eparpillait, avec un sommaire dont les titres de chapitre mangeaient la bande. */ @media (max-width:900px){ /* La barre d'outils de la liste : chaque commande a sa place, rien ne se superpose. */ #admin-candidats .filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px!important} #admin-candidats .filter-bar > *{flex:0 0 auto} .view-toggle{display:inline-flex!important;flex:0 0 auto;gap:4px;padding:3px;border-radius:10px;background:var(--s2);overflow:hidden} .view-toggle .view-btn{margin:0!important;position:static!important;transform:none!important;border-radius:8px!important;padding:0 14px!important} /* La fiche : l'identite se lit de haut en bas, le score reste au bout du nom. */ #candidate-modal .cmodal-header{flex-direction:column!important;align-items:stretch!important;gap:14px!important} #candidate-modal .cmodal-header-id{display:grid!important;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:start} #candidate-modal .cmodal-header-id > span:first-child{grid-row:span 2} #candidate-modal .cmodal-name{font-size:24px!important;line-height:1.05!important} #candidate-modal .cmodal-scores{order:-1;display:flex;justify-content:flex-start} #candidate-modal .cmodal-gauge .adq{align-items:flex-start!important} #candidate-modal .adq-num{font-size:34px!important} /* Les actions de l'en-tete : des lignes entieres, pas des morceaux empiles. */ #candidate-modal .cmodal-dr-btn,#candidate-modal .photo-action-btn{width:100%;justify-content:center} #candidate-modal .cmodal-actions-ligne{flex-direction:column;align-items:stretch} #candidate-modal .cmodal-actions-ligne .btn-sm{width:100%;justify-content:center} #candidate-modal .cmodal-meta{grid-template-columns:1fr!important;gap:8px!important} /* Le sommaire : une bande qui glisse. Les titres de chapitre y prendraient trois lignes pour rien : ils laissent la place aux rubriques elles-memes. */ .cmodal-chapitre{display:none!important} .cmodal-tabs{flex-direction:row!important;overflow-x:auto;gap:4px!important;padding-bottom:8px!important; border-bottom:1px solid var(--border);margin-bottom:18px;scrollbar-width:none} .cmodal-tabs::-webkit-scrollbar{display:none} .cmodal-tab{flex:0 0 auto!important;min-height:40px!important;padding:9px 14px!important} .cmodal-tab.on::after{left:10px!important;right:10px!important;top:auto!important;bottom:0!important;width:auto!important;height:2px!important} .cmodal-tabbed > .cmodal-section.cmodal-sec-on > .cmodal-section-title{font-size:19px!important} } /* ══════════════════════════════════════════════════════════════════════════ Refonte, tour 29 : LA MARGE, LA GRILLE, LE SCEAU ══════════════════════════════════════════════════════════════════════════ Decision prise sur docs/direction-preuve.html (variante 4), apres la question « le trait a gauche, tu es sur que ca ne fait pas vibe code ? ». Il le fait. Alors : . le trait de 3 px de l'element actif disparait, partout. Le rail se separe du contenu par une regle rouge continue : la marge d'un cahier. L'onglet, la ligne, la rubrique actifs se lisent par leur numero, qui passe au rouge. . tout ce qui numerote, date ou etiquette passe en chasse fixe (Fragment Mono). . plus rien d'arrondi : 2 px partout, les avatars deviennent des cases. . les boutons sont des tampons : bord d'encre, ombre dure de 2 px, ils s'enfoncent au clic. Le secondaire est souligne, jamais borde. . les tableaux deviennent des registres : en-tetes en capitales mono, colonnes tracees, chiffres a chasse fixe. . le seul rond du systeme : le sceau, sur le carton du verdict. Le bloc porte aussi les etats (focus clavier, desactive, chargement) et un mouvement unique, qui manquaient. */ :root,:root[data-theme="light"],:root[data-theme="dark"]{ --font-mono:"Fragment Mono",ui-monospace,Menlo,Consolas,monospace; --marge:rgba(229,32,42,.85); --mouv:cubic-bezier(.22,.61,.36,1);--t-court:120ms;--t-normal:220ms} /* ── La marge : le rail se termine par la regle rouge. ─────────────────── */ :root[data-theme="light"] #screen-admin > nav.nav,:root[data-theme="light"] #screen-client > nav.nav, #screen-admin > nav.nav,#screen-client > nav.nav{border-right:1.5px solid var(--marge)!important} #candidate-modal .cmodal-content{border-left:1.5px solid var(--marge)!important} @media (max-width:900px){ #screen-admin > nav.nav,#screen-client > nav.nav{border-right:0!important;border-bottom:1.5px solid var(--marge)!important} } /* Les onglets du rail : numerotes, sans icone, sans trait. Le numero de l'actif est rouge. */ #screen-admin > nav.nav,#screen-client > nav.nav{counter-reset:nt} #screen-admin > nav.nav .nav-tab,#screen-client > nav.nav .nav-tab{border-radius:0!important;padding-left:10px!important} #screen-admin > nav.nav .nav-tab::before,#screen-client > nav.nav .nav-tab::before{ counter-increment:nt;content:counter(nt,decimal-leading-zero);display:inline-block;width:26px;flex:none; font:11px/1 var(--font-mono);letter-spacing:.02em;color:var(--soft);position:static!important; background:none!important;height:auto!important;transform:none!important;opacity:1!important} #screen-admin > nav.nav .nav-tab.on::before,#screen-client > nav.nav .nav-tab.on::before{color:var(--accent-texte,var(--accent))} #screen-admin > nav.nav .nav-tab::after,#screen-client > nav.nav .nav-tab::after{display:none!important} #screen-admin > nav.nav .nav-tab > svg,#screen-admin > nav.nav .nav-tab > .icon-2d,#screen-admin > nav.nav .nav-tab > img, #screen-client > nav.nav .nav-tab > svg,#screen-client > nav.nav .nav-tab > .icon-2d{display:none!important} #screen-admin > nav.nav .nav-tab.on,#screen-client > nav.nav .nav-tab.on{font-weight:700!important} /* La liste des candidats : chaque ligne porte son numero ; celui de la ligne ouverte est rouge. */ .ck-rank-head{counter-reset:cr;font-family:var(--font-mono)!important;font-weight:400!important;font-size:11px!important;letter-spacing:.1em!important;text-transform:uppercase!important; border-top:1px solid var(--text);border-bottom:1px solid var(--border);padding:8px 0 8px 30px!important;margin-bottom:0!important} .ck-rankrow{counter-increment:cr;padding-left:0!important} .ck-rankrow::before,.ck-rankrow.on::before{content:counter(cr,decimal-leading-zero)!important;position:static!important;display:block;flex:none;width:30px!important; height:auto!important;top:auto!important;bottom:auto!important;left:auto!important;background:none!important;border-radius:0!important; font:11px/1 var(--font-mono);color:var(--soft)} .ck-rankrow.on::before{color:var(--accent-texte,var(--accent))!important} .ck-rowmatch,.adq-num,.ck-rowmatch *,.eq-kpi-val,.stats-poste-count{font-variant-numeric:tabular-nums lining-nums} /* Le sommaire de la fiche : numerote lui aussi, sans trait. */ .cmodal-tabs{counter-reset:ct} .cmodal-tab{padding-left:8px!important;border-radius:0!important} .cmodal-tab::before{counter-increment:ct;content:counter(ct,decimal-leading-zero);display:inline-block;width:28px;font:11px/1 var(--font-mono);color:var(--soft)} .cmodal-tab.on::before{color:var(--accent-texte,var(--accent))} .cmodal-tab.on::after{display:none!important} .cmodal-chapitre{font-family:var(--font-mono)!important;font-weight:400!important;font-size:10.5px!important;letter-spacing:.1em!important;padding-left:8px!important} @media (max-width:900px){.cmodal-tab.on::after{display:none!important}} /* Ce qui etiquette, date ou numerote : en chasse fixe. */ .sh-eyebrow,.ck-marq span,.cmodal-status-badge,.carton-k,.palette-type,.palette-pied,.rail-palette kbd,.etape,.gamif-xp,.gamif-objectifs-h,.gamif-succes-h, .cmodal-meta,.ck-rowsub,.ck-sub,.eq-kpi-label,.kanban-count,.ck-dim .b span,.bareme-card-pts,.filtres-n,.demo-bar .demo-bar-label{ font-family:var(--font-mono)!important;font-weight:400!important;letter-spacing:.02em} .sh-eyebrow{font-size:11.5px!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:var(--soft)!important} .sh-eyebrow::before{content:"/ "!important;display:inline!important;width:auto!important;height:auto!important;background:none!important;color:var(--accent-texte,var(--accent))!important;border-radius:0!important} .sh-eyebrow:hover{background:transparent!important} /* ── Les tampons. ────────────────────────────────────────────────────────── */ .ck-btn-primary,.btn-primary,.btn-sm,.ck-btn-ghost,.jalon-btn,.filtres-btn,.rail-meri-btn,.btn,button.btn,.cmodal-dr-btn,.photo-action-btn,.gamif-btn,.onb-btn{ border-radius:2px!important;border:1.5px solid var(--text)!important;box-shadow:2px 2px 0 var(--text)!important; transition:transform var(--t-court) var(--mouv),box-shadow var(--t-court) var(--mouv),background var(--t-court) ease,color var(--t-court) ease!important} .ck-btn-primary:hover,.btn-primary:hover,.btn-sm:hover,.ck-btn-ghost:hover,.jalon-btn:hover,.filtres-btn:hover,.rail-meri-btn:hover,.btn:hover,.cmodal-dr-btn:hover,.photo-action-btn:hover{ transform:translate(-1px,-1px)!important;box-shadow:3px 3px 0 var(--text)!important} .ck-btn-primary:active,.btn-primary:active,.btn-sm:active,.ck-btn-ghost:active,.jalon-btn:active,.filtres-btn:active,.rail-meri-btn:active,.btn:active,.cmodal-dr-btn:active,.photo-action-btn:active{ transform:translate(2px,2px)!important;box-shadow:0 0 0 var(--text)!important} .ck-btn-primary,.btn-primary{background:var(--accent)!important;color:#fff!important} .btn-sm,.ck-btn-ghost,.jalon-btn,.filtres-btn,.rail-meri-btn,.cmodal-dr-btn,.photo-action-btn{background:var(--s1)!important;color:var(--text)!important} :root[data-theme="light"] .btn-sm,:root[data-theme="light"] .ck-btn-ghost{background:#fff!important} :root[data-theme="light"] .ck-btn-ghost:hover,:root[data-theme="light"] .btn-sm:hover{background:#fff!important} /* Le retour, le lien doux : soulignes, pas bordes. */ .fiche-retour,.ck-lien,.lien-doux{border:0!important;box-shadow:none!important;padding:0 0 2px!important;border-bottom:1.5px solid currentColor!important;border-radius:0!important;background:none!important} .fiche-retour:hover{transform:none!important;border-color:var(--accent)!important;color:var(--text)!important} /* Liste / Kanban : deux cellules accolees, la cellule active s'inverse. */ .view-toggle{gap:0!important;padding:0!important;border:1.5px solid var(--text)!important;border-radius:2px!important;background:var(--s1)!important;overflow:hidden!important;box-shadow:2px 2px 0 var(--text)} .view-btn,.view-toggle .view-btn{border:0!important;border-right:1.5px solid var(--text)!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;color:var(--muted)!important;padding:0 14px!important;height:36px!important;margin:0!important;transform:none!important} .view-btn:last-child{border-right:0!important} .view-btn.on{background:var(--text)!important;color:var(--bg)!important} /* Le compteur de filtres, le badge de niveau : des cases. */ .filtres-btn .filtres-n{border-radius:2px!important} .gamif-level-badge{border-radius:2px!important;box-shadow:none!important} /* ── Plus rien d'arrondi. ────────────────────────────────────────────────── */ .ck-id,.ck-card,.bareme-card,.profil-card,.gamif,.jalon,.meri-ck,.kanban-card,.eq-kpi-card,.offre-card,.stats-poste-card,.nmr-poste, .palette-boite,.palette-item,.rail-palette,.carton-mots,.cmodal-status-badge,.ck-marq span,.bareme-card-pts,.lvl-badge,.demo-bar,.demo-bar select,.demo-bar button, input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],textarea,select,.login-box,.login-hero-visuel,.login-choisir, .panel,.card,.kanban-col,.onb-card,.eq-card,.ck-dim,.ck-bar,.ck-bar-f,.toast,.tooltip,.dropdown,.menu-custom,.select-custom,.select-menu,.chip,.tag,.badge{border-radius:2px!important} .avatar,.avatar-sm,.avatar-lg,.ck-avatar .avatar-lg,.ck-rowav .avatar,.ck-rowav .avatar-sm,:root[data-theme="light"] .avatar,:root[data-theme="light"] .avatar-sm,:root[data-theme="light"] .avatar-lg{border-radius:2px!important} .etape::before{border-radius:2px!important} .rail-palette kbd{border-radius:2px} .palette-boite{border:1.5px solid var(--text)!important;box-shadow:8px 8px 0 var(--text)!important} .palette-item.on{background:var(--text)!important;color:var(--bg)!important} .palette-item.on .palette-type,.palette-item.on .palette-sous{color:var(--bg)!important;opacity:.7} .demo-bar{box-shadow:4px 4px 0 var(--text)!important;border:1.5px solid var(--text)!important;animation:none!important} /* ── La grille du registre, des qu'il y a des colonnes. ─────────────────── */ table th{font:400 11px var(--font-mono)!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:var(--muted)!important; border-top:1px solid var(--text)!important;border-bottom:1px solid var(--border)!important;border-right:1px solid var(--border)!important;padding:9px 12px!important;background:transparent!important} table td{border-right:1px solid var(--border)!important;font-variant-numeric:tabular-nums} table th:last-child,table td:last-child{border-right:0!important} .eq-kpi-card,.stats-poste-card,.nmr-poste,.ck-card,.bareme-card,.profil-card{box-shadow:none!important} /* ── Le carton du verdict : sans halo, avec le sceau. ───────────────────── */ .carton::before{display:none!important} .carton-k{font:400 11.5px var(--font-mono)!important;letter-spacing:.1em!important;text-transform:uppercase;color:#8a8a92} .carton-mots{border-radius:2px!important;border:1.5px solid rgba(255,255,255,.35)!important;background:#0b0b0d!important} .carton-mots:focus{border-color:#f4f1eb!important} .carton-btn{border-radius:2px!important;transition:transform var(--t-court) var(--mouv),box-shadow var(--t-court) var(--mouv)} .carton-blanc{background:#f4f1eb!important;color:#0b0b0d!important;border:1.5px solid #f4f1eb!important;box-shadow:2px 2px 0 var(--accent)!important} .carton-blanc:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--accent)!important} .carton-blanc:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--accent)!important} .carton-fant{background:transparent!important;border:0!important;border-bottom:1.5px solid #f4f1eb!important;border-radius:0!important;padding:0 0 2px!important;color:#f4f1eb!important;align-self:center} .carton-fant:hover{border-color:var(--accent)!important} /* Le sceau : le seul rond. Il tient au bout de « c'est oui. », penche, avec sa date. */ .carton-titre .carton-r{position:relative;white-space:nowrap;padding-right:.62em} .carton-titre .carton-r::after{content:"OUI";position:absolute;right:-.1em;top:-.36em;width:.56em;height:.56em;border-radius:50%;background:var(--accent);color:#fff; display:grid;place-items:center;font:800 .14em/1 var(--font-display);letter-spacing:.03em;transform:rotate(-12deg); box-shadow:0 0 0 .045em #0b0b0d,0 0 0 .07em var(--accent)} .carton-signature{margin-top:22px;font:12px/1.5 var(--font-mono);color:#8a8a92} .carton-signature b{display:block;color:#f4f1eb;font-weight:400;width:180px;border-bottom:1px dotted #6a6a6a;padding-bottom:4px;margin-bottom:4px} /* ── L'ecran de connexion : la regle entre les deux colonnes, des tampons. ── */ .login-side-form{border-right:1.5px solid var(--marge)!important} .login-side-form input{border-radius:2px!important;border:1.5px solid var(--border-2)!important} .login-side-form input:focus{border-color:var(--text)!important;box-shadow:none!important} .login-hero-eyebrow{font:400 11.5px var(--font-mono)!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:var(--soft)!important} .login-hero-eyebrow::before{content:"/ ";color:var(--accent-texte,var(--accent))} .login-choisir-cap{font-family:var(--font-mono)!important;font-weight:400!important} /* ── Les etats. Ils manquaient. ──────────────────────────────────────────── */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible, .nav-tab:focus-visible,.cmodal-tab:focus-visible,.ck-rankrow:focus-visible,.view-btn:focus-visible,.palette-item:focus-visible,.bloc-tete:focus-visible{ outline:2px solid var(--accent)!important;outline-offset:3px!important} .ck-btn-primary:focus-visible,.btn-primary:focus-visible,.carton-blanc:focus-visible{outline-color:var(--text)!important} :focus:not(:focus-visible){outline:none} button:disabled,input:disabled,select:disabled,textarea:disabled,[aria-disabled="true"]{opacity:.42;cursor:not-allowed;pointer-events:none;box-shadow:none!important;transform:none!important} button[aria-busy="true"],button.is-loading{opacity:.75;cursor:progress;pointer-events:none} button,a,.nav-tab,.cmodal-tab,.ck-rankrow,.view-btn,label{-webkit-tap-highlight-color:transparent;touch-action:manipulation} .squelette{position:relative;overflow:hidden;background:var(--s2);border-radius:2px;min-height:14px} .squelette::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(127,127,127,.14),transparent);animation:sq 1.25s var(--mouv) infinite} @keyframes sq{100%{transform:translateX(100%)}} ::selection{background:rgba(229,32,42,.16);color:var(--text)} .nav-tab,.cmodal-tab,.ck-rankrow,.bloc-tete,.ck-cat-head,.poste-label,.palette-item{cursor:pointer} img{background:var(--s2)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} } /* ── Refonte, tour 29b : ce qui resistait a la marge ── Mesure faite apres le tour 29 : l'icone du rail etait un masque pose sur ::before, il masquait le numero ; le trait de l'onglet actif tenait par une regle plus specifique ; les boutons de la barre gardaient leur pilule par la meme voie ; les listes deroulantes, le titre de rubrique et le badge de succes n'etaient pas dans la liste ; le sceau du carton se mesurait sur sa propre taille de police. */ /* Le rail : le numero se voit, le trait d'actif s'en va. */ #screen-admin > nav.nav .nav-tab::before,#screen-client > nav.nav .nav-tab::before{ -webkit-mask:none!important;mask:none!important;-webkit-mask-image:none!important;mask-image:none!important; background:none!important;background-color:transparent!important;color:var(--soft);width:26px!important;height:auto!important;margin:0!important} #screen-admin > nav.nav .nav-tab.on::before,#screen-client > nav.nav .nav-tab.on::before{color:var(--accent-texte,var(--accent))!important;background:none!important} #screen-admin > nav.nav .nav-tab.on::after,#screen-client > nav.nav .nav-tab.on::after, :root[data-theme="light"] #screen-admin > nav.nav .nav-tab.on::after,:root[data-theme="light"] #screen-client > nav.nav .nav-tab.on::after{display:none!important} #screen-admin > nav.nav,#screen-client > nav.nav,#candidate-modal .cmodal-content,.login-side-form{border-right-width:2px!important} #candidate-modal .cmodal-content{border-right-width:0!important;border-left-width:2px!important} @media (max-width:900px){#screen-admin > nav.nav,#screen-client > nav.nav{border-right-width:0!important;border-bottom-width:2px!important}} /* Les boutons de la barre : des tampons, comme les autres. */ #screen-admin .filter-bar > .btn-sm,.btn-sm,.btn-sm.btn-sm-brand{border-radius:2px!important;border:1.5px solid var(--text)!important;box-shadow:2px 2px 0 var(--text)!important;background:var(--s1)!important;color:var(--text)!important;padding:8px 14px!important} :root[data-theme="light"] #screen-admin .filter-bar > .btn-sm,:root[data-theme="light"] .btn-sm{background:#fff!important} .ck-email-edit{border-radius:2px!important} #candidate-modal .cmodal-dr-btn{border-radius:2px!important;border:1.5px solid var(--text)!important} /* Les listes deroulantes : une case, un menu en carton. */ .msel-btn,.msel-opt,.msel-chk{border-radius:2px!important} .msel-btn{border:1.5px solid var(--border-2)!important} .msel-btn:hover,.msel-btn[aria-expanded="true"]{border-color:var(--text)!important} .msel-menu{border-radius:2px!important;border:1.5px solid var(--text)!important;box-shadow:6px 6px 0 var(--text)!important} /* Le titre de rubrique perd son trait ; le badge de succes devient une case. */ .cmodal-section-title::before,.ai-section.cmodal-section-title::before{display:none!important} .gamif-badge{border-radius:2px!important;filter:none!important;opacity:.55} .gamif-badge.is-on{opacity:1;border-color:var(--text)!important;background:transparent!important;color:var(--text)!important} .gamif-badge.is-on .icon-2d{background:var(--text)!important} /* Le carton : le sceau se mesure sur sa propre police, et les mots se lisent. */ .carton-mots,.carton-mots:focus{color:#f4f1eb!important;background:#0b0b0d!important} .carton-titre .carton-r{padding-right:.7em} .carton-titre .carton-r::after{width:4.2em;height:4.2em;right:-1em;top:-2.4em;font-size:.15em; box-shadow:0 0 0 .3em #0b0b0d,0 0 0 .5em var(--accent)} /* Le sous-titre d'une ligne reste en Funnel : en chasse fixe, il ne tenait plus sur 360 px. */ .ck-rowsub,.ck-sub{font-family:var(--font-sans)!important;letter-spacing:0} /* ── Refonte, tour 29c : les derniers restes ── Le bouton « Nouvelle evaluation » ecrivait en blanc sur blanc (une regle de marque plus specifique gardait sa couleur) ; les pastilles d'etat portaient leur pilule en style en ligne ; le sceau du carton mordait sur le nom ; sur 360 px, la colonne du numero prenait 3 px de trop au sous-titre. */ .btn-sm.btn-sm-brand,.ck-rankrow .btn-sm-brand,:root[data-theme="light"] .btn-sm-brand,:root[data-theme="light"] .ck-rankrow .btn-sm-brand, .btn-sm-brand:hover,:root[data-theme="light"] .btn-sm-brand:hover{color:var(--text)!important;background:#fff!important;border-color:var(--text)!important} :root[data-theme="dark"] .btn-sm-brand,:root[data-theme="dark"] .btn-sm-brand:hover{background:var(--s1)!important} [style*="border-radius:999px"],[style*="border-radius: 999px"],[style*="border-radius:100px"],[style*="border-radius:20px"],[style*="border-radius:12px"],[style*="border-radius:10px"],[style*="border-radius:16px"]{border-radius:2px!important} .carton-titre .carton-r::after{top:.05em;right:-1.7em} @media (max-width:900px){ .ck-rankrow::before,.ck-rankrow.on::before{width:22px!important;font-size:10px} .ck-rank-head{padding-left:22px!important} } /* ── Refonte, tour 30 : les restes, ecran par ecran ── Releve fait sur les captures de chaque onglet : les titres de categorie des profils gardaient un trait ; le vivier, l'import, les idees et le chatbot gardaient des rayons et des pilules ; les idees et le chatbot n'avaient pas de surtitre et portaient une icone dans le titre ; la modale d'evaluation restait a 12 px. */ /* Profils ideaux : la categorie est un en-tete de registre, pas un trait. */ .profils-cat-title{border-left:0!important;padding-left:0!important;font-family:var(--font-mono)!important;font-weight:400!important;font-size:11.5px!important; letter-spacing:.1em!important;text-transform:uppercase!important;color:var(--muted)!important;border-top:1px solid var(--text)!important;padding-top:10px!important} .profils-cat-title::before{content:"/ ";color:var(--accent-texte,var(--accent))} .profil-card{border-radius:2px!important} /* Vivier : les deux modes sont deux cellules, le reste est carre. */ .src-panel,.src-modes,.src-mode,.custom-select-trigger,.pool-disclaimer,.pool-filters,.pool-stat,.nmr-tg,.custom-select-menu,.custom-select-option{border-radius:2px!important} .src-modes{padding:0!important;gap:0!important;background:transparent!important;border:1.5px solid var(--text);box-shadow:2px 2px 0 var(--text)} .src-mode{border-right:1.5px solid var(--text)!important;box-shadow:none!important;color:var(--muted)!important;padding:0 16px!important;height:36px!important} .src-mode:last-child{border-right:0!important} .src-mode.on{background:var(--text)!important;color:var(--bg)!important} .custom-select-trigger{border:1.5px solid var(--border-2)!important;background:var(--s1)!important} .custom-select-trigger:hover,.custom-select-trigger[aria-expanded="true"]{border-color:var(--text)!important} .custom-select-menu{border:1.5px solid var(--text)!important;box-shadow:6px 6px 0 var(--text)!important} input[type=range]{accent-color:var(--text)} /* Import : la pastille PDF devient une case, le bouton noir un tampon, le cadre en pointilles reste (pointille = en attente). */ .import-icon-wrap{border-radius:2px!important;background:var(--s2)!important} .import-box,.acc,.export-step{border-radius:2px!important} .btn-add{border-radius:2px!important;border:1.5px solid var(--text)!important;box-shadow:2px 2px 0 var(--text)!important;background:var(--text)!important;color:var(--bg)!important} .btn-add:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--text)!important} .btn-add:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--text)!important} #admin-import label[style*="border-radius"]{border-radius:2px!important} /* Idees et chatbot : le titre perd son icone et prend la voix des autres ecrans ; les tris sont des cellules. */ #admin-idees h2 > svg,#admin-idees h2 > .icon-2d,#admin-chatbot h2 > svg,#admin-chatbot h2 > .icon-2d{display:none!important} #admin-idees h2,#admin-chatbot h2{font-family:var(--font-display)!important;font-weight:800!important;font-size:30px!important;letter-spacing:-.04em!important;line-height:1.05!important} #admin-idees h2::before{content:"/ IDÉES";display:block;font:400 11.5px var(--font-mono);letter-spacing:.08em;color:var(--soft);margin-bottom:14px} #admin-chatbot h2::before{content:"/ CHATBOT";display:block;font:400 11.5px var(--font-mono);letter-spacing:.08em;color:var(--soft);margin-bottom:14px} #admin-idees h2::before,#admin-chatbot h2::before{text-indent:0} .ideas-sort,.idea-dd-btn,.btn-new-idea{border-radius:2px!important} .ideas-sort{border:1.5px solid var(--text)!important;background:var(--s1)!important;color:var(--muted)!important;margin-right:-1.5px} .ideas-sort.on{background:var(--text)!important;color:var(--bg)!important;border-color:var(--text)!important} .btn-new-idea{border:1.5px solid var(--text)!important;box-shadow:2px 2px 0 var(--text)!important} #admin-chatbot .empty{border-radius:2px!important} /* Equite : le bilan et l'accordeon sont carres ; le canvas lit desormais le theme (pieces.js). */ .eq-btn,.eq-acc,.bias-caviardage{border-radius:2px!important} .eq-btn{border:1.5px solid var(--text)!important;box-shadow:2px 2px 0 var(--text)!important;background:var(--s1)!important;color:var(--text)!important} /* Evaluations : la modale, la croix, le pavé de depot ; la pastille de compte devient une case. */ .cmodal-content,.cmodal-close,.doc-ajout,.card{border-radius:2px!important} .cmodal-content{border:1.5px solid var(--text)!important;box-shadow:10px 10px 0 var(--text)!important} #candidate-modal .cmodal-content{border:0!important;border-left:2px solid var(--marge)!important;box-shadow:none!important} .cmodal-close{border:1.5px solid var(--text)!important;background:var(--s1)!important} .ck-cat-cnt{border-radius:2px!important;font-family:var(--font-mono)!important;font-weight:400!important} .ck-cat-dot{border-radius:0!important;width:7px!important;height:7px!important} /* Onboarding : les en-tetes de rubrique de la checklist en capitales mono, deja presque la. */ .onb-section-head,.onb-pole-badge{font-family:var(--font-mono)!important;font-weight:400!important;letter-spacing:.1em!important} .onb-pole-badge,.onb-field-inp,.onb-session-cell,.onb-referent-picker{border-radius:2px!important} /* ── Refonte, tour 30b : le trait de categorie des profils tenait par sa taille ; le bouton d'import par une regle plus specifique. ── */ .profils-cat-title::before{content:"/ "!important;width:auto!important;height:auto!important;background:none!important;color:var(--accent-texte,var(--accent))!important;margin-right:2px} #admin-import .btn-add,.import-box .btn-add,button.btn-add{border:1.5px solid var(--text)!important;box-shadow:2px 2px 0 var(--text)!important;border-radius:2px!important;transform:none} #admin-import .btn-add:hover,button.btn-add:hover{transform:translate(-1px,-1px)!important;box-shadow:3px 3px 0 var(--text)!important} #admin-import .btn-add:active,button.btn-add:active{transform:translate(2px,2px)!important;box-shadow:0 0 0 var(--text)!important} /* ── Refonte, tour 31 : les retours du compte reel ── Sept captures du compte de l'utilisateur, en sombre et en clair : la bascule Liste/Kanban gardait sa pilule par une regle de la barre ; les cartes kanban gardaient un trait de couleur, des puces de couleur et, en clair, des puces devenues des boites noires (le tour 19 peignait en encre tout ce qui portait un fond « #4aa37b », y compris « #4aa37b1a », fond et texte) ; le bouton de marque ecrivait blanc sur blanc en sombre ; les cellules du vivier gardaient leurs coins et leurs couleurs ; le raccourci de la palette debordait. */ /* Liste / Kanban : deux cellules, quelle que soit la regle de la barre. */ #screen-admin .filter-bar .view-toggle,.view-toggle{border-radius:2px!important;border:1.5px solid var(--text)!important;background:var(--s1)!important;padding:0!important;gap:0!important;box-shadow:2px 2px 0 var(--text)!important} #screen-admin .filter-bar .view-toggle .view-btn{border-radius:0!important;height:36px!important} /* Le bouton de marque, en sombre : transparent, bord et texte a l'encre claire. */ :root[data-theme="dark"] .btn-sm.btn-sm-brand,:root[data-theme="dark"] .btn-sm-brand,:root[data-theme="dark"] .btn-sm-brand:hover, :root[data-theme="dark"] .ck-rankrow .btn-sm-brand,:root[data-theme="dark"] #admin-equipe .btn-sm-brand{background:transparent!important;color:var(--text)!important;border-color:var(--text)!important} /* Le kanban : des cases, un seul rouge (le compteur de la colonne « Nouveau » n'a pas a pulser). */ .kanban-col,.kanban-card,.kanban-col-count,.kanban-card-pole,.kanban-card-score,.kanban-card-compat,.kanban-card-tag,.kanban-card .avatar{border-radius:2px!important} .kanban-card{border:1px solid var(--border)!important;border-left:1px solid var(--border)!important;box-shadow:none!important} .kanban-card:hover{border-color:var(--text)!important;transform:none!important} .kanban-col{background:transparent!important;border:1px solid var(--border)!important} .kanban-col-header{border-bottom:1px solid var(--text)!important} .kanban-col-title{font-family:var(--font-mono)!important;font-weight:400!important;font-size:11px!important;letter-spacing:.1em!important;color:var(--muted)!important} .kanban-col-title::before,.kanban-col-title i,.kanban-col-title .dot{display:none!important} .kanban-col-count{background:transparent!important;border:1px solid var(--border-2)!important;color:var(--text)!important;font-family:var(--font-mono)!important;font-weight:400!important;animation:none!important;box-shadow:none!important} .kanban-col-count.pulse-active{background:var(--text)!important;color:var(--bg)!important;border-color:var(--text)!important} .kanban-card-pole,.kanban-card-score,.kanban-card-compat,.kanban-card-tag{ background:transparent!important;color:var(--muted)!important;border:1px solid var(--border-2)!important; font-family:var(--font-mono)!important;font-weight:400!important;font-size:10.5px!important;letter-spacing:.06em!important;text-transform:uppercase} .kanban-card-score.is-perfect{color:var(--accent-texte,var(--accent))!important;border-color:var(--accent)!important} .kanban-card .avatar,.kanban-card .avatar-sm{background:var(--s2)!important;color:var(--muted)!important;border:1px solid var(--border-2)!important} :root[data-theme="light"] .kanban-card [style*="background:#"],:root[data-theme="light"] .kanban-card [style*="background-color:#"]{background:transparent!important} :root[data-theme="light"] .kanban-card [style*="color:#"]{color:var(--muted)!important} .kanban-card-name{font-weight:600!important} /* Le vivier : la matrice est un registre. Chaque cellule est une case a l'encre, la meilleure est rouge. */ .pool-td-compat-cell{border-radius:2px!important;border:1px solid var(--border-2)!important;background:transparent!important;color:var(--text)!important; font-family:var(--font-mono)!important;font-weight:400!important;font-size:13px!important;letter-spacing:0!important;transform:none!important;filter:none!important;box-shadow:none!important;outline:none!important;animation:none!important} .pool-table tbody tr:hover .pool-td-compat-cell{transform:none!important;filter:none!important} .pool-td-compat-cell.is-current{outline:none!important;border-style:dashed!important;border-color:var(--text)!important} .pool-td-compat-cell.is-best{box-shadow:none!important;border-color:var(--accent)!important;color:var(--accent-texte,var(--accent))!important} .pool-table th{font-family:var(--font-mono)!important;font-weight:400!important;font-size:11px!important;letter-spacing:.1em!important} .pool-table th::after,.pool-table th i{display:none!important} .pool-td-compat{font-family:var(--font-mono)!important;font-weight:400!important} .pool-table td,.pool-table th{border-right:1px solid var(--border)!important} .pool-table td:last-child,.pool-table th:last-child{border-right:0!important} .pool-table .avatar,.pool-table .avatar-sm{border-radius:2px!important} /* La palette dans le rail : le raccourci ne deborde pas. */ .rail-palette{overflow:hidden;padding:6px 6px 6px 10px!important;gap:6px!important} .rail-palette span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rail-palette kbd{flex:0 0 auto;font-size:10px!important;padding:1px 4px!important} /* Le Near-Miss Radar : le chiffre dit ce qu'il est (une compatibilite, en %), l'etiquette dit ce qu'elle est (le statut du dossier). */ .nmr-sc{font-family:var(--font-display)!important;font-weight:800!important;font-variant-numeric:tabular-nums} .nmr-sc small{font:400 10px var(--font-mono);color:var(--soft);margin-left:1px} .nmr-tg{font-family:var(--font-mono)!important;font-weight:400!important;font-size:10.5px!important;letter-spacing:.08em!important;border-radius:2px!important;border:1px solid var(--border-2)!important;color:var(--muted)!important;background:transparent!important} .nmr-tg.nmr-w{border-color:var(--accent)!important;color:var(--accent-texte,var(--accent))!important} .nmr-seuil span{font-family:var(--font-mono)!important;font-weight:400!important;letter-spacing:.1em!important} .nmr-legende{font:400 11px var(--font-mono);color:var(--soft);letter-spacing:.04em;margin:-6px 0 14px} /* Le bas du rail : le niveau est une case, pas un anneau. */ .rail-niveau,.nav-level,.gamif-rail-level{border-radius:2px!important} /* ── Refonte, tour 31b : le sombre n'a pas d'attribut ── Le theme sombre est le defaut : l'attribut data-theme n'est pose que pour le clair. Toutes les regles ecrites pour [data-theme="dark"] ne s'appliquaient jamais. Elles sont reprises ici avec :not([data-theme="light"]). */ :root:not([data-theme="light"]) .btn-sm.btn-sm-brand,:root:not([data-theme="light"]) .btn-sm-brand,:root:not([data-theme="light"]) .btn-sm-brand:hover, :root:not([data-theme="light"]) .ck-rankrow .btn-sm-brand,:root:not([data-theme="light"]) #admin-equipe .btn-sm-brand{background:transparent!important;color:var(--text)!important;border-color:var(--text)!important} :root:not([data-theme="light"]) .btn-sm,:root:not([data-theme="light"]) .ck-btn-ghost,:root:not([data-theme="light"]) .filtres-btn,:root:not([data-theme="light"]) .jalon-btn{background:transparent!important;color:var(--text)!important} :root:not([data-theme="light"]) .ck-btn-primary:focus-visible,:root:not([data-theme="light"]) .btn-primary:focus-visible{outline-color:#fff!important} /* Le kanban : le trait de couleur tenait par un pseudo-element ; la puce « parfait » est rouge ; le bouton sans classe est une case. */ .kanban-card::before,.kanban-card::after{display:none!important} .kanban-card{border-left-color:var(--border)!important} .kanban-card-compat.is-perfect,.kanban-card-score.is-perfect{border-color:var(--accent)!important;color:var(--accent-texte,var(--accent))!important} .kanban-card button,.kanban-card .kanban-card-hire{border-radius:2px!important;border:1px solid var(--border-2)!important;background:transparent!important;color:var(--muted)!important;box-shadow:none!important;font:400 10.5px var(--font-mono)!important;letter-spacing:.06em;text-transform:uppercase} /* L'equipe : le role est une etiquette de registre, le compte une case. */ .equipe-card-role{background:transparent!important;border:1px solid var(--border-2)!important;color:var(--muted)!important;border-radius:2px!important;font:400 10.5px var(--font-mono)!important;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px!important} .equipe-count{background:transparent!important;border:1px solid var(--border-2)!important;color:var(--text)!important;border-radius:2px!important;font-family:var(--font-mono)!important;font-weight:400!important} .equipe-section-title{font-family:var(--font-mono)!important;font-weight:400!important;font-size:11px!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:var(--muted)!important} .equipe-card,.eq-card{border-radius:2px!important;box-shadow:none!important} /* La palette du rail : on annule la retouche qui l'ecrasait ; seul le raccourci est fixe. */ .rail-palette{overflow:visible;padding:7px 8px 7px 10px!important;gap:8px!important;align-items:center!important} .rail-palette > span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;line-height:1.3} .rail-palette kbd{flex:0 0 auto;display:inline-block;line-height:1.3} /* Le Near-Miss Radar : une legende courte. */ .nmr-legende{white-space:normal;line-height:1.5} /* ── Refonte, tour 31c : la puce « parfait » du kanban gardait un liseré vert par un pseudo-element. ── */ .kanban-card-compat::before,.kanban-card-compat::after,.kanban-card-score::before,.kanban-card-score::after{display:none!important} .kanban-card-compat,.kanban-card-score{border-left-color:var(--border-2)!important} .kanban-card-compat.is-perfect,.kanban-card-score.is-perfect{border-color:var(--accent)!important} /* ── Refonte, tour 32 : le vivier en chapitres, et le bas du rail en cases ── Trois captures du compte reel : l'ecran du vivier empilait recherche, avertissement, filtres, chiffres, radar et matrice, avec la legende du radar repetee sous chaque poste. Il devient trois chapitres numerotes, un seul ouvert a la fois ; les chiffres tiennent sur une ligne ; la legende n'est ecrite qu'une fois. Le bas du rail (niveau, theme, compte) passe en cases. */ /* Les chapitres : un en-tete de registre, numerote, avec ce qu'il contient. */ .chap-tete{display:flex!important;align-items:center;gap:14px;padding:16px 0 14px;margin:8px 0 0;border-top:1px solid var(--text);cursor:pointer;user-select:none} .chap-tete:first-of-type{margin-top:0} .chap-num{font:400 11px var(--font-mono);letter-spacing:.06em;color:var(--soft);width:26px;flex:none} .chap-tete:not(.collapsed) .chap-num{color:var(--accent-texte,var(--accent))} .chap-titre{font:800 22px var(--font-display);letter-spacing:-.03em;color:var(--text)} .chap-compte{font:400 11px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft);margin-left:auto} .chap-tete .ck-acc-chevron{margin-left:0} .chap-cache{display:none!important} #admin-pool.chapitre .src-panel{margin-bottom:26px!important} #admin-pool.chapitre .nmr{margin-top:0!important} #admin-pool.chapitre .nmr-titre{display:none!important} #admin-pool.chapitre .nmr-legende{margin:0 0 16px;max-width:70ch} #admin-pool.chapitre .pool-disclaimer{margin:0 0 14px!important;padding:0!important;border:0!important;background:transparent!important;font:400 12.5px var(--font-sans);color:var(--soft)} #admin-pool.chapitre .pool-disclaimer .icon-2d{display:none!important} #admin-pool.chapitre .pool-filters{margin-bottom:18px!important;padding:0!important;border:0!important;background:transparent!important} /* Les chiffres : une ligne, pas quatre cartes. */ .pool-stat-row{display:flex!important;flex-wrap:wrap;gap:0!important;margin:0 0 8px!important;border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .pool-stat{flex:1 1 0;border:0!important;border-right:1px solid var(--border)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;padding:14px 18px 14px 0!important;display:flex;flex-direction:column} .pool-stat:first-child{padding-left:0!important} .pool-stat:not(:first-child){padding-left:18px!important} .pool-stat:last-child{border-right:0!important} .pool-stat > :first-child{order:2;font:400 11px var(--font-mono)!important;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)!important;margin:4px 0 0!important} .pool-stat b,.pool-stat strong,.pool-stat .pool-stat-val,.pool-stat > :nth-child(2){font:800 26px/1 var(--font-display)!important;letter-spacing:-.04em;color:var(--text)!important;font-variant-numeric:tabular-nums;margin:0!important} .pool-stat > :nth-child(3){order:3;font-size:12px!important;color:var(--soft)!important;margin-top:2px!important} @media (max-width:760px){.pool-stat{flex:1 1 45%;border-right:0!important;border-bottom:1px solid var(--border)!important;padding-left:0!important}} /* Le radar : les postes sont des lignes de registre, la legende une seule fois. */ .nmr-grille{gap:0!important;grid-template-columns:1fr!important} .nmr-poste{border:0!important;border-top:1px solid var(--border)!important;border-radius:0!important;padding:0!important;background:transparent!important} .nmr-poste:first-child{border-top:0!important} .nmr-h{padding:12px 0!important} .nmr-legende{font:400 12.5px var(--font-sans)!important;letter-spacing:0!important;color:var(--soft)!important;text-transform:none!important} /* Le marche : les sources sont des etiquettes de registre, le plafond une ligne. */ #src-pane-marche [class*="source"],#src-pane-marche [class*="src-tag"],#src-pane-marche .pill,#src-pane-marche span[style*="border-radius"]{border-radius:2px!important;background:transparent!important;border:1px solid var(--border-2)!important;color:var(--muted)!important;font:400 11px var(--font-mono)!important;letter-spacing:.04em} #src-pane-marche [class*="quota"] [class*="bar"],#src-pane-marche progress{border-radius:0!important} /* Le bas du rail : niveau, theme et compte en cases. */ .nav-level{border-radius:2px!important;border:1.5px solid var(--text)!important;background:transparent!important;width:36px!important;height:36px!important} .nav-level svg,.nav-level canvas,.nav-level::before,.nav-level::after{display:none!important} .nav-level-num{font-family:var(--font-mono)!important;font-weight:400!important;font-size:13px!important;color:var(--text)!important} .theme-toggle,.user-menu-btn,.user-menu-avatar,.user-menu-link,.user-menu,.nav-help,.nav-right button,.nav-right a{border-radius:2px!important} .user-menu-avatar{border:1.5px solid var(--border-2)!important} .user-menu{border:1.5px solid var(--text)!important;box-shadow:6px 6px 0 var(--text)!important} .lvl-badge,.lvl-top,.lvl-bon,.lvl-moyen,.lvl-faible{background:transparent!important;border:1px solid var(--border-2)!important;color:var(--muted)!important;border-radius:2px!important;font:400 10.5px var(--font-mono)!important;letter-spacing:.06em;text-transform:uppercase} /* ── Refonte, tour 32b : l'ordre des chapitres du vivier ── L'avertissement et les filtres vivent hors du bloc rendu, avant lui : le chapitre de la matrice se retrouvait au-dessus des ecartes de peu. Le bloc rendu devient transparent (display:contents) et chaque morceau prend son rang dans la colonne. Rien ne bouge dans le DOM. */ #admin-pool.chapitre{display:flex!important;flex-direction:column} #admin-pool.chapitre > #admin-pool-content{display:contents} #admin-pool.chapitre > .sh{order:0} #admin-pool.chapitre .chap-tete[data-chap="chercher"]{order:1} #admin-pool.chapitre .src-panel{order:2} #admin-pool.chapitre .chap-tete[data-chap="ecartes"]{order:3} #admin-pool.chapitre .nmr{order:4} #admin-pool.chapitre .chap-tete[data-chap="matrice"]{order:5} #admin-pool.chapitre .pool-stat-row{order:6;margin-top:4px!important} #admin-pool.chapitre .pool-disclaimer{order:7;margin-top:14px!important} #admin-pool.chapitre .pool-filters{order:8} #admin-pool.chapitre .pool-table-wrap{order:9} #admin-pool.chapitre .pool-legend{order:10} #admin-pool.chapitre > :not([class]):not([id]){order:11} #admin-pool.chapitre .chap-tete{margin-top:0} #admin-pool.chapitre .src-panel,#admin-pool.chapitre .nmr,#admin-pool.chapitre .pool-legend{margin-bottom:24px!important} /* ── Refonte, tour 32c : la ligne des chiffres se cache avec son chapitre ; le titre d un poste replie reste a l encre. ── */ .pool-stat-row.chap-cache,.chap-cache.chap-cache{display:none!important} .nmr-h .nmr-t,.nmr-h.collapsed .nmr-t{color:var(--text)!important} /* ── Refonte, tour 33 : la campagne d'evaluation, cote RH ── Le bloc pose par assets/campagne-*.js au-dessus de l'onglet Evaluations : un chiffre d'avancement, six compteurs en une ligne, quatre chapitres (personnel, planning, 360, suivi). Meme vocabulaire que le reste : registre, filets, chasse fixe, tampons. */ .camp{margin:0 0 30px} .camp-charge,.camp-vide{padding:18px 0;color:var(--muted)} .camp-vide{border-top:1px solid var(--text)} .camp-vide b{display:block;font:800 22px var(--font-display);letter-spacing:-.03em;color:var(--text);margin:6px 0} .camp-vide p{max-width:62ch;margin:0 0 14px} .camp-sur{display:block;font:400 11.5px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--soft)} .camp-sur::before{content:"/ ";color:var(--accent-texte,var(--accent))} .camp-tete{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;border-top:1px solid var(--text);padding-top:14px} .camp-pct{display:flex;align-items:baseline;gap:12px;margin-top:6px} .camp-pct b{font:800 44px/1 var(--font-display);letter-spacing:-.05em;color:var(--accent-texte,var(--accent));font-variant-numeric:tabular-nums} .camp-pct b small{font-size:.45em;color:var(--soft)} .camp-pct span{color:var(--muted);font-size:14px} .camp-actions{display:flex;gap:10px;flex-wrap:wrap} .camp-chiffres{display:flex;flex-wrap:wrap;margin:16px 0 4px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .camp-chiffres > div{flex:1 1 0;min-width:120px;padding:12px 16px 12px 0;border-right:1px solid var(--border)} .camp-chiffres > div:not(:first-child){padding-left:16px} .camp-chiffres > div:last-child{border-right:0} .camp-chiffres b{display:block;font:800 22px/1 var(--font-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums} .camp-chiffres b small{font:400 12px var(--font-mono);color:var(--soft);letter-spacing:0} .camp-chiffres span{font:400 11px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)} .camp-chap{border-top:1px solid var(--border)} .camp-chap-tete{display:flex;align-items:center;gap:14px;width:100%;padding:14px 0;background:none;border:0;color:inherit;text-align:left;cursor:pointer} .camp-num{font:400 11px var(--font-mono);color:var(--soft);width:26px;flex:none} .camp-chap.ouvert .camp-num{color:var(--accent-texte,var(--accent))} .camp-titre{font:800 19px var(--font-display);letter-spacing:-.03em;flex:1} .camp-compte{font:400 11px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)} .camp-chap .ck-acc-chevron{transition:transform .2s} .camp-chap.ouvert .ck-acc-chevron{transform:rotate(180deg)} .camp-corps{padding:0 0 22px 40px} @media (max-width:900px){.camp-corps{padding-left:0}} .camp-aide{color:var(--muted);max-width:70ch;margin:0 0 12px;font-size:14px} .camp-note{color:var(--soft);font-size:12.5px;max-width:80ch;margin:10px 0 0} .camp-ligne{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;margin:0 0 12px} .camp-alerte{color:var(--accent-texte,var(--accent))!important;font-style:normal} .camp-boutons{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0 0} .camp-boutons label.btn-sm{cursor:pointer} .camp-rapport{margin-top:12px;border:1px solid var(--border);padding:12px 14px;font-size:13.5px} .camp-rapport p{margin:6px 0 0;color:var(--muted)} .camp-table-wrap{max-width:100%;overflow-x:auto} .camp-table{width:100%;border-collapse:collapse;font-size:13.5px} .camp-table td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:top} .camp-table td small{display:block;color:var(--soft);font-size:12px} .camp-table input[type=date]{font:13px var(--font-mono);background:var(--s1);color:var(--text);border:1.5px solid var(--border-2);border-radius:2px;padding:5px 8px;color-scheme:light dark} .camp-doux{color:var(--muted)} .camp-mono{font-family:var(--font-mono);font-size:12.5px;white-space:nowrap} .camp-etapes{white-space:nowrap} .camp-et{display:inline-block;font:400 10.5px var(--font-mono);letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--border-2);color:var(--soft);padding:2px 5px;margin:0 3px 3px 0} .camp-et.ok{border-color:var(--text);color:var(--text)} .camp-et.ok::before{content:"✓ "} .camp-row-act{white-space:nowrap} .camp-row-act .btn-sm{padding:5px 10px!important} .camp-lien{background:none;border:0;border-bottom:1.5px solid currentColor;padding:0 0 1px;margin-left:10px;font:600 13px var(--font-sans);color:var(--text);cursor:pointer} .camp-suivi input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)} .camp-360{border-top:1px solid var(--text);margin-top:14px} .camp-360-l{display:grid;grid-template-columns:220px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--border)} @media (max-width:760px){.camp-360-l{grid-template-columns:1fr}} .camp-360-evalue{font-weight:700} .camp-360-evs{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .camp-ev{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-2);padding:3px 4px 3px 8px;font-size:13px} .camp-ev i{font:400 10px var(--font-mono);font-style:normal;letter-spacing:.05em;text-transform:uppercase;color:var(--soft)} .camp-ev.deja{border-color:var(--accent);border-style:dashed} .camp-ev button{background:none;border:0;color:var(--soft);cursor:pointer;font-size:15px;line-height:1;padding:0 4px} .camp-ev button:hover{color:var(--accent-texte,var(--accent))} .camp-ajout{display:inline-flex;gap:4px} .camp-ajout select{font:12.5px var(--font-sans);border:1px dashed var(--border-2);background:transparent;color:var(--muted);padding:3px 6px;border-radius:2px;max-width:170px} .camp-modal{position:fixed;inset:0;z-index:7000;background:rgba(0,0,0,.35);display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px;overflow:auto} .camp-modal-boite{background:var(--s1);color:var(--text);width:min(560px,100%);border:1.5px solid var(--text);box-shadow:10px 10px 0 var(--text);padding:22px 24px} .camp-modal-boite h3{font:800 24px var(--font-display);letter-spacing:-.035em;margin:6px 0 14px} .camp-modal-boite label{display:block;font-size:13px;font-weight:600;margin:0 0 10px} .camp-modal-boite input[type=datetime-local],.camp-modal-boite select{display:block;width:100%;margin-top:4px;font:14px var(--font-sans);background:var(--s1);color:var(--text);border:1.5px solid var(--border-2);border-radius:2px;padding:8px 10px;color-scheme:light dark} .camp-g2{display:grid;grid-template-columns:1fr 140px;gap:10px} .camp-invites{border-top:1px solid var(--border);margin-top:6px;padding-top:10px} .camp-invites > b{display:block;font:400 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin-bottom:6px} .camp-inv{display:flex!important;gap:10px;align-items:flex-start;font-weight:500!important;margin:0 0 6px!important} .camp-inv input{accent-color:var(--accent);margin-top:3px} .camp-inv i{font:400 10.5px var(--font-mono);font-style:normal;color:var(--soft);text-transform:uppercase;letter-spacing:.05em} .camp-inv small{display:block;color:var(--soft);font-size:12px} .camp-fiche{border:1px solid var(--border);border-left:2px solid var(--marge,var(--accent));padding:12px 14px;margin:0 0 14px;font-size:13.5px} .camp-fiche > div{margin-top:6px} .camp-fiche i{display:block;font:400 10.5px var(--font-mono);font-style:normal;letter-spacing:.05em;text-transform:uppercase;color:var(--soft)} /* ── Refonte, tour 33b : le tableau de suivi garde toutes ses colonnes et glisse au lieu de rogner. ── */ .camp-suivi{min-width:1180px} .camp-suivi td:first-child{min-width:190px} .camp-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} /* ── Refonte, tour 34 : la campagne se lit d'un coup d'oeil ── En haut, une phrase (ce qu'il faut faire maintenant), le pourcentage, un bouton. Dessous, cinq etapes cote a cote : faite (encre), en cours (rouge), a venir (gris). Puis le calendrier en frise, et le detail de l'etape choisie. */ .camp-tete{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto;align-items:end;gap:22px} @media (max-width:900px){.camp-tete{grid-template-columns:1fr}} .camp-phrase{font:800 24px/1.15 var(--font-display);letter-spacing:-.03em;margin:8px 0 0;max-width:34ch;color:var(--text)} .camp-pct{flex-direction:column;align-items:flex-end!important;gap:0!important;margin:0!important;text-align:right} .camp-pct span{font:400 11px var(--font-mono)!important;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)!important;line-height:1.3} @media (max-width:900px){.camp-pct{align-items:flex-start!important;text-align:left}} .camp-etapes-l{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:22px 0 0;padding:0;border-top:1px solid var(--border)} @media (max-width:900px){.camp-etapes-l{grid-template-columns:1fr 1fr}} @media (max-width:520px){.camp-etapes-l{grid-template-columns:1fr}} .camp-et-b{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;height:100%;text-align:left;background:none;border:0;border-top:3px solid var(--border);margin-top:-2px;padding:12px 14px 14px 0;cursor:pointer;color:var(--text)} .camp-etapes-l li + li .camp-et-b{padding-left:14px;border-left:1px solid var(--border)} .camp-et-b.fait{border-top-color:var(--text)} .camp-et-b.cours{border-top-color:var(--accent)} .camp-et-b.on{background:var(--s2)} .camp-et-b:hover{background:var(--s2)} .camp-et-n{font:400 11px var(--font-mono);letter-spacing:.06em;color:var(--soft)} .camp-et-b.cours .camp-et-n{color:var(--accent-texte,var(--accent))} .camp-et-b.fait .camp-et-n{color:var(--text)} .camp-et-t{font:800 16px var(--font-display);letter-spacing:-.02em} .camp-et-b.avenir .camp-et-t{color:var(--muted)} .camp-et-v{font:800 20px/1.1 var(--font-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums} .camp-et-d{font-size:12px;color:var(--soft);line-height:1.35} .camp-jauge{display:block;width:100%;height:4px;background:var(--s3);margin:4px 0 2px} .camp-jauge i{display:block;height:100%;background:var(--text)} .camp-et-b.cours .camp-jauge i{background:var(--accent)} .camp-frise{margin:20px 0 0;border-top:1px solid var(--border);padding-top:10px} .camp-frise-mois{position:relative;height:16px;margin-left:34%} .camp-frise-mois span{position:absolute;top:0;font:400 10.5px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft);transform:translateX(-2px)} .camp-frise-l{display:grid;grid-template-columns:34% 1fr;align-items:center;gap:0;padding:4px 0} .camp-frise-lib{font-size:13px;padding-right:14px;line-height:1.3} .camp-frise-lib small{display:block;font:400 11px var(--font-mono);color:var(--soft)} .camp-frise-piste{position:relative;height:14px;background:repeating-linear-gradient(90deg,transparent 0 calc(100%/12 - 1px),var(--border) calc(100%/12 - 1px) calc(100%/12))} .camp-frise-piste i{position:absolute;top:2px;bottom:2px;background:var(--border-2)} .camp-frise-piste i.passe{background:var(--text)} .camp-frise-piste i.encours{background:var(--accent)} .camp-frise-piste b{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--accent)} @media (max-width:640px){.camp-frise-l{grid-template-columns:1fr}.camp-frise-mois{margin-left:0}} .camp-detail{margin-top:22px;border-top:1px solid var(--text);padding-top:14px} .camp-detail-t{font:800 20px var(--font-display);letter-spacing:-.03em;margin:0 0 10px} .camp-sous-t{font:400 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin:22px 0 8px} .camp-liste td{padding:8px 12px!important} .camp-grp td{background:var(--s2);font:400 11px var(--font-mono)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:7px 12px!important} .camp-grp span{float:right;color:var(--text)} .camp-pts{white-space:nowrap} .camp-pt{display:inline-block;font:400 10.5px var(--font-mono);letter-spacing:.04em;text-transform:uppercase;padding:2px 6px;margin:0 4px 0 0;border:1px solid var(--border-2);color:var(--soft)} .camp-pt.ok{background:var(--text);border-color:var(--text);color:var(--bg)} .camp-legende{font-size:12px;color:var(--soft);display:inline-flex;align-items:center;gap:2px;flex-wrap:wrap} .camp-row-act small{display:block;color:var(--soft);font-size:11.5px} .camp-fait{display:inline-flex;align-items:center;gap:6px;font-size:13px;cursor:pointer} .camp-fait input{width:18px;height:18px;accent-color:var(--accent)} .camp-det{border-top:1px solid var(--border);padding:8px 0} .camp-det summary{cursor:pointer;font-size:14px} .camp-det p{margin:6px 0 0;font-size:13px;color:var(--muted);max-height:180px;overflow:auto} .camp-large{width:min(680px,100%)!important} /* ── Refonte, tour 34b : le reste de l'onglet Evaluations parle la meme langue ── Sous la campagne, les fiches annuelles et la banque de competences : des en-tetes de registre (titre, compte en chasse fixe), sans puce. La frise perd sa grille : les barres et le trait du jour suffisent. */ .camp-frise-piste{background:linear-gradient(var(--border),var(--border)) 0 50%/100% 1px no-repeat!important} #admin-evaluations .ck-cat-sec{margin:0!important;border-top:1px solid var(--text)} #admin-evaluations .ck-cat-head{display:flex!important;align-items:center;gap:12px;padding:16px 0!important;background:none!important;border:0!important;font:800 19px var(--font-display)!important;letter-spacing:-.03em!important;color:var(--text)!important} #admin-evaluations .ck-cat-dot{display:none!important} #admin-evaluations .ck-cat-cnt{font:400 11px var(--font-mono)!important;letter-spacing:.06em;border:0!important;background:none!important;color:var(--soft)!important;padding:0!important} #admin-evaluations .ck-acc-body > div > .card{border:0!important;padding:0!important;background:none!important;box-shadow:none!important} #admin-evaluations .ck-acc-body.collapsed{min-height:0!important;padding:0!important;margin:0!important} .camp{margin-bottom:34px!important} /* ── Refonte, tour 34c : les listes de choix de la campagne ne gardent pas le style du navigateur. ── */ .camp-ajout select,.camp-modal-boite select{appearance:none;-webkit-appearance:none;padding-right:28px!important;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%276%27%3E%3Cpath d=%27M1 1l4 4 4-4%27 fill=%27none%27 stroke=%27%238c8c8c%27 stroke-width=%271.5%27/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 10px center!important} /* ── Refonte, tour 35 : le nom d'un participant ouvre sa vue collaborateur ── Un bouton qui se lit comme le nom : souligne au survol, focus visible. */ .camp-nom{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .15s ease-out} .camp-nom:hover{text-decoration-color:currentColor} .camp-nom:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .camp-360-evalue .camp-nom{font:inherit} /* ── Refonte, tour 36 : des surfaces pour separer les sections, l'agenda des entretiens, le choix du creneau (calendrier, heures, duree, salle), l'apercu du mail. ── Chaque etape ouverte se pose sur une surface (s2), les groupes sur une surface plus marquee (s3) : en sombre comme en clair, l'oeil distingue les blocs sans lire. */ .camp-detail{background:var(--s2);border:1px solid var(--border);border-top:3px solid var(--text);padding:18px 20px 20px;margin-top:22px} .camp-detail-t{margin:0 0 12px} .camp-grp td{background:var(--s3)!important;color:var(--text)!important;border-top:1px solid var(--border-2)} .camp-liste tr:not(.camp-grp) td{background:var(--s1)} .camp-liste tr:not(.camp-grp):hover td{background:var(--s2)} .camp-table-wrap{border:1px solid var(--border);margin-top:12px} .camp-chiffres{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px} .camp-chiffres > div{min-width:120px;padding:10px 14px;background:var(--s1);border:1px solid var(--border);display:flex;flex-direction:column;gap:2px} .camp-chiffres b{font:800 24px/1.1 var(--font-display);letter-spacing:-.03em} .camp-chiffres span{font:400 11px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)} .camp-chiffres .alerte b,.camp-chiffres .alerte span{color:var(--accent-texte,var(--accent))} .camp-chiffres .alerte{border-color:var(--accent)} #admin-evaluations .ck-cat-sec{background:var(--s2);border:1px solid var(--border);border-top:3px solid var(--text);padding:0 20px;margin:0 0 18px!important} #admin-evaluations .ck-acc-body > div > .card{padding:0 0 16px!important} .camp-360-l{background:var(--s1);border:1px solid var(--border);padding:12px 14px;margin:8px 0} .camp-360{border-top:0} /* L'agenda : un bloc par jour, les entretiens en lignes horaires. */ .camp-agenda{display:grid;gap:14px;margin-top:4px} .camp-jour{background:var(--s1);border:1px solid var(--border);padding:0 0 4px} .camp-jour.auj{border-color:var(--accent)} .camp-jour h5{display:flex;align-items:baseline;gap:8px;margin:0;padding:10px 14px;background:var(--s3);font:500 14px var(--font-sans);border-bottom:1px solid var(--border)} .camp-jour h5 b{font:800 15px var(--font-display);text-transform:capitalize} .camp-jour h5 i{margin-left:auto;font:400 11px var(--font-mono);color:var(--soft)} .camp-jour.auj h5 b{color:var(--accent-texte,var(--accent))} .camp-rdv{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--border)} .camp-rdv:last-child{border-bottom:0} .camp-rdv.fait{opacity:.6} .camp-rdv-h{font:400 13px var(--font-mono);display:flex;flex-direction:column;line-height:1.3} .camp-rdv-h small{color:var(--soft);font-size:11px} .camp-rdv-qui small{display:block;color:var(--soft);font-size:12px} .camp-rdv-act{display:flex;gap:12px;align-items:center} .camp-afaire{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px} .camp-afaire-l{background:var(--s1);border:1px solid var(--border);padding:12px 14px;display:grid;gap:4px} .camp-afaire-l small{color:var(--soft);font-size:12px} .camp-afaire-l .btn-sm{justify-self:start;margin-top:6px} @media (max-width:640px){.camp-rdv{grid-template-columns:52px 1fr}.camp-rdv-act{grid-column:1/-1;justify-content:flex-end}} /* Planifier : la proposition en une phrase, puis le calendrier et les reglages cote a cote. */ .camp-propose{font-size:15px;line-height:1.4;margin:0 0 14px;padding:12px 14px;background:var(--s2);border-left:3px solid var(--accent)} .camp-propose i{font:400 11px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft);margin-left:6px} .camp-plan{display:grid;grid-template-columns:260px 1fr;gap:20px} @media (max-width:640px){.camp-plan{grid-template-columns:1fr}} .camp-etq{display:block;font:400 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin:0 0 6px} .camp-etq + .camp-pilules,.camp-etq + .camp-heures{margin-bottom:14px} .camp-cal-t{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px} .camp-cal-t b{font:700 14px var(--font-sans);text-transform:capitalize} .camp-cal-t button{background:none;border:1px solid var(--border-2);width:30px;height:30px;cursor:pointer;color:var(--text);font-size:18px;line-height:1} .camp-cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:3px} .camp-cal-g span{font:400 10.5px var(--font-mono);color:var(--soft);text-align:center;padding:4px 0} .camp-cal-g button{position:relative;height:34px;background:var(--s1);border:1px solid var(--border);color:var(--text);font:500 13px var(--font-sans);cursor:pointer} .camp-cal-g button:hover:not(:disabled){border-color:var(--text)} .camp-cal-g button:disabled{opacity:.3;cursor:default} .camp-cal-g button.auj{border-color:var(--accent)} .camp-cal-g button.on{background:var(--text);color:var(--bg);border-color:var(--text)} .camp-cal-g button i{position:absolute;right:3px;top:2px;font:400 9px var(--font-mono);color:var(--accent-texte,var(--accent));font-style:normal} .camp-cal-g button.on i{color:var(--bg)} .camp-heures{display:grid;grid-template-columns:repeat(6,1fr);gap:4px} .camp-heures button,.camp-pilules button{background:var(--s1);border:1px solid var(--border);color:var(--text);font:500 13px var(--font-sans);padding:7px 6px;cursor:pointer} .camp-heures button:hover:not(:disabled),.camp-pilules button:hover{border-color:var(--text)} .camp-heures button:disabled{opacity:.3;cursor:default} .camp-heures button.pris{color:var(--soft);background:repeating-linear-gradient(45deg,transparent 0 4px,var(--s3) 4px 6px)} .camp-heures button.on,.camp-pilules button.on{background:var(--text);color:var(--bg);border-color:var(--text)} .camp-pilules{display:flex;flex-wrap:wrap;gap:6px} .camp-pilules button small{display:block;font:400 10px var(--font-mono);color:inherit;opacity:.7} .camp-g2b{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:6px} @media (max-width:640px){.camp-g2b{grid-template-columns:1fr}} .camp-modal-boite .camp-invites{border-top:0;margin-top:8px;padding-top:0} .camp-modal-boite .ck-btn-primary,.camp-modal-boite .btn-sm{font:inherit} /* L'apercu du mail : l'entete, puis le mail tel quel dans un cadre. */ .camp-mail-tete{display:grid;gap:4px;margin:8px 0 12px;font-size:14px} .camp-mail-tete i{font:400 11px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft);display:inline-block;min-width:54px;font-style:normal} .camp-mail{width:100%;height:min(60vh,560px);border:1px solid var(--border);background:#F6F6F4} /* ── Refonte, tour 37 : invites en listes deroulantes, suggestions, RH qui mene, agenda par RH ── Une liste = des puces (nom, role, e-mail) et un champ de recherche qui ouvre une liste deroulante maison ; les suggestions s'ajoutent d'un clic. */ .camp-filtre{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 14px} .camp-filtre button{background:var(--s1);border:1px solid var(--border);color:var(--text);font:600 13px var(--font-sans);padding:7px 12px;cursor:pointer;display:inline-flex;gap:8px;align-items:baseline} .camp-filtre button small{font:400 11px var(--font-mono);color:var(--soft)} .camp-filtre button:hover{border-color:var(--text)} .camp-filtre button.on{background:var(--text);color:var(--bg);border-color:var(--text)} .camp-filtre button.on small{color:var(--bg);opacity:.75} .camp-chips{display:flex;flex-direction:column;gap:6px;margin:0 0 8px} .camp-chip{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;background:var(--s2);border:1px solid var(--border);padding:7px 10px} .camp-chip > span{font:600 13.5px var(--font-sans);line-height:1.3;min-width:0} .camp-chip i{font:400 10.5px var(--font-mono);font-style:normal;color:var(--soft);text-transform:uppercase;letter-spacing:.05em;margin-left:4px} .camp-chip small{display:block;font:400 12px var(--font-sans);color:var(--soft);overflow-wrap:anywhere} .camp-chip button{background:none;border:0;color:var(--soft);font-size:18px;line-height:1;cursor:pointer;padding:0 2px} .camp-chip button:hover{color:var(--accent-texte,var(--accent))} .camp-combo{position:relative} .camp-combo input{width:100%;box-sizing:border-box;font:14px var(--font-sans);background:var(--s1);color:var(--text);border:1px solid var(--border-2);padding:9px 11px} .camp-combo input:focus{outline:2px solid var(--accent);outline-offset:-1px} .camp-combo ul{position:absolute;left:0;right:0;top:100%;z-index:5;list-style:none;margin:2px 0 0;padding:4px 0;background:var(--s1);border:1.5px solid var(--text);box-shadow:6px 6px 0 var(--text);max-height:260px;overflow:auto} .camp-combo li{padding:7px 11px;cursor:pointer;display:grid;gap:1px} .camp-combo li b{font:600 13.5px var(--font-sans)} .camp-combo li small{font:12px var(--font-sans);color:var(--soft)} .camp-combo li[aria-selected="true"],.camp-combo li:hover{background:var(--s3)} .camp-combo li.vide{color:var(--soft);cursor:default} .camp-sugg{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px} .camp-sugg > span{font:400 10.5px var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--soft);margin-right:2px} .camp-sugg button{background:none;border:1px dashed var(--border-2);color:var(--text);font:500 12.5px var(--font-sans);padding:4px 8px;cursor:pointer} .camp-sugg button:hover{border-style:solid;border-color:var(--text)} .camp-sugg button i{font:400 10px var(--font-mono);font-style:normal;color:var(--soft);text-transform:uppercase} .camp-cal-g button.hors{opacity:.45;background:repeating-linear-gradient(45deg,transparent 0 4px,var(--s3) 4px 6px)} .camp-cal-g button.hors.on{opacity:1} .camp-propose i.hors{color:var(--accent-texte,var(--accent))} .camp-modal-boite .camp-invites > b{margin-bottom:8px} /* ── Refonte, tour 38 : supprimer un creneau de l'agenda ── */ .camp-lien.camp-suppr{color:var(--danger,#b42318)} .camp-lien.camp-suppr:hover{color:var(--text)} /* ── Refonte, tour 39 : lisibilite partout (sonde de contraste, seuils WCAG 4,5 et 3) ── Le gris secondaire du theme clair passait a 3,4:1 sur blanc : il descend a #666 (5,7:1). Les couleurs d'etat codees pour un seul theme recoivent leur pendant. */ :root[data-theme="light"],:root[data-theme="light"] #screen-login, :root[data-theme="light"] .ck-id,:root[data-theme="light"] .ck-card,:root[data-theme="light"] .ck-rankrow, :root[data-theme="light"] .cockpit-grid,:root[data-theme="light"] .cockpit-detail,:root[data-theme="light"] .cockpit-rank, :root[data-theme="light"] .ck-row2,:root[data-theme="light"] .ck-dims{--soft:#666666} :root{--ambre-texte:#f5bc51} :root[data-theme="light"]{--ambre-texte:#8a5a00} /* Libelles du cockpit ecrits en clair fixe : invisibles sur blanc. */ :root[data-theme="light"] .ck-comp-l,:root[data-theme="light"] .ck-btn-ghost,:root[data-theme="light"] .tour-prev{color:var(--text)} :root[data-theme="light"] .ck-rowmatch[style*="cdd3e3"]{color:var(--text)!important} /* « Remplir la demo » : une regle de bouton recouvrait son fond rouge. */ #seedDemoBtn{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important} /* Etats de la fiche candidat. */ :root[data-theme="light"] .ai-reliability.is-low{color:#8a5a00;background:#fdf3dc;border-color:#ecd29a} :root[data-theme="light"] .disc-dominant-R{color:#a3221d} :root[data-theme="light"] .disc-dominant-J{color:#8a5a00} :root[data-theme="light"] .disc-dominant-V{color:#1d6b46} :root[data-theme="light"] .disc-dominant-B{color:#1d55a0} :root:not([data-theme="light"]) .ai-card-strengths .ai-card-title{color:#4ade80} :root:not([data-theme="light"]) .ai-card-concerns .ai-card-title{color:#fbbf24} :root:not([data-theme="light"]) .behavior-card-title{color:#fbbf24!important} :root:not([data-theme="light"]) .behavior-card-vigilance .behavior-card-title{color:#f87171!important} :root:not([data-theme="light"]) .mail-history-empty[style*="--red"]{color:#f87171!important} :root[data-theme="light"] .chip{color:var(--text)} /* Les lettres DISC prennent l'encre du theme. */ canvas.disc-lettres{color:var(--text)} /* Statistiques : le titre en encre, la couleur du poste reste sur le trait. */ .stats-poste-title{color:var(--text)} .stats-poste-title::before{background:var(--poste,currentColor)} /* Badges et apprentissages pas encore acquis : ils se distinguent par le trait, pas par un texte efface. */ .gamif-badge:not(.is-on){opacity:1;border-style:dashed;color:var(--muted)} .gamif-badge:not(.is-on) .icon-2d{opacity:.45} .eq-learn-card.is-empty{opacity:1;border-style:dashed} /* ── Tour 39 b : le theme sombre n'a pas d'attribut, on le vise par « pas clair ». ── */ :root:not([data-theme="light"]) .eq-pct.is-alert,:root:not([data-theme="light"]) .eq-alert-txt{color:#f87171} /* ── Tour 40 : rouge lisible sur fond sombre ── Le rouge de marque (#e5202a) plafonne a 4,1:1 en texte sur le fond sombre. Une variante reservee au TEXTE l'eclaircit en mode sombre ; fonds et boutons gardent le rouge exact. */ :root:not([data-theme="light"]){--accent-texte:#ff5a61;--rouge-texte:#ff6b6b} :root[data-theme="light"]{--accent-texte:var(--accent);--rouge-texte:#c81e1e} /* Bascule du RH qui mene l'entretien : le nom devient un bouton, le menu reste en registre. */ .camp-rh{background:none;border:0;border-bottom:1px dashed currentColor;padding:0 0 1px;font:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:4px} .camp-rh:hover{color:var(--text)} .camp-rh:focus-visible{outline:2px solid var(--text);outline-offset:2px} .camp-menu-rh{position:fixed;z-index:1000;min-width:180px;background:var(--bg);border:1px solid var(--border);box-shadow:0 10px 30px rgba(0,0,0,.14);padding:6px 0;display:flex;flex-direction:column} .camp-menu-rh b{font:500 11px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft);padding:4px 14px 6px} .camp-menu-rh button{background:none;border:0;text-align:left;font:500 14px var(--font-sans);color:var(--text);padding:9px 14px 9px 30px;cursor:pointer;position:relative;min-height:38px} .camp-menu-rh button:hover:not(:disabled),.camp-menu-rh button:focus-visible{background:var(--s1);outline:none} .camp-menu-rh button[aria-checked="true"]::before{content:"";position:absolute;left:13px;top:50%;width:7px;height:7px;margin-top:-4px;background:var(--text)} .camp-menu-rh button:disabled{opacity:.45;cursor:not-allowed} /* Planning : rang dans l'organigramme et service, en tete de carte */ .camp-afaire-l .camp-svc{font-family:'Fragment Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent,#b8322a)} /* Entretiens : bascule Agenda / Tableau et recapitulatif */ .camp-vues{display:inline-flex;margin:4px 0 14px;border:1px solid var(--border)} .camp-vues button{background:var(--s1);border:0;color:var(--soft);font:600 12px var(--font-mono);letter-spacing:.04em;text-transform:uppercase;padding:6px 12px;cursor:pointer} .camp-vues button+button{border-left:1px solid var(--border)} .camp-vues button.on{background:var(--text);color:var(--bg)} .camp-vues button:focus-visible{outline:2px solid var(--text);outline-offset:2px} .camp-recap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 10px} .camp-recap p{margin:0;font-size:13.5px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline} .camp-recap p b{font:700 22px var(--font-sans)} .camp-recap p span{color:var(--soft)} .camp-recap-t th{text-align:left;font:600 11px var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--soft);padding:8px 12px;border-bottom:1px solid var(--text);white-space:nowrap} .camp-recap-t td{white-space:nowrap} .camp-recap-t td.mono{font:13px var(--font-mono)} .camp-recap-t tr.fait td{color:var(--soft)} .camp-recap-t tbody tr:hover td{background:var(--s1)} .camp-etat{font-size:12.5px;color:var(--soft)} .camp-etat.ok{color:var(--text);font-weight:600} /* Onboarding : la pastille de l arrivant importe sa photo */ label.onb-card-av{cursor:pointer;display:block} label.onb-card-av:hover .avatar{outline:1.5px solid var(--text);outline-offset:2px} label.onb-card-av:focus-within .avatar{outline:2px solid var(--text);outline-offset:2px}