/* PPS Link — maquette V2 (27/10/2026). Thèmes sombre (défaut) et clair. Aucune dépendance externe.
   Contraste (02/11, Housame : « le problème revient toujours ») : --accent est une couleur de FOND (vert clair, illisible en texte sur fond clair).
   Un texte ou une icône en couleur d'accent prend --accent-texte (lisible dans les deux thèmes). Gardes : qualite (color:var(--accent-texte) refusé)
   et garde-responsive (contraste mesuré dans Chromium, thèmes clair et sombre, 4,5:1). Seule exception : la barre de gauche, toujours foncée.
   Même règle pour le rouge : --danger en texte, --danger-fond sous un texte blanc. */
:root{
  --bg:#0f1311;--panel:#151a17;--panel2:#1a201c;--card:#1f2621;--hover:#252e28;--line:#2c362f;
  --ink:#eef2ec;--muted:#a3b0a6;--quiet:#7d8a80;
  --accent:#d4f77d;--accent-ink:#17200c;--accent-texte:#d4f77d;--danger:#ff8a8a;--danger-fond:#c62828;--forest:#21382a;--mine:#2b4a35;
  --good:#91ddb3;--goodbg:#1c3027;--warn:#f2cc83;--warnbg:#342c1d;--bad:#ffaaaa;--badbg:#372224;--info:#a9c7ff;--infobg:#1d2636;
  --radius:14px;--rail:64px;--list:400px;--detail:300px;
  font-family:"Segoe UI",system-ui,Arial,sans-serif;color-scheme:dark;
}
html[data-theme=light]{
  --bg:#e6ece3;--panel:#f1f5ee;--panel2:#f5f8f2;--card:#f5f8f2;--hover:#e9efe5;--line:#cdd8ca;   /* sauge douce au lieu du blanc pur, qui piquait les yeux (Housame, 03/11) */
  --ink:#17251b;--muted:#4b5d4e;--quiet:#738276;
  --accent:#d4f77d;--accent-ink:#17200c;--accent-texte:#3f6212;--danger:#b42318;--danger-fond:#c62828;--forest:#254634;--mine:#e0efd6;
  --good:#2c6540;--goodbg:#e3f3e6;--warn:#76521c;--warnbg:#fff0d0;--bad:#8d3135;--badbg:#fce8e7;--info:#244b8a;--infobg:#e6eefc;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.45;overflow:hidden}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
:focus-visible{outline:3px solid #9b7bf0;outline-offset:2px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Barre de chargement */
.loadbar{position:fixed;top:0;left:0;height:3px;background:var(--accent);width:0;z-index:99;animation:load 1.1s ease-out forwards}
@keyframes load{0%{width:0;opacity:1}80%{width:100%;opacity:1}100%{width:100%;opacity:0}}

/* Grille principale : rail | liste | contenu | détails */
.app{display:grid;grid-template-columns:var(--rail) var(--list) 1fr var(--detail);height:100vh}
.app.no-detail{grid-template-columns:var(--rail) var(--list) 1fr}

/* Rail */
.rail{background:var(--forest);display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 0}
.rail .logo{width:40px;height:40px;margin-bottom:10px}
.rail a{position:relative;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:#cfdacf;text-decoration:none}
.rail a svg{width:22px;height:22px}
.rail a:hover{background:#ffffff14;color:#fff}
.rail a.active{background:#ffffff1f;color:#fff;box-shadow:inset 3px 0 var(--accent)}
.rail a .badge{position:absolute;top:4px;right:3px}
.rail a .tip{position:absolute;z-index:70;left:54px;background:#000c;color:#fff;font-size:12px;padding:4px 8px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:.15s}
.rail a:hover .tip{opacity:1}
.rail .spacer{flex:1}
.rail .me{width:38px;height:38px}

/* Colonnes */
.col{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--panel)}
.col.list{border-right:1px solid var(--line)}
.col.main{background:var(--bg)}
.col.detail{border-left:1px solid var(--line)}
.head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);min-height:64px;flex:none;
  background:color-mix(in srgb,var(--panel) 85%,transparent);backdrop-filter:blur(8px);position:sticky;top:0;z-index:2}
.head h1{font-size:18px;margin:0;letter-spacing:-.02em}
.head .grow{flex:1;min-width:0}
.scroll{overflow:auto;flex:1;min-height:0}
.foot{flex:none;border-top:1px solid var(--line);padding:12px 16px;background:var(--panel)}

/* Recherche et filtres */
.search{display:flex;align-items:center;gap:8px;margin:12px 14px 6px;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
.search input{border:0;background:none;outline:0;flex:1;min-width:0}
.search svg{width:16px;height:16px;color:var(--quiet);flex:none}
.chips{display:flex;gap:6px;padding:4px 14px 8px;flex-wrap:wrap}
.chip{padding:5px 10px;border-radius:99px;border:1px solid var(--line);font-size:12px;color:var(--muted);background:var(--panel2)}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:650}

/* Sections repliables */
.section{padding:2px 8px 6px}
.section>summary{list-style:none;display:flex;align-items:center;gap:8px;padding:8px 8px 6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--quiet);cursor:pointer;user-select:none}
.section>summary::-webkit-details-marker{display:none}
.section>summary .chev{transition:.15s;width:12px}
.section[open]>summary .chev{transform:rotate(90deg)}
.count{margin-left:auto;font-size:11px;padding:1px 7px;border-radius:99px;background:var(--card);color:var(--muted);letter-spacing:0}

/* Lignes de liste */
.item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 8px;border-radius:12px}
.item:hover{background:var(--hover)}
.item.active{background:var(--card);box-shadow:inset 3px 0 var(--accent)}
.item .txt{flex:1;min-width:0}
.item .l1{display:flex;align-items:baseline;gap:8px}
.item .name{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .time{margin-left:auto;font-size:11px;color:var(--quiet);flex:none}
.item .l2{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.item .l2 span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.item.unread .name,.item.unread .l2 span:first-child{color:var(--ink)}
.badge{min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700;display:inline-grid;place-items:center}

/* Avatars et présence */
.av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none;position:relative;color:#17251b;background:#dfe9d8}
.av.sm{width:28px;height:28px;font-size:11px}.av.lg{width:56px;height:56px;font-size:20px}
.av.room{border-radius:11px}
.av .dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;border:2px solid var(--panel)}
.on-line{background:#5fd18d}.busy{background:#f0b44c}.away{background:#7d8a80}
.c1{background:#dfe9d8}.c2{background:#dcdcfb}.c3{background:#f3e7b3}.c4{background:#e7d6f6}.c5{background:#cfe9ea}.c6{background:#f6d6cf}.c7{background:#d4f77d}

/* Boutons */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);font-size:13px;font-weight:600;white-space:nowrap}
.btn:hover{background:var(--hover)}
.btn svg{width:16px;height:16px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.icon{padding:8px;width:36px;height:36px;justify-content:center}
.btn.block{width:100%;justify-content:center;padding:11px}
.btn.danger{color:var(--bad)}
.tools{display:flex;gap:6px;align-items:center}

/* Fil de messages */
.thread{padding:18px 22px 8px;display:flex;flex-direction:column;gap:2px}
.e2e{align-self:center;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--good);background:var(--goodbg);padding:6px 12px;border-radius:99px;margin:4px 0 14px}
.day{align-self:center;font-size:11px;color:var(--quiet);margin:14px 0 8px;display:flex;align-items:center;gap:10px;width:100%}
.day::before,.day::after{content:"";flex:1;height:1px;background:var(--line)}
.group{display:flex;gap:10px;margin:6px 0;max-width:min(680px,88%)}
.group.mine{align-self:flex-end;flex-direction:row-reverse}
.group .who{font-size:12px;font-weight:700;margin:0 0 4px 2px}
.group .who small{font-weight:400;color:var(--quiet);margin-left:6px}
.bubbles{display:flex;flex-direction:column;gap:3px;min-width:0}
.group.mine .bubbles{align-items:flex-end}
.bubble{background:var(--card);padding:9px 13px;border-radius:14px;position:relative;width:fit-content;max-width:100%}
.group:not(.mine) .bubble:first-of-type{border-top-left-radius:5px}
.group.mine .bubble{background:var(--mine)}
.group.mine .bubble:first-of-type{border-top-right-radius:5px}
.bubble .t{display:none;position:absolute;bottom:-17px;font-size:10.5px;color:var(--quiet);white-space:nowrap}
.bubble:hover .t{display:block}
.group:not(.mine) .bubble .t{left:6px}.group.mine .bubble .t{right:6px}
.file{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);min-width:240px}
.file .ic{width:34px;height:40px;border-radius:7px;display:grid;place-items:center;font-size:10px;font-weight:800;color:#17200c;background:var(--accent);flex:none}
.file .ic.png{background:#a9c7ff}.file .ic.doc{background:#f3e7b3}
.file b{display:block;font-size:13px}.file small{color:var(--quiet);font-size:11.5px}
.read{align-self:flex-end;font-size:11px;color:var(--quiet);margin:2px 4px 6px}
.typing{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);padding:4px 24px 10px}
.typing i{display:inline-flex;gap:3px}
.typing i b{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:dot 1.2s infinite}
.typing i b:nth-child(2){animation-delay:.2s}.typing i b:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,60%,100%{opacity:.25}30%{opacity:1}}
.new-in{animation:pop .35s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Zone d'écriture */
.composer{display:flex;align-items:flex-end;gap:8px;padding:8px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}
.composer textarea{flex:1;border:0;background:none;outline:0;resize:none;max-height:140px;min-height:22px;padding:7px 4px;line-height:1.4}
.composer textarea{field-sizing:content;overflow-y:auto;overscroll-behavior:contain}   /* la zone grandit par le CSS seul pendant la frappe, sans saut (29/10) */
.hint{font-size:11.5px;color:var(--quiet);margin-top:6px;display:flex;gap:6px;align-items:center}

/* Colonne de détails */
.block{border-bottom:1px solid var(--line);padding:4px 6px}
.block>summary{list-style:none;display:flex;align-items:center;gap:8px;padding:12px 10px 8px;font-weight:700;cursor:pointer}
.block>summary::-webkit-details-marker{display:none}
.block>summary .chev{width:12px;transition:.15s;color:var(--quiet)}
.block[open]>summary .chev{transform:rotate(90deg)}
.block .in{padding:0 10px 14px}
.kv{display:grid;grid-template-columns:96px 1fr;gap:6px 10px;font-size:13px}
.kv dt{color:var(--quiet)}.kv dd{margin:0}
.note{display:flex;gap:8px;padding:10px 12px;border-radius:12px;font-size:12.5px;background:var(--goodbg);color:var(--good)}
.note.warn{background:var(--warnbg);color:var(--warn)}.note.info{background:var(--infobg);color:var(--info)}
.person{display:flex;align-items:center;gap:10px;padding:6px 0}
.person small{display:block;color:var(--quiet);font-size:11.5px}
.mini-file{display:flex;align-items:center;gap:10px;padding:7px 0}
.mini-file .ic{width:28px;height:32px;border-radius:6px;display:grid;place-items:center;font-size:9px;font-weight:800;color:#17200c;background:var(--accent);flex:none}
.mini-file .ic.png{background:#a9c7ff}
.mini-file b{display:block;font-size:12.5px;font-weight:600}.mini-file small{color:var(--quiet);font-size:11px}
.profile-top{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 12px 12px;text-align:center}
.profile-top h2{margin:4px 0 0;font-size:17px}
.state{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 10px;border-radius:99px;background:var(--goodbg);color:var(--good);font-weight:600}
.state.warn{background:var(--warnbg);color:var(--warn)}.state.bad{background:var(--badbg);color:var(--bad)}.state.info{background:var(--infobg);color:var(--info)}.state.mute{background:var(--card);color:var(--muted)}
.state .pulse{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 currentColor}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* Réunions */
.page{padding:22px 26px;max-width:860px}
.page h2{font-size:22px;margin:4px 0 2px;letter-spacing:-.02em}
.meta{display:flex;flex-wrap:wrap;gap:14px;color:var(--muted);font-size:13px;margin:8px 0 18px}
.meta span{display:inline-flex;gap:6px;align-items:center}
.meta svg{width:15px;height:15px}
.cards{display:grid;gap:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.card h3{margin:0 0 10px;font-size:14px}
.answers{display:grid;gap:4px}
.answers .person{justify-content:space-between}
.linkbox{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;background:var(--panel2);border:1px dashed var(--line);font-family:Consolas,monospace;font-size:12.5px}
.linkbox span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cta{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* Agenda */
.cal-head{display:flex;align-items:center;gap:8px;padding:12px 18px;border-bottom:1px solid var(--line)}
.cal-head h2{font-size:17px;margin:0 8px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-left:auto}
.seg button{padding:7px 12px;font-size:12.5px;color:var(--muted)}
.seg button.on{background:var(--card);color:var(--ink);font-weight:650}
.week{display:grid;grid-template-columns:52px repeat(5,1fr);min-width:640px}
.week .hd{position:sticky;top:0;background:var(--bg);z-index:1;padding:10px 6px;text-align:center;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line)}
.week .hd b{display:block;font-size:18px;color:var(--ink)}
.week .hd.today b{background:var(--accent);color:var(--accent-ink);border-radius:99px;width:32px;height:32px;line-height:32px;margin:2px auto 0}
.hour{font-size:11px;color:var(--quiet);text-align:right;padding:2px 6px 0 0;height:56px}
.slot{border-left:1px solid var(--line);border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);height:56px;position:relative}
.slot:hover{background:var(--hover)}
.ev{position:absolute;left:4px;right:4px;border-radius:9px;padding:5px 8px;font-size:12px;line-height:1.3;overflow:hidden;cursor:pointer;border-left:3px solid}
.ev b{display:block;font-size:12px}
.ev.meet{background:#d4f77d26;border-color:var(--accent)}
.ev.work{background:#a9c7ff26;border-color:#a9c7ff}
.ev.perso{background:#f3e7b326;border-color:#f3e7b3}
.ev.sel{outline:2px solid var(--accent)}
.mini-cal{padding:8px 14px}
.mini-cal table{width:100%;border-collapse:collapse;font-size:12px;text-align:center}
.mini-cal th{color:var(--quiet);font-weight:600;padding:4px 0}
.mini-cal td{padding:5px 0;border-radius:8px}
.mini-cal td.mute{color:var(--quiet)}
.mini-cal td.today{background:var(--accent);color:var(--accent-ink);font-weight:700}
.mini-cal td.has{position:relative}
.mini-cal td.has::after{content:"";position:absolute;left:50%;bottom:1px;width:4px;height:4px;border-radius:50%;background:var(--accent);transform:translateX(-50%)}
.cal-list .item .bar{width:4px;align-self:stretch;border-radius:4px;background:var(--accent)}

/* Mail */
.mail-read{padding:22px 28px;max-width:820px}
.mail-read h2{margin:0 0 14px;font-size:21px;letter-spacing:-.02em}
.from{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.from .txt{flex:1}
.from small{color:var(--quiet);display:block;font-size:12px}
.mail-body{font-size:14.5px;line-height:1.6}
.invite-card{display:flex;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card);margin:16px 0}
.invite-card .date{width:56px;text-align:center;border-radius:12px;background:var(--forest);color:#fff;padding:6px 0;flex:none}
.invite-card .date b{display:block;font-size:20px}
.invite-card .date small{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#cfdacf}
.attach{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin-top:16px}
.folders .item{padding:8px 10px}
.folders .item svg{width:16px;height:16px;color:var(--muted)}

/* Fenêtres */
.overlay{position:fixed;inset:0;background:#0009;backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.overlay.open{display:flex}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:18px;width:min(560px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;animation:pop .2s ease-out}
.modal .head{border-radius:18px 18px 0 0}
.modal .body{padding:18px;overflow:auto;display:grid;gap:14px}
.modal .foot{display:flex;justify-content:flex-end;gap:8px;border-radius:0 0 18px 18px}
.field{display:grid;gap:6px}
.field label{font-size:12.5px;font-weight:650;color:var(--muted)}
.input{border:1px solid var(--line);background:var(--panel2);border-radius:10px;padding:10px 12px;outline:0;width:100%}
.input:focus{border-color:var(--accent)}
/* Dates et heures natives iOS : largeur intrinsèque trop grande, elles débordaient du modal */
.row2>*,.field,.date-heure>*{min-width:0}
input.input[type=date],input.input[type=time]{-webkit-appearance:none;appearance:none;display:block;min-width:0;max-width:100%;width:100%;min-height:42px;text-align:left;font:inherit;color:inherit}
input.input[type=date]::-webkit-date-and-time-value,input.input[type=time]::-webkit-date-and-time-value{text-align:left;margin:0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tokens{display:flex;flex-wrap:wrap;gap:6px;padding:7px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.tokens input{border:0;background:none;outline:0;flex:1;min-width:140px;padding:4px}
.token{display:inline-flex;align-items:center;gap:6px;padding:3px 6px 3px 3px;border-radius:99px;background:var(--card);font-size:12.5px}
.token.guest{background:var(--warnbg);color:var(--warn)}
.switch{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.switch small{display:block;color:var(--quiet);font-size:12px}
.sw{width:40px;height:22px;border-radius:99px;background:var(--line);position:relative;flex:none;transition:.15s}
.sw::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.15s}
.sw.on{background:var(--accent)}.sw.on::after{left:21px;background:var(--accent-ink)}
.pick{display:flex;gap:6px;flex-wrap:wrap}
.pick button{padding:7px 11px;border-radius:10px;border:1px solid var(--line);font-size:12.5px}
.pick button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:650}

/* Notification et installation */
.toast{position:fixed;right:18px;bottom:18px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;gap:10px;align-items:center;box-shadow:0 14px 40px #0006;z-index:60;transform:translateY(140%);transition:.3s;max-width:360px}
.toast.show{transform:none}
.install{display:flex;align-items:center;gap:10px;margin:8px 14px 12px;padding:10px 12px;border-radius:12px;background:var(--infobg);color:var(--info);font-size:12.5px}
.install img{width:28px;height:28px}
.install .grow{flex:1}
.offline{display:none;align-items:center;gap:8px;justify-content:center;padding:6px;font-size:12px;background:var(--warnbg);color:var(--warn)}
body.is-offline .offline{display:flex}

/* Vide */
.empty{display:grid;place-items:center;text-align:center;color:var(--muted);height:100%;padding:30px}
.empty svg{width:48px;height:48px;opacity:.6}

/* Téléphone : une colonne */
.back{display:none}
@media (max-width:1180px){.app{grid-template-columns:var(--rail) var(--list) 1fr}.col.detail{display:none}}
@media (max-width:760px){
  body{overflow:auto}
  .app,.app.no-detail{grid-template-columns:1fr;height:auto;min-height:100vh}
  .rail{position:fixed;bottom:0;left:0;right:0;flex-direction:row;justify-content:space-around;height:60px;padding:0 6px;z-index:20}
  .rail .logo,.rail .spacer,.rail .me,.rail a .tip{display:none}
  .app>.col{height:calc(100vh - 60px)}
  .app:not(.show-main) .col.main{display:none}
  .app.show-main .col.list{display:none}
  .back{display:inline-flex}
  .group{max-width:94%}
  .page,.mail-read{padding:16px}
  .row2{grid-template-columns:1fr}
}
/* Tailles des pictogrammes en ligne */
.e2e svg,.hint svg,.note svg,.l2 svg,.linkbox svg{width:14px;height:14px;flex:none}
.mini-file .ic svg{width:14px;height:14px}

/* ---------- Ajouts 27/10 : connexion boîte mail ou PPS, mon compte, normes (charte UX) ---------- */
/* Fonctions liées à PPS : visibles seulement quand PPS est relié (D10 bis) */
body:not(.pps) [data-pps]{display:none}
/* Écran de connexion */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:radial-gradient(60% 50% at 15% 10%,var(--mine),transparent),radial-gradient(50% 50% at 90% 95%,var(--forest),transparent),var(--bg)}
.auth-card{width:min(420px,100%);background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:28px;display:grid;gap:14px;box-shadow:0 24px 60px #0005;animation:pop .3s ease-out}
.auth-card h1{font-size:24px;margin:0;letter-spacing:-.03em}
.auth-card .muted{color:var(--muted);margin:-8px 0 4px;font-size:13.5px}
.auth-logo{width:56px;height:56px}
#login-mail{display:grid;gap:12px}
.btn.lg{min-height:48px;font-size:14px}
.btn svg{width:17px;height:17px;flex:none}
.sep{display:flex;align-items:center;gap:10px;color:var(--quiet);font-size:12px}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--line)}
.err{margin:-6px 0 0;color:var(--bad);font-size:12.5px;display:flex;gap:6px}
.err::before{content:"⚠"}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.spin-sm{width:15px;height:15px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:tourne .8s linear infinite;display:inline-block}
@keyframes tourne{to{transform:rotate(360deg)}}
/* Mon compte */
button.av{border:0;cursor:pointer;font:inherit;font-weight:700;padding:0}
.rail .av.me{width:44px;height:44px}
.menu-moi{position:fixed;left:76px;bottom:16px;z-index:55;width:min(320px,calc(100vw - 92px));background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px;display:grid;gap:12px;box-shadow:0 20px 50px #0006;animation:pop .2s ease-out}
.moi-head{display:flex;gap:10px;align-items:center}.moi-head small{display:block;color:var(--muted);font-size:12px}
.moi-foot{display:flex;gap:8px;justify-content:flex-end}
.state svg{width:13px;height:13px}
/* Écran vide : quoi faire ensuite */
.empty .hint{justify-content:center}.empty .btn{margin-top:10px}
/* Cibles d'au moins 44 px (R-UX-55) et focus visible (R-UX-53) */
.chip,.pick button,.seg button{min-height:36px}
@media (pointer:coarse){.chip,.pick button,.seg button,.item{min-height:44px}.btn{min-height:44px}.btn.icon{width:44px;height:44px}.btn.sm{min-height:40px}.btn.sm.icon{width:40px;height:40px}}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (max-width:760px){.menu-moi{left:12px;right:12px;bottom:76px;width:auto}.rail .av.me{display:grid;width:40px;height:40px}}

/* ---------- Finesse et contraste (28/10, retour de Housame : « plus fin dans les détails, meilleur contraste, mieux aligner les boutons ») ---------- */
:root{--quiet:#8f9d93;--muted:#b3bfb6}
html[data-theme=light]{--quiet:#5c6c60;--muted:#3d4e41}
.btn{min-height:36px;padding:0 14px;border-radius:10px;font-size:13px;font-weight:600;transition:background .15s,border-color .15s,transform .1s}
.btn.icon{width:36px;height:36px;padding:0;justify-content:center}
.btn.block{min-height:40px}
.btn.sm{min-height:30px;padding:0 11px;font-size:12.5px;border-radius:8px;gap:5px}
.btn.sm.icon{width:30px;height:30px;padding:0}
.btn.sm svg{width:15px;height:15px}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn.ghost:hover{background:var(--hover);border-color:var(--quiet)}
.btn.primary{box-shadow:inset 0 1px 0 #ffffff55}
.btn.primary:hover{background:#e0fb94;filter:none}
.btn:active{transform:translateY(1px)}
.danger-txt{color:var(--bad)}
.row-act{display:flex;align-items:center;gap:10px;padding:8px 0}
.row-act+.row-act{border-top:1px solid var(--line)}
.row-act .who{flex:1;min-width:0}
.row-act .who b{display:flex;align-items:center;gap:6px;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-act .who small{display:block;color:var(--quiet);font-size:11.5px;margin-top:1px}
.row-act .acts{display:flex;gap:6px;flex:none}
.ic-rond{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:1px solid var(--line);flex:none;color:var(--ink)}
.ic-rond svg{width:15px;height:15px}
.state.tiny{padding:1px 7px;font-size:10.5px}
.count.hot{background:var(--accent);color:var(--accent-ink);font-weight:700}
.vide-court{color:var(--quiet);font-size:12.5px;margin:2px 0}
/* Thème clair (Housame, 03/11) : les boutons et remplissages gardent le citron avec un texte foncé, comme la vitrine ppslink.fr.
   Les marques fines (traits de sélection, cases cochées, points, contours, interrupteurs), illisibles en citron sur fond clair,
   prennent le vert sapin de la vitrine (--accent-trait, réglé dans app.css). La barre des espaces, vert forêt, garde le citron. */
html[data-theme=light] .rail{--accent-trait:#d4f77d}
html[data-theme=light] :is(.loadbar,.etapes-barre span.fait,.point,.pastille-liste,.roue,.interrupteur input:checked+span,.sw.on,.carte-choix.on .rond){background-color:var(--accent-trait);border-color:var(--accent-trait)}
html[data-theme=light] :is(.separateur:hover,.separateur:focus-visible,.separateur.glisse)::after{background:var(--accent-trait)}   /* un pseudo-élément ne va jamais dans :is() */
html[data-theme=light] :is(.interrupteur input:checked+span,.sw.on)::after{background:#fff}
html[data-theme=light] .roue{border-color:color-mix(in srgb,var(--accent-trait) 25%,transparent);border-top-color:var(--accent-trait)}
html[data-theme=light] .carte-choix.on .rond{background:none}
html[data-theme=light] .tache.faite .coche::before,html[data-theme=light] .ctrl-item.fait .coche{background:var(--accent-trait);border-color:var(--accent-trait);color:#fff}
html[data-theme=light] .tache.faite .coche{color:#fff}
html[data-theme=light] :is(.item.active,.mail-item.unread)::before{background:var(--accent-trait)}
html[data-theme=light] .item.active{box-shadow:inset 3px 0 var(--accent-trait)}
html[data-theme=light] .volets .mail-item.sel{box-shadow:inset 3px 0 var(--accent-trait)}
html[data-theme=light] #list .ligne-dossier.active{border-left-color:var(--accent-trait)}
html[data-theme=light] #list .boite-ligne-ouverte>summary{box-shadow:inset 0 -2px 0 var(--accent-trait)}
html[data-theme=light] :is(.tokens:focus-within,.rg-pas li.en-cours,.carte-choix.on,.cats button.on,.catalogue-btn:hover,.me-zone.avec-origine:focus-within){border-color:var(--accent-trait)}
html[data-theme=light] :is(.btn:focus-visible,.item:focus-visible,.chip:focus-visible,.ev:focus-visible,.ev.sel){outline-color:var(--accent-trait)}
html[data-theme=light] .btn.rond:focus-visible svg{outline-color:var(--accent-trait)}
html[data-theme=light] #main.depot{outline-color:var(--accent-trait)}
html[data-theme=light] :is(.switch input[type=checkbox],.agenda-choix input,.membre input,.rg-case input,.rg-interrupteur input,.rg-option input[type=radio],.biblio-modal .case input){accent-color:var(--accent-trait)}