/* GÉNÉRÉ par scripts/extraire.py depuis Ancrag (app/ui.py) — ne pas éditer. */ @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/ancrag-ui/polices/inter-var.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/ancrag-ui/polices/jetbrainsmono-var.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} :root{--sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-5:1.5rem;--sp-6:2rem;--r-1:8px;--r-2:11px;--r-3:14px;--r-pill:99px;--fs-1:.75rem;--fs-2:.8125rem;--fs-3:.875rem;--fs-4:.9375rem; --fs-5:1.0625rem;--fs-6:1.3125rem;--fs-7:1.5rem;--fs-lecture:1rem;--bg:#0d0f14;--surface:#12141a;--card:#171a21;--elev:#1e222a;--border:#262a33; --border-l:#333845;--text:#d1d4dc;--text-2:#8a8d98;--muted:#7e8391; --blue:#2962ff;--blue-l:#5481ff;--blue-bg:color-mix(in srgb,var(--blue) 16%,var(--card));--green:#089981;--green-l:#26a69a; --green-bg:color-mix(in srgb,var(--green) 16%,var(--card));--red:#f23645;--red-l:#f55e6a;--red-bg:color-mix(in srgb,var(--red) 16%,var(--card)); --orange:#ff9800;--orange-bg:color-mix(in srgb,var(--orange) 16%,var(--card));--code:#d9a7ff;--glow:color-mix(in srgb,var(--blue) 14%,transparent);--strong:#fff;--logo-s1:color-mix(in srgb,var(--blue-l) 32%,transparent);--logo-s2:color-mix(in srgb,var(--blue-l) 70%,transparent);--logo-a:#7aa2ff;--logo-b:#22d3ee;--logo-glow:color-mix(in srgb,var(--blue) 45%,transparent)} *{box-sizing:border-box} @keyframes fadeUp{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}} html{background:#0d0f14;color-scheme:dark} body{font-family:'Inter',system-ui,sans-serif;color:var(--text);max-width:880px; margin:0 auto;padding:1.2rem;font-size:var(--fs-4);line-height:1.55;-webkit-font-smoothing:antialiased; background:radial-gradient(900px 420px at 50% -12%,color-mix(in srgb,var(--blue) 7%,transparent),transparent 60%) var(--bg); min-height:100vh} body>*{animation:fadeUp .35s ease both} a{color:var(--blue-l);text-decoration:none;transition:color .12s} a:hover{color:var(--blue-l)} p a:hover,li a:hover,.md a:hover,.steptxt a:hover,.tiny a:hover,.outils-aide a:hover {text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px} /* Au clavier, on doit voir ou l'on est : les champs avaient un etat de focus, pas les liens, boutons, onglets ni details. */ :where(a,button,summary,select,[tabindex]):focus-visible{outline:2px solid var(--blue); outline-offset:2px;border-radius:var(--r-1)} :where(a,button,summary,select,[tabindex]):focus:not(:focus-visible){outline:none} h1{font-size:var(--fs-5);font-weight:600;margin:.5rem 0 1rem;letter-spacing:.01em} h3{font-size:var(--fs-1);font-weight:600;color:var(--text-2);text-transform:uppercase; letter-spacing:.09em;margin:1.7rem 0 .6rem;display:flex;align-items:center;gap:.5rem} h3 .count{background:var(--elev);border:1px solid var(--border-l);border-radius:var(--r-pill); padding:.05rem .55rem;font-size:var(--fs-1);color:var(--text-2)} /* ---- barre de navigation ---- */ :root{--h-nav:59px} .topbar{position:fixed;top:0;left:0;right:0;z-index:40;background:var(--bg); box-shadow:0 1px 0 var(--border),0 10px 24px -10px rgba(0,0,0,.6);animation:none} .top{max-width:880px;margin:0 auto;padding:.7rem 1.2rem;display:flex; justify-content:space-between;align-items:center;gap:1rem} body:has(.topbar){padding-top:4.5rem} /* Titre, recherche et filtres ne bougent pas : la page ne defile pas, c'est la liste qui a son propre defilement. `100dvh` (et non `100vh`) pour que la barre d'adresse mobile ne rogne pas la zone visible. */ body:has(.stickytop){height:100dvh;overflow:hidden;display:flex;flex-direction:column} .stickytop{position:relative;z-index:35;flex:none;background:var(--bg);padding:.9rem 0 .1rem} .stickytop .sect{margin-top:0} .stickytop .filterbar{margin-bottom:.85rem} .stickytop .searchbar{margin-bottom:.9rem} .pagescroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain; -webkit-overflow-scrolling:touch;padding-bottom:1.2rem; scrollbar-width:thin;scrollbar-color:var(--border-l) transparent} .pagescroll::-webkit-scrollbar{width:9px} .pagescroll::-webkit-scrollbar-track{background:transparent} .pagescroll::-webkit-scrollbar-thumb{background:var(--border-l);border-radius:var(--r-pill)} .pagescroll::-webkit-scrollbar-thumb:hover{background:var(--muted)} /* Les avis d'import restent au-dessus de la liste, sans defiler avec elle. */ body:has(.stickytop)>.avis{flex:none} .brand{display:flex;align-items:center;gap:.5rem;font-weight:700;letter-spacing:.01em;font-size:var(--fs-4)} a.brand{color:var(--text);text-decoration:none;transition:opacity .12s} a.brand:hover{color:var(--text);opacity:.78} .brand .mark svg{width:30px;height:30px;display:block;filter:drop-shadow(0 2px 7px var(--logo-glow))} .brand .mark{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:none;border:0;box-shadow:none} .wm,.wordmark{color:var(--strong)} .wm b,.wordmark b{color:var(--blue-l)} .brand-name b{color:var(--blue-l)} .nav{display:flex;gap:1.1rem;align-items:center;font-size:var(--fs-2)} /* Les trois espaces forment un groupe : un rail commun, l'onglet courant en pastille dedans. L'avatar reste dehors — ce n'est pas un espace, c'est toi. */ .navseg{display:flex;gap:.15rem;padding:3px;border-radius:var(--r-pill); background:var(--surface);border:1px solid var(--border)} .nav a:not(.avatar){display:inline-flex;align-items:center;gap:.4rem;height:28px;padding:0 .7rem; border-radius:var(--r-pill);color:var(--text-2);font-weight:500; transition:color .12s,background .12s} .nav a:not(.avatar) svg{width:15px;height:15px;flex:none;opacity:.9} .nav a:not(.avatar):hover{color:var(--blue-l);background:color-mix(in srgb,var(--blue-l) 18%,var(--surface))} .nav a.on{color:var(--text);background:var(--card); box-shadow:0 1px 2px rgba(0,0,0,.35),inset 0 0 0 1px var(--border-l)} .nav a.on svg{opacity:1;color:var(--blue-l)} .nav a.on:hover{color:var(--text);background:var(--card)} [data-theme=clair] .nav a.on:hover{color:var(--blue);background:color-mix(in srgb,var(--blue) 18%,var(--surface))} [data-theme=clair] .nav a.on{color:var(--text);background:var(--card); box-shadow:0 1px 3px rgba(45,52,72,.16),inset 0 0 0 1px var(--border-l)} [data-theme=clair] .nav a.on svg{color:var(--blue)} .avatar{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center; justify-content:center;position:relative;flex:none;color:var(--pc,var(--blue-l)); background:color-mix(in srgb,var(--pc,var(--blue-l)) 16%,var(--surface)); border:1px solid color-mix(in srgb,var(--pc,var(--blue-l)) 38%,transparent); transition:border-color .15s,background .15s,box-shadow .15s} .avatar:hover{border-color:var(--pc,var(--blue-l)); background:color-mix(in srgb,var(--pc,var(--blue-l)) 28%,var(--surface))} .avatar:focus-visible{outline:none;border-color:var(--pc,var(--blue-l)); box-shadow:0 0 0 3px color-mix(in srgb,var(--pc,var(--blue-l)) 25%,transparent)} .avatar svg{width:18px;height:18px} .nav a.avatar.on,[data-theme=clair] .nav a.avatar.on{color:var(--pc,var(--blue-l));background:color-mix(in srgb,var(--pc,var(--blue-l)) 22%,transparent);border-color:var(--pc,var(--blue-l));box-shadow:none} .nav a.avatar.on:hover,[data-theme=clair] .nav a.avatar.on:hover{background:color-mix(in srgb,var(--pc,var(--blue-l)) 34%,var(--surface))} .avatar .abadge{position:absolute;top:-2px;right:-2px;min-width:9px;height:9px;border-radius:var(--r-pill);background:var(--red);border:2px solid var(--bg)} /* ---- cartes ---- */ .card{background:var(--card);border:1px solid var(--border); border-radius:var(--r-2);padding:.95rem 1.05rem;margin:.6rem 0; transition:border-color .15s,transform .15s,box-shadow .15s} .card:hover{border-color:color-mix(in srgb,var(--blue-l) 38%,transparent);transform:translateY(-1px);box-shadow:0 6px 22px rgba(0,0,0,.55)} /* ---- stats ---- */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:.6rem;margin:.3rem 0 1.5rem} .statico{display:none;width:17px;height:17px;color:var(--text-2);margin-bottom:.35rem} .stats-lg{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .stat{min-width:0;background:var(--card);border:1px solid var(--border);border-radius:var(--r-2);padding:.85rem 1rem} .stat b{display:block;font-size:var(--fs-7);font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--blue-l)} .stat span{font-size:var(--fs-1);color:var(--text-2);text-transform:uppercase;letter-spacing:.09em} .stat.accent b{color:var(--blue-l)}.stat.ok b{color:var(--green-l)} /* Ecarts : carte coloree par gravite + modale. Le socle est `:target`, en CSS pur — la CSP du site est `script-src 'self'`, aucun script en ligne. Un fichier servi (/assets/ecarts.js) n'ajoute que l'accessoire : touche Echap et geste de glissement. Sans lui, tout continue de fonctionner. */ a.stat.ec{background:var(--ec-bg);border-color:var(--ec-bd)} a.stat.ec b{color:var(--ec-fg)} a.stat.ec:hover{border-color:var(--ec-fg)} .ec-g{--ec-bg:var(--red-bg);--ec-bd:var(--red);--ec-fg:var(--red-l)} .ec-c{--ec-bg:var(--orange-bg);--ec-bd:var(--orange);--ec-fg:var(--orange)} .ec-t{--ec-bg:var(--card);--ec-bd:var(--border-l);--ec-fg:var(--text)} .ecmod{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:1rem;background:rgba(4,6,10,.6)} .ecmod:target{display:flex} .ecfond{position:absolute;inset:0} .ecbox{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border-l);border-radius:var(--r-2);width:100%;max-width:47rem;max-height:82vh;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.55)} .ecmod:target .ecbox{animation:ecin .16s ease-out} @keyframes ecin{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.ecmod:target .ecbox{animation:none}} .ecpoignee{display:none;flex:none;width:2.6rem;height:4px;border-radius:2px;background:var(--border-l);margin:.6rem auto .15rem} .echaut{display:flex;align-items:flex-start;gap:.8rem;padding:1.05rem 1.25rem .9rem;border-bottom:1px solid var(--border)} .echt{min-width:0} .ectitre{font-size:1.2rem;font-weight:700;letter-spacing:-.02em;line-height:1.2} .ecsous{margin:.28rem 0 0;font-size:.85rem;color:var(--text-2);line-height:1.45} .ecrouge{color:var(--red-l)} .ecx{margin-left:auto;flex:none;font-size:1.45rem;line-height:1;padding:.1rem .35rem;border-radius:8px;color:var(--text-2);text-decoration:none} .ecx:hover{color:var(--text);background:var(--border)} .eccorps{overflow:auto;-webkit-overflow-scrolling:touch;padding:0 1.25rem .35rem} .ecgrp{display:flex;align-items:center;gap:.5rem;margin:1.05rem 0 .1rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-2)} .ecgrp b{font-weight:700;color:var(--text)} .ecgrp i{flex:1;height:1px;background:var(--border)} .ecl{position:relative;display:flex;gap:.55rem;align-items:baseline;flex-wrap:wrap;padding:.62rem 0 .62rem .85rem;border-bottom:1px solid var(--border)} .ecl:last-child{border-bottom:0} .ecl::before{content:"";position:absolute;left:0;top:.7rem;bottom:.7rem;width:3px;border-radius:2px;background:var(--ecl-c)} .ecl.r{--ecl-c:var(--red)} .ecl.j{--ecl-c:var(--orange)} .ecsujet{flex:none;font-size:.71rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;padding:.17rem .45rem;border-radius:7px;white-space:nowrap;color:var(--ecl-c);background:color-mix(in srgb,var(--ecl-c) 17%,transparent)} .ect{flex:1;min-width:13rem;font-size:.94rem;line-height:1.45} .ecage{flex:none;font-size:.76rem;padding:.17rem .5rem;border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--text-2);background:var(--border)} .ecage.vieux{color:var(--red-l);background:var(--red-bg)} .ecpied{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;padding:.8rem 1.25rem;border-top:1px solid var(--border)} .ecpied span{margin-left:auto;font-size:.78rem;color:var(--text-2)} /* Mobile : plein ecran, pas de croix (hors de portee du pouce sur un ecran plein), fermeture par glissement vers le bas — la poignee l'annonce. */ @media(max-width:34rem){ .ecmod{padding:0;align-items:stretch} .ecbox{max-width:none;max-height:none;height:100%;border:0;border-radius:0;box-shadow:none} .ecmod:target .ecbox{animation:ecmont .18s ease-out} @keyframes ecmont{from{transform:translateY(14px);opacity:.6}to{transform:none;opacity:1}} .ecpoignee{display:block} .ecx{display:none} .echaut{padding:.7rem 1.05rem .8rem} .eccorps{padding:0 1.05rem .35rem} .ecpied{padding:.75rem 1.05rem} .ect{min-width:100%;order:3} .ecpied span{margin-left:0} } /* ---- badges & chips ---- */ .badge{display:inline-block;font-size:var(--fs-1);font-weight:600;letter-spacing:.05em; padding:.17rem .52rem;border-radius:var(--r-1);text-transform:uppercase;vertical-align:middle} .b-creer{background:var(--green-bg);color:var(--green-l)} .b-mettre_a_jour{background:var(--blue-bg);color:var(--blue-l)} .b-supprimer{background:var(--red-bg);color:var(--red-l)} .b-greffer_source{background:var(--orange-bg);color:var(--orange)} .b-auto,.b-humain{background:var(--elev);color:var(--text-2)} .b-annule{background:var(--red-bg);color:var(--red-l)} .chip{display:inline-block;background:var(--surface);border:1px solid var(--border); border-radius:var(--r-1);padding:.28rem .6rem;font-size:var(--fs-1);margin:.15rem .3rem .15rem 0; font-family:'JetBrains Mono',monospace} .chip b{color:var(--blue-l);font-weight:500} /* ---- boutons (tailles BSN : py-2.5 / text-sm / medium) ---- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem; padding:.625rem 1.25rem;border-radius:var(--r-1);border:0;font-size:var(--fs-3);font-weight:500; cursor:pointer;font-family:inherit;line-height:1.25; transition:background .12s,border-color .12s,color .12s,opacity .12s} .btn:active{transform:translateY(1px)} .btn:disabled:active,.btn[disabled]:active{transform:none} a.btn{text-decoration:none} a.btn-danger,a.btn-green,a.btn-danger:hover,a.btn-green:hover{color:#fff} a.btn-blue,a.btn-blue:hover{color:var(--sur-accent,#fff)} [data-theme=clair] a.btn-danger:hover,[data-theme=clair] a.btn-green:hover{color:#fff} [data-theme=clair] a.btn-blue:hover{color:var(--sur-accent,#fff)} a.btn-ghost{color:var(--text)} a.btn-ghost:hover{color:var(--blue-l)} .btn-green{background:var(--green);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.14)} .btn-green:hover{background:color-mix(in srgb,var(--green) 86%,white)} .btn-blue{background:var(--blue);color:var(--sur-accent,#fff);box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.14)} .btn-blue:hover{background:color-mix(in srgb,var(--blue) 86%,white)} [data-theme=clair] .btn-blue:hover{background:color-mix(in srgb,var(--blue) 88%,black)} .btn-red{background:var(--red-bg);color:var(--red-l);border:1px solid color-mix(in srgb,var(--red) 40%,transparent)} .btn-red:hover{background:color-mix(in srgb,var(--blue-l) 20%,var(--card));border-color:var(--blue-l);color:var(--blue-l)} [data-theme=clair] .btn-red:hover{background:color-mix(in srgb,var(--blue-l) 18%,var(--card));color:var(--blue-l)} .btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;filter:saturate(.6)} .btn:disabled:hover,.btn[disabled]:hover{border-color:inherit} .btn-danger{background:var(--red);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.14)} .btn-danger:hover{background:color-mix(in srgb,var(--red) 86%,white)} .btn-orange{background:var(--orange-bg);color:var(--orange);border:1px solid color-mix(in srgb,var(--orange) 40%,transparent)} .btn-orange:hover{background:color-mix(in srgb,var(--blue-l) 20%,var(--card));border-color:var(--blue-l);color:var(--blue-l)} [data-theme=clair] .btn-orange:hover{background:color-mix(in srgb,var(--blue-l) 16%,var(--card));color:var(--blue-l)} .btn-ghost{background:var(--elev);color:var(--text);border:1px solid var(--border-l)} .btn-ghost:hover{filter:none;background:color-mix(in srgb,var(--blue-l) 22%,var(--elev)); border-color:color-mix(in srgb,var(--blue-l) 55%,transparent);color:var(--blue-l)} .btn-ghost:active{background:color-mix(in srgb,var(--blue-l) 30%,var(--elev))} .btn-sm{padding:.5rem .95rem;font-size:var(--fs-2);border-radius:var(--r-1)} /* ---- formulaires ---- */ select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8d98' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .5rem center;background-size:13px;padding:.5rem 1.75rem .5rem .7rem;border-radius:var(--r-1);border:1px solid var(--border-l);background-color:var(--surface);color:var(--text);font-family:inherit;font-size:var(--fs-2)} [data-theme=clair] select{border-color:var(--border-l);background-color:#fff} select option,select optgroup{background-color:var(--surface);color:var(--text); font-size:var(--fs-2);padding:.35rem .5rem} select optgroup{color:var(--text-2);font-weight:600} select option:checked{background-color:color-mix(in srgb,var(--blue-l) 22%,var(--surface));color:var(--text)} [data-theme=clair] select option,[data-theme=clair] select optgroup{background-color:#fff} textarea{width:100%;padding:.7rem .85rem;border-radius:var(--r-1);border:1px solid var(--border-l);background:var(--surface);color:var(--text);font-family:'JetBrains Mono',monospace;font-size:var(--fs-2);line-height:1.55;resize:vertical} textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--glow)} [data-theme=clair] textarea{border-color:var(--border-l);background:#fff} input{width:100%;padding:.66rem .85rem;border-radius:var(--r-1); border:1px solid var(--border-l);background:var(--surface);color:var(--text); font-size:var(--fs-3);font-family:inherit;background-clip:padding-box; transition:border-color .15s,box-shadow .15s,background-color .15s} input:hover{border-color:color-mix(in srgb,var(--blue-l) 32%,transparent)} input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{ -webkit-text-fill-color:var(--text);caret-color:var(--text); border:1px solid var(--border-l); transition:background-color 9999999s ease-out 0s} input:autofill{box-shadow:0 0 0 1000px var(--surface) inset; -webkit-text-fill-color:var(--text);border:1px solid var(--border-l)} input::placeholder{color:var(--muted)} input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--glow)} label{display:block;margin:.9rem 0 .35rem;font-size:var(--fs-1);color:var(--text-2)} pre{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-1); padding:1rem;white-space:pre-wrap;word-break:break-word; font-family:'JetBrains Mono',monospace;font-size:var(--fs-2);line-height:1.6} /* ---- auth ---- */ .auth{max-width:340px;margin:0 auto;min-height:calc(100vh - 2.4rem);min-height:calc(100dvh - 2.4rem);display:flex;flex-direction:column;justify-content:center} .auth-card{background:linear-gradient(180deg,var(--elev),var(--card));border:1px solid var(--border-l); border-radius:var(--r-3);padding:1.8rem 1.6rem 1.6rem;box-shadow:0 20px 55px -14px rgba(0,0,0,.72)} .logo-badge svg{width:54px;height:54px;display:block;filter:drop-shadow(0 6px 20px var(--logo-glow))} .logo-badge{width:54px;height:54px;margin:0 auto .95rem;display:flex;align-items:center;justify-content:center} .wordmark{text-align:center;font-weight:700;font-size:var(--fs-7);letter-spacing:-.01em;margin-bottom:1.5rem} .brand-name{text-align:center;font-weight:700;letter-spacing:.22em;font-size:var(--fs-2); color:var(--text-2);text-transform:uppercase;margin-bottom:1.3rem} .field{margin-bottom:.85rem} .err{color:var(--red-l);font-size:var(--fs-2);text-align:center;margin:.8rem 0 .2rem} .okmsg{color:var(--green-l);font-size:var(--fs-2);text-align:center;margin:.8rem 0 .2rem} .muted{color:var(--text-2)}.tiny{font-size:var(--fs-1);color:var(--muted)} .totp{text-align:center;letter-spacing:.35em; font-family:'JetBrains Mono',monospace} input:user-invalid{border-color:var(--border-l);box-shadow:none} input:user-invalid:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--glow)} .check{display:flex;gap:.5rem;align-items:center;margin:.95rem 0 0;font-size:var(--fs-2); color:var(--text-2)}.check input{width:auto} /* ---- rendu Markdown des notes ---- */ /* overflow-wrap (13/09/2026) : un « mot » sans espace plus large que l'ecran (ligne de 40 « ─ » d'un .docx converti) sortait du cadre et elargissait toute la page sur telephone. Il se coupe desormais. break-word et non anywhere : la largeur minimale des cellules ne change pas, un tableau large defile toujours au lieu de hacher ses mots. */ .md{font-size:var(--fs-lecture);line-height:1.7;color:var(--text);overflow-wrap:break-word} .md>*:first-child{margin-top:0} .md h1,.md h2,.md h3,.md h4{color:var(--strong);font-weight:600;line-height:1.3;margin:1.4rem 0 .6rem} .md h1{font-size:var(--fs-6);border-bottom:1px solid var(--border);padding-bottom:.4rem} .md h2{font-size:var(--fs-5)} .md h3{font-size:var(--fs-4);color:var(--blue-l)} .md h4{font-size:var(--fs-2);color:var(--text-2);text-transform:uppercase;letter-spacing:.05em} .md p{margin:.6rem 0} .md strong{color:var(--strong);font-weight:600} .md em{color:var(--green-l);font-style:italic} .md del{color:var(--muted)} .md a{color:var(--blue-l);border-bottom:1px solid color-mix(in srgb,var(--blue-l) 35%,transparent)} .md a:hover{border-bottom-color:var(--blue-l)} .md ul,.md ol{margin:.5rem 0;padding-left:1.4rem} .md li{margin:.28rem 0} .md li::marker{color:var(--blue-l)} .md code{background:var(--elev);border:1px solid var(--border);border-radius:var(--r-1); padding:.08rem .42rem;font-family:'JetBrains Mono',monospace;font-size:.82em;color:var(--code)} .md pre{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-1); padding:.9rem 1rem;overflow-x:auto;margin:.8rem 0} .md pre code{background:none;border:0;padding:0;color:var(--text);font-size:var(--fs-2)} .md blockquote{border-left:3px solid var(--blue);margin:.8rem 0;padding:.35rem 0 .35rem .95rem; color:var(--text-2);background:linear-gradient(90deg,color-mix(in srgb,var(--blue) 7%,transparent),transparent); border-radius:0 6px 6px 0} .md blockquote p{margin:.2rem 0} .md table{border-collapse:collapse;width:100%;margin:.9rem 0;font-size:var(--fs-2); border:1px solid var(--border-l);border-radius:var(--r-1);overflow:hidden} .md th,.md td{border-bottom:1px solid var(--border);border-right:1px solid var(--border); padding:.5rem .75rem;text-align:left} .md th{background:var(--elev);color:var(--strong);font-weight:600} .md tr:last-child td{border-bottom:0} .md td:last-child,.md th:last-child{border-right:0} .md tbody tr:nth-child(even){background:rgba(255,255,255,.018)} .md hr{border:0;border-top:1px solid var(--border);margin:1.3rem 0} .md img{max-width:100%;border-radius:var(--r-1)} /* ---- pages notes : liste epuree + detail ---- */ .sect{display:flex;align-items:baseline;gap:.55rem;margin:2.1rem 0 .6rem} /* La barre de titre porte l'action de la page, comme « Partager » sur une note : le bouton Outils y est toujours au meme endroit, en haut a droite, au lieu de tomber sous le champ de recherche des que l'ecran retrecit. */ .sect-liste{align-items:center} /* Carte « cette semaine » : ce que l'assistant a ecrit sans qu'on lui demande. Chaque ligne mene a la note touchee ; la date reste calee a droite. */ .sect-sem{margin-top:0;margin-bottom:1.05rem} .semtxt{margin:0 0 .8rem;font-size:var(--fs-3);color:var(--text-2)} .semtxt b{color:var(--text)} .semlist{display:flex;flex-direction:column;gap:.1rem} .semrow{display:flex;align-items:center;gap:.6rem;padding:.5rem .55rem;border-radius:var(--r-1); color:var(--text);font-size:var(--fs-2);transition:background .12s} a.semrow:hover{background:color-mix(in srgb,var(--blue-l) 12%,var(--card));color:var(--text)} .semres{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .semq{flex:none;font-size:var(--fs-1);color:var(--muted)} .semrow a.semres{color:var(--text)} .semrow a.semres:hover{color:var(--blue-l)} /* Activité au fil des semaines. Douze barres, la couleur du compte, et les semaines creuses laissées en trait bas : c'est une information, pas un trou à masquer. Aucune librairie — des div et des hauteurs en pourcentage. */ /* Barres groupees, en echelle logarithmique. Trois barres par semaine plutot qu'une barre empilee : empilee, une serie 600 fois plus petite occupe un quart de pixel et disparait. Les graduations sont A GAUCHE et en HTML — le graphique est en div, pas en SVG, donc rien n'est deforme et les infobulles natives font le reste. */ /* Le graphique prend TOUTE la largeur du panneau, aligne sur le titre et la legende. Les graduations vivaient dans une colonne de grille a gauche : le cadre etait donc creuse de 3.25rem d un cote, colle au bord de l autre, et paraissait pousse a droite. Elles sont passees DANS le cadre, en gouttiere d axe — le cadre est centre parce qu il occupe la colonne entiere. Effet de bord bienvenu : reperees sur la meme boite que la grille (inset .45rem), les valeurs tombent enfin pile sur leurs lignes ; en colonne de grille elles se calaient sur la hauteur de rangee, 16 px plus haute. */ .gwrap{display:grid;grid-template-columns:1fr;gap:.15rem;margin:.4rem 0 .7rem} .gval{position:absolute;left:.7rem;top:.75rem;bottom:.75rem;width:2.2rem; text-align:right;font-size:var(--fs-1);color:var(--muted); font-variant-numeric:tabular-nums;line-height:1;pointer-events:none;z-index:1} .gval span{position:absolute;right:0;transform:translateY(-50%)} .graphe{position:relative;height:212px;border-radius:var(--r-1); background:var(--elev);border:1px solid var(--border);padding:.75rem 1rem .75rem 3.15rem} .ggrille{position:absolute;inset:.75rem 1rem .75rem 3.15rem;pointer-events:none} .ggrille i{position:absolute;left:0;right:0;height:1px;background:var(--border-l);opacity:.45} .gbarres{position:relative;display:flex;align-items:flex-end;gap:.5rem;height:100%} .ggroupe{position:relative;flex:1;min-width:0;height:100%;display:flex; align-items:flex-end;justify-content:center;gap:3px;padding:0 2px; border-radius:5px;transition:background .12s} .ggroupe:hover{background:color-mix(in srgb,var(--blue-l) 15%,transparent)} .gnow{background:color-mix(in srgb,var(--blue-l) 8%,transparent)} .gb{flex:1;max-width:14px;border-radius:3px 3px 0 0;transition:filter .12s} .ggroupe:hover .gb{filter:brightness(1.18)} .gb-note{background:linear-gradient(180deg,var(--blue-l), color-mix(in srgb,var(--blue-l) 68%,var(--elev)))} .gb-doc{background:linear-gradient(180deg,#a78bfa,color-mix(in srgb,#a78bfa 68%,var(--elev)))} .gb-form{background:linear-gradient(180deg,var(--green-l), color-mix(in srgb,var(--green-l) 68%,var(--elev)))} .ggroupe::before{content:attr(data-info);position:absolute;bottom:calc(100% + 6px); left:50%;transform:translateX(-50%);white-space:nowrap;padding:.28rem .55rem; border-radius:var(--r-1);background:var(--card);border:1px solid var(--border-l); color:var(--text);font-size:var(--fs-1);box-shadow:0 8px 20px -10px rgba(0,0,0,.75); opacity:0;pointer-events:none;transition:opacity .12s;z-index:5} .ggroupe:hover::before{opacity:1} /* les derniers groupes : l'etiquette rentre dans le cadre */ .ggroupe:nth-last-child(-n+3)::before{left:auto;right:0;transform:none} .ggroupe:nth-child(-n+2)::before{left:0;transform:none} /* Une semaine sans rien reste une semaine : un trait bas plutot qu'un vide. */ .gvide::after{content:'';position:absolute;bottom:0;left:22%;right:22%;height:2px; border-radius:2px;background:var(--border-l)} .ggroupe{position:relative} .gdates{display:flex;justify-content:space-between;font-size:var(--fs-1);color:var(--muted); font-variant-numeric:tabular-nums;padding:.5rem 1rem 0 3.15rem} .gnote{margin:.7rem 0 0;font-size:var(--fs-1);color:var(--muted)} .gbilan{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.35rem 2.2rem;margin:1.6rem 0 0;padding-top:1.45rem;border-top:1px solid var(--border)} .gbil{display:flex;flex-direction:column;gap:.65rem;min-width:0} .gbilt{font-size:var(--fs-2);color:var(--text-2)} .gbilt b{color:var(--text);font-weight:600} .gbils{font-size:var(--fs-1);color:var(--muted)} .gjauge{display:flex;height:8px;border-radius:var(--r-pill);overflow:hidden;background:var(--elev)} .gjauge i{display:block;height:100%} .gj-cree{background:var(--blue-l)} .gj-enr{background:color-mix(in srgb,var(--blue-l) 45%,var(--elev))} .gcarnet{display:flex;align-items:center;gap:.75rem;color:var(--text);font-size:var(--fs-2)} .gcarnet:hover{color:var(--blue-l)} .gcarnet:hover .gcbar i{background:var(--blue-l)} .gcnom{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; max-width:9rem} .gcbar{flex:1;min-width:26px;height:6px;border-radius:var(--r-pill);background:var(--elev); overflow:hidden} .gcbar i{display:block;height:100%;border-radius:var(--r-pill); background:color-mix(in srgb,var(--blue-l) 55%,var(--elev));transition:background .12s} .gcnb{flex:none;font-size:var(--fs-1);color:var(--muted);font-variant-numeric:tabular-nums} .gpuce{width:9px;height:9px;border-radius:3px;flex:none} .gpuce.gp-note{background:var(--blue-l)} .gpuce.gp-doc{background:#a78bfa} .gpuce.gp-form{background:var(--green-l)} .glegende{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:1rem 0 0} .gleg{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-1);color:var(--text-2)} .gtete{display:flex;align-items:center;gap:1.5rem;margin:0 0 1.25rem;flex-wrap:wrap} .gtaux{display:flex;gap:1.7rem;flex:none;padding-right:1.6rem; border-right:1px solid var(--border)} .gtaux1{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;gap:.2rem} .gtaux1 b{font-size:var(--fs-4);font-weight:700;color:var(--green-l)} .gtaux1 span{font-size:var(--fs-1);color:var(--muted);text-transform:uppercase;letter-spacing:.07em} .gtaux-err b{color:var(--orange)} .gtete .semtxt{flex:1 1 220px;min-width:0} @media(max-width:560px){.gtaux{border-right:0;padding-right:0}} .gaxe{display:flex;justify-content:space-between;font-size:var(--fs-1);color:var(--muted)} .gfric{color:var(--orange)} .recoup{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.7rem; padding:.6rem .55rem;border-radius:var(--r-1)} .recoup+.recoup{border-top:1px solid var(--border)} .recoupn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font-size:var(--fs-2);color:var(--text)} .recoupn:hover{color:var(--blue-l)} .recoupsim{flex:none;padding:.12rem .5rem;border-radius:var(--r-pill); background:color-mix(in srgb,var(--blue-l) 14%,var(--card));color:var(--blue-l); font-size:var(--fs-1);font-weight:600} @media(max-width:560px){ .recoup{grid-template-columns:1fr auto;gap:.35rem .6rem} .recoupn:last-child{grid-column:1/-1;color:var(--text-2)}} @media(max-width:480px){.semq{display:none}} @media(max-width:560px){ /* Sur telephone la place manque : la gouttiere d axe et les ecarts se resserrent, sinon les barres perdent toute epaisseur. */ .graphe{height:120px;padding:.55rem .7rem .55rem 2.6rem} .ggrille{inset:.55rem .7rem .55rem 2.6rem} .gval{left:.45rem;top:.55rem;bottom:.55rem;width:2rem} .gdates{padding:.4rem .7rem 0 2.6rem} .gbarres{gap:.25rem} .ggroupe{gap:2px;padding:0 1px}} .btn-outils{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;flex:none} .btn-outils svg{width:16px;height:16px;flex:none} .sect h3{margin:0} .note{display:flex;align-items:center;gap:.85rem;padding:.88rem .75rem;border-radius:var(--r-2); color:var(--text);border:1px solid transparent;transition:background .13s,border-color .13s} .note:hover{background:color-mix(in srgb,var(--blue-l) 14%,var(--card));border-color:color-mix(in srgb,var(--blue-l) 40%,transparent)} .note .dot{width:8px;height:8px;border-radius:50%;flex:none} .note .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.28rem} .note .t{font-weight:500;font-size:var(--fs-3);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tag{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom} .note:hover .t{color:var(--strong)} .note .m{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:var(--fs-1);color:var(--muted)} .pj{display:inline-flex;align-items:center;gap:.2em;padding:.02em .38em;border-radius:var(--r-1);background:var(--pj-bg);color:var(--pj);font-weight:700} .pj svg{width:.92em;height:.92em;stroke:currentColor;fill:none} /* --- Ligne de document ------------------------------------------------- Une note se resume a un point de couleur ; un document, lui, a un type et un poids. La vignette d'extension occupe la colonne de gauche restee vide, la ligne se resserre, et la meta dit enfin quelque chose du fichier. */ .note.doc{gap:.7rem;padding:.5rem .75rem} .list .note.doc{padding:.5rem .8rem} .notegroup .list .note.doc{padding:.5rem .95rem .5rem 1.1rem} .note.doc .body{gap:.1rem} .note.doc .t{line-height:1.3} .note.doc .m{line-height:1.25;gap:.35rem} .docic{--fc:var(--text-2);flex:none;width:34px;height:34px;border-radius:var(--r-1); display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700; letter-spacing:.01em;color:var(--fc);background:color-mix(in srgb,var(--fc) 13%,var(--card)); border:1px solid color-mix(in srgb,var(--fc) 26%,var(--card));transition:background .13s,border-color .13s} .note.doc:hover .docic{background:color-mix(in srgb,var(--fc) 20%,var(--card)); border-color:color-mix(in srgb,var(--fc) 42%,var(--card))} .docic.fam-pdf{--fc:var(--red-l)} .docic.fam-image{--fc:#a78bfa} .docic.fam-doc{--fc:var(--blue-l)} .docic.fam-tableur{--fc:var(--green-l)} .docic.fam-presentation{--fc:var(--orange)} .docic.fam-archive{--fc:var(--pj)} .docic.fam-code{--fc:#22d3ee} .docic.fam-audio{--fc:#f472b6} .docic.fam-video{--fc:#38bdf8} /* Notes : la vignette porte le metier, avec une teinte stable par mot. Formulaires : une icone de grille a la couleur du compte. */ .docic svg{width:17px;height:17px;fill:none;stroke:currentColor} .docic.met-0{--fc:var(--text-2)} .docic.met-1{--fc:var(--blue-l)} .docic.met-2{--fc:var(--green-l)} .docic.met-3{--fc:#a78bfa} .docic.met-4{--fc:var(--orange)} .docic.met-5{--fc:#22d3ee} .docic.met-6{--fc:#f472b6} .docic.met-7{--fc:var(--pj)} .docic.met-8{--fc:#38bdf8} .docic.form{--fc:var(--pc,var(--blue-l))} .docic.form svg{width:18px;height:18px} .pjpdf{width:100%;height:100%;object-fit:cover;object-position:top center; background:#fff;display:block} /* Un formulaire archive n'est pas cliquable : il ne doit pas reagir au survol comme une ligne qui mene quelque part. Son bouton Restaurer reste a droite. */ .formact{flex:none;margin:0} .note.formrow{cursor:default} .note.formrow:hover{background:transparent;border-color:transparent} .note.formrow:hover .t{color:var(--text)} .natbadge{display:inline-flex;align-items:center;gap:.32em;font-weight:600} .natbadge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none} .nat-stable{color:var(--green-l)} .nat-volatil{color:var(--orange)} .notegroup{background:var(--card);border:1px solid var(--border);border-radius:var(--r-2);margin-bottom:.55rem;overflow:hidden} .notegroup>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.7rem;padding:.85rem .95rem;transition:background .12s;user-select:none} .notegroup>summary::-webkit-details-marker{display:none} .notegroup>summary:hover{background:color-mix(in srgb,var(--blue-l) 14%,var(--card))} .notegroup>summary::before{content:"";flex:none;width:7px;height:7px;border-right:2px solid var(--text-2);border-bottom:2px solid var(--text-2);transform:rotate(-45deg);transition:transform .16s} .notegroup[open]>summary::before{transform:rotate(45deg)} .gname{flex:1;min-width:0;font-weight:600;font-size:var(--fs-4);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .notegroup .count{flex:none;font-size:var(--fs-1);font-weight:600;color:var(--muted)} .notegroup .list{padding:0;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none} .notegroup .list .note{padding:.72rem .95rem .72rem 1.85rem;background:transparent;border-bottom:1px solid var(--border)} .notegroup .list .note:last-child{border-bottom:0} .notegroup .list .note:hover{background:color-mix(in srgb,var(--blue-l) 14%,var(--card))} :root{--pj:#e3b341;--pj-bg:rgba(227,179,65,.15)} [data-theme=clair]{--pj:#8a5a00;--pj-bg:rgba(154,101,0,.12)} .pjm{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:3vh 3vw;background:rgba(4,4,8,.72);backdrop-filter:blur(3px)} .pjm.on{display:flex} .pjm-card{display:flex;flex-direction:column;width:min(920px,96vw);max-height:94vh;background:var(--card);border:1px solid var(--border);border-radius:var(--r-3);box-shadow:0 24px 60px -12px rgba(0,0,0,.6);overflow:hidden} .pjm-head{display:flex;align-items:center;gap:.5rem;padding:.55rem .7rem;border-bottom:1px solid var(--border)} .pjm-title{flex:1;font-weight:600;font-size:var(--fs-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)} .pjm-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:.05rem} .pjm-id .pjm-title{flex:none} .pjm-sub{font-size:var(--fs-1);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pjm-nav{flex:none;width:30px;height:30px;border-radius:var(--r-1);border:1px solid var(--border);background:transparent;color:var(--text-2);font-size:var(--fs-5);line-height:1;cursor:pointer;font-family:inherit} .pjm-nav:hover{border-color:var(--blue);color:var(--blue-l)} .pjm-nav[hidden]{display:none} .pjm-dl,.pjm-close{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--r-1);border:1px solid var(--border);background:transparent;color:var(--text-2);cursor:pointer;text-decoration:none;font-size:var(--fs-4);line-height:1} .pjm-dl:hover,.pjm-close:hover{border-color:var(--blue);color:var(--blue-l)} .pjm-body{flex:1;overflow:auto;min-height:120px} .pjm-body .md{padding:1rem 1.2rem} .pjm-img{display:block;max-width:100%;max-height:88vh;margin:0 auto} .pjm-frame{display:block;width:100%;height:86vh;border:0;background:#fff} .pjm-load,.pjm-none{padding:2.4rem 1.2rem;text-align:center;color:var(--text-2)} .noteactions{display:flex;gap:.6rem;flex-wrap:wrap;margin:.5rem 0 1.6rem} .pjbox{background:var(--card);border:1px solid var(--border);border-radius:var(--r-3);padding:1.35rem 1.55rem;margin-bottom:1.2rem} .pjgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.65rem} .pjcard{position:relative;margin:0;background:var(--card);border:1px solid var(--border);border-radius:var(--r-2);overflow:hidden;transition:border-color .14s,transform .14s,box-shadow .14s} .pjcard:hover{border-color:color-mix(in srgb,var(--blue-l) 38%,transparent);transform:translateY(-1px);box-shadow:0 10px 22px -14px rgba(0,0,0,.7)} .pjcard>a{display:block;color:inherit} .pjthumb{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:var(--elev);overflow:hidden;border-bottom:1px solid var(--border)} .pjthumb img{width:100%;height:100%;object-fit:cover;display:block} .pjext{font-size:var(--fs-1);font-weight:700;letter-spacing:.05em;padding:.42rem .66rem;border-radius:var(--r-1);border:1px solid currentColor;color:var(--text-2);background:var(--card)} .fam-pdf .pjext{color:var(--red-l)} .fam-image .pjext,.fam-doc .pjext{color:var(--blue-l)} .fam-tableur .pjext{color:var(--green-l)} .fam-presentation .pjext{color:var(--orange)} .fam-archive .pjext{color:var(--pj)} .fam-code .pjext{color:#22d3ee} .pjcap{display:block;padding:.5rem .6rem .55rem} .pjnom{display:block;font-size:var(--fs-2);font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pjsub{display:block;margin-top:.12rem;font-size:var(--fs-1);color:var(--muted)} .pjact{position:absolute;top:.4rem;right:.4rem;display:flex;gap:.25rem;opacity:0;transition:opacity .14s} .pjcard:hover .pjact,.pjcard:focus-within .pjact{opacity:1} @media(hover:none){.pjact{opacity:1}} .pjbtn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border-radius:var(--r-1);border:1px solid var(--border-l);background:var(--card);color:var(--text-2);font-size:var(--fs-2);line-height:1;font-family:inherit;cursor:pointer;text-decoration:none} .pjbtn:hover{border-color:var(--blue);color:var(--blue-l);background:color-mix(in srgb,var(--blue-l) 22%,var(--card))} .pjbtn-sup:hover{border-color:var(--red);color:var(--red-l);background:color-mix(in srgb,var(--red) 22%,var(--card))} .pjdrop{display:flex;flex-direction:column;align-items:center;gap:.15rem;width:100%;padding:.95rem 1rem;border:1px dashed var(--border-l);border-radius:var(--r-2);background:transparent;text-align:center;cursor:pointer;transition:border-color .14s,background .14s} .pjdrop:hover,.pjdrop:focus-visible{border-color:var(--blue);background:color-mix(in srgb,var(--blue-l) 14%,var(--card))} .pjdrop.on{border-color:var(--green-l);background:var(--green-bg)} .pjdrop.busy{cursor:progress;border-style:solid;border-color:var(--pj)} .pjdrop-lg{padding:1.6rem 1.1rem;gap:.3rem} .pjdrop-btns{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-top:.75rem} .pjdrop-t{font-size:var(--fs-2);font-weight:500;color:var(--text)} .pjdrop-s{font-size:var(--fs-1);color:var(--muted)} /* --- Filtres en puces --------------------------------------------------- Une puce par filtre, meme forme et meme hauteur pour toutes : la liste deroulante native fait le travail (elle s'ouvre en roue sur telephone, reste accessible au clavier), la puce ne fait que l'habiller. La puce allumee porte la couleur du compte, donc un filtre actif se voit sans lire. Plus de rangee qui defile horizontalement : ce qui sortait de l'ecran n'existait pas pour l'utilisateur. */ .filterbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.1rem 0 1.5rem;position:relative;z-index:40} .fchip{position:relative;display:inline-flex;align-items:center;align-self:center;margin:0;gap:.45rem;min-width:0; height:42px;padding:0 .85rem;border-radius:var(--r-1);background:var(--surface); border:1px solid var(--border-l);color:var(--text-2);font-size:var(--fs-3);line-height:1; cursor:pointer;-webkit-user-select:none;user-select:none; transition:background .13s,border-color .13s,color .13s} .fchip:hover{border-color:var(--border-l);color:var(--text)} .fchip:focus-within{border-color:var(--blue-l);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue-l) 15%,transparent)} .fchip svg{width:15px;height:15px;flex:none;opacity:.85} /* Liste deroulante maison. Le