/* PPS Link · ajouts de l'application réelle à la feuille de la maquette V2 (styles/link.css, reprise telle quelle). */
.etat-ecran{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:80;padding:24px}
.etat-ecran[hidden]{display:none}
.etat-carte{width:min(420px,100%);background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:28px;text-align:center;display:grid;gap:12px;justify-items:center}
.etat-carte h1{margin:0;font-size:22px}
.etat-carte p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.etat-carte.erreur p{color:var(--ink)}
#etat-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.bandeau{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 10px);transform:translateX(-50%);z-index:70;background:var(--warnbg);color:var(--warn);border:1px solid var(--line);border-radius:99px;padding:8px 14px;font-size:13px;font-weight:600}
.bandeau[hidden]{display:none}.clavier .bandeau.invite{display:none}
.vide-court{color:var(--quiet);font-size:12.5px;margin:2px 0}
.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}
.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}
button.av{border:0;cursor:pointer;font:inherit;font-weight:700;padding:0}
.rail .av.me{width:44px;height:44px}
@media (max-width:760px){.menu-moi{left:12px;right:12px;bottom:76px;width:auto}.rail .av.me{display:grid;width:40px;height:40px}}

/* Appels directs avec sonnerie (CONCEPT-12 L3.6) : appel entrant ou sortant (carte au centre), puis la conversation (visio dans la page). */
.appel{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(6px);padding:16px}
.appel[hidden]{display:none!important}
.appel-carte{width:min(360px,100%);background:var(--panel);border:1px solid var(--line);border-radius:26px;padding:32px 24px 26px;display:grid;justify-items:center;gap:10px;text-align:center;box-shadow:0 30px 80px #0007}
.appel-carte h2{margin:6px 0 0;font-size:22px}
.appel-carte p{margin:0;color:var(--muted);font-size:14px;line-height:1.5;min-height:21px}
.av.xl{width:96px;height:96px;font-size:36px}
.appel.entrant .av.xl,.appel.sortant .av.xl{animation:onde 1.6s ease-out infinite}
@keyframes onde{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}100%{box-shadow:0 0 0 26px transparent}}
.appel-gestes{display:flex;gap:34px;margin-top:18px}
.btn.rond{flex-direction:column;gap:8px;border:0;background:none;padding:0;font-size:12.5px;color:var(--ink)}
.btn.rond svg{width:62px;height:62px;padding:18px;border-radius:50%;box-sizing:border-box}
.btn.rond.danger svg{background:#d64545;color:#fff;transform:rotate(135deg)}
.btn.rond.succes svg{background:#2f9e5b;color:#fff}
.btn.rond:hover svg{filter:brightness(1.1)}
.btn.rond:focus-visible{outline:none}.btn.rond:focus-visible svg{outline:3px solid var(--accent);outline-offset:3px}
.appel.en-conversation{display:flex;flex-direction:column;padding:0;background:#000;place-items:initial}
.appel-barre{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--panel);border-bottom:1px solid var(--line)}
.appel-qui{display:flex;align-items:center;gap:10px;margin-right:auto;min-width:0}
.appel-qui b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#appel-duree{color:var(--muted);font-variant-numeric:tabular-nums;font-size:13px}
.appel-barre .btn.danger{background:#d64545;border-color:#d64545;color:#fff}
.appel iframe{flex:1;width:100%;border:0;background:#000}
.bubble.appel-manque{display:flex;align-items:center;gap:10px}
.bubble.appel-manque svg{width:18px;height:18px;color:#d64545}
.bubble.appel-manque .btn{padding:4px 10px;font-size:12px}
.tools{display:flex;gap:8px}
.detail-appel{justify-content:center;margin-top:12px}
.bandeau.invite{top:auto;bottom:calc(20px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:10px;background:var(--panel);color:var(--ink);padding:6px 6px 6px 14px;box-shadow:0 12px 30px #0005}
.bandeau.invite svg{width:18px;height:18px;flex:none}
.bandeau.invite .btn{padding:6px 12px}
.btn[aria-busy=true]{opacity:.75;pointer-events:none}.btn[aria-busy=true]::after{content:"";display:inline-block;width:12px;height:12px;margin-left:6px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:tourne .7s linear infinite;vertical-align:-2px}
@media (max-width:760px){.appel-barre [data-appel-onglet] span,.tools .btn span{display:none}.bandeau.invite{left:12px;right:12px;top:auto;bottom:calc(84px + var(--bas,0px));transform:none;border-radius:16px;flex-wrap:wrap;padding:12px;gap:8px 10px}.bandeau.invite span{flex:1 1 calc(100% - 30px);line-height:1.35}.bandeau.invite .btn{flex:1;justify-content:center}}
/* Lien dans un message (salle de visio, adresse) : petite icône, couleur du texte, l'adresse se coupe proprement (incident du 28/10 : icône géante, lien violet). */
.lien-visio{display:inline-flex;gap:6px;align-items:flex-start;color:inherit;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere;word-break:break-word}
.lien-visio svg{width:16px;height:16px;flex:none;margin-top:2px}
.lien-visio:visited{color:inherit}

/* ---------- Espaces Accueil et Agenda (CONCEPT-14 L2, D12) ---------- */
.app.plein{grid-template-columns:var(--rail) 1fr}
.app.plein .col.list,.app.plein .col.detail{display:none}
.overlay .modal .body{max-height:calc(100vh - 170px)}
.overlay select.input{appearance:auto}
.date-heure{display:grid;grid-template-columns:1fr 104px;gap:6px}
.date-heure input[hidden]{display:none}.date-heure:has(input[hidden]){grid-template-columns:1fr}
.switch input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent);flex:none}
.token button{border:0;background:none;color:inherit;padding:0 2px;font-size:11px;opacity:.75}.token button:hover{opacity:1}
.tokens:focus-within{border-color:var(--accent)}
/* Étapes d'un geste (R-UX-44b) : même lecture que dans PPS HOST. */
.releve-ag{margin:10px 16px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);display:grid;gap:8px}
#ev-releve .releve-ag{margin:0}
.etapes-geste{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:12.5px}
.etapes-geste li{display:flex;gap:8px;align-items:flex-start}
.etapes-geste li small{display:block;color:var(--muted)}
.etapes-geste .st{flex:none;min-width:86px;font-weight:650;font-size:11.5px;padding:1px 8px;border-radius:99px;text-align:center;background:var(--card);color:var(--muted)}
.etapes-geste .fait .st{background:var(--goodbg);color:var(--good)}.etapes-geste .echec .st{background:var(--badbg);color:var(--bad)}.etapes-geste .non_fait .st{background:var(--infobg);color:var(--info)}
/* Mini-calendrier, agendas */
.mini-tete{display:flex;justify-content:space-between;align-items:center;margin:4px 2px 6px}
.mini-tete b::first-letter{text-transform:uppercase}
.mini-cal td{padding:1px}
.mini-cal td button{width:100%;min-height:30px;border-radius:8px;font-size:12px;position:relative}
.mini-cal td button:hover{background:var(--hover)}
.mini-cal td.today{background:none}.mini-cal td.today button{background:var(--accent);color:var(--accent-ink);font-weight:700}
.mini-cal td.vue:not(.today) button{background:var(--card)}
.mini-cal td.has::after{display:none}.mini-cal td.has button::after{content:"";position:absolute;left:50%;bottom:3px;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.7;transform:translateX(-50%)}
.mini-cal td.mute button{color:var(--quiet)}
.agendas .agenda-choix{display:flex;align-items:center;gap:8px;padding:6px 14px;font-size:13px;cursor:pointer;min-height:36px}
.agendas .agenda-choix small{color:var(--quiet)}
.agenda-choix input{accent-color:var(--accent)}
.pastille{width:10px;height:10px;border-radius:50%;flex:none;display:inline-block}
.cal-list .item .l2 svg{width:14px;height:14px}
/* Semaine / jour */
.cal-head{flex-wrap:wrap}
.cal-head h2::first-letter{text-transform:uppercase}
.ag-note{margin:10px 18px 0;align-items:center}
.sem{--h:48px;display:grid;grid-template-columns:56px repeat(var(--n),minmax(0,1fr));min-width:calc(56px + var(--n) * 92px)}
.sem.jour{min-width:0}
.sem-tete,.sem-journee,.sem-corps{display:contents}
.sem-tete>*{position:sticky;top:0;background:var(--bg);z-index:3;padding:8px 4px;text-align:center;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line)}
.sem-tete .hd b{display:block;font-size:18px;color:var(--ink)}
.sem-tete .hd.today b{background:var(--accent);color:var(--accent-ink);border-radius:99px;width:32px;height:32px;line-height:32px;margin:2px auto 0}
.sem-journee>*{border-bottom:1px solid var(--line);border-left:1px solid var(--line);padding:3px;min-height:30px;display:grid;gap:3px;align-content:start}
.sem-journee>.hour{border-left:0;height:auto;font-size:10.5px;padding-top:8px}
.sem-journee .ev{position:static;height:auto}
.sem-heures .hour{height:var(--h);font-size:11px;color:var(--quiet);text-align:right;padding:0 6px 0 0;transform:translateY(-7px)}
.sem-jour{position:relative;height:calc(24 * var(--h));border-left:1px solid var(--line);background-image:repeating-linear-gradient(to bottom,color-mix(in srgb,var(--line) 70%,transparent) 0 1px,transparent 1px var(--h));cursor:copy}
.sem-jour:hover{background-color:color-mix(in srgb,var(--hover) 45%,transparent)}
.sem-jour .ev,.sem-journee .ev{position:absolute;text-align:left;border-radius:8px;padding:3px 7px;font-size:11.5px;line-height:1.3;overflow:hidden;cursor:pointer;border-left:3px solid var(--c);
  background:color-mix(in srgb,var(--c) 22%,var(--panel));color:var(--ink);display:flex;flex-direction:column;z-index:1}
.sem-journee .ev{position:static}
.ev b{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ev span{color:var(--muted);font-size:11px}
.ev:hover{filter:brightness(1.08);z-index:2}.ev.sel{outline:2px solid var(--accent);outline-offset:1px;z-index:2}
.ev.annule b{text-decoration:line-through}.ev.attend{border-left-style:dashed;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--c) 18%,var(--panel)) 0 6px,var(--panel) 6px 12px)}
.maintenant{position:absolute;left:0;right:0;height:2px;background:#e5484d;z-index:2;pointer-events:none}
.maintenant::before{content:"";position:absolute;left:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:#e5484d}
/* Détail d'un événement */
.ag-tete{align-items:flex-start;text-align:left;padding:18px 16px 8px}
.ag-tete .meta{flex-direction:column;gap:6px;margin:6px 0 0}
.ag-gestes{padding:6px 16px 14px;display:grid;gap:10px}
.ag-gestes .tools{flex-wrap:wrap}.ag-gestes .hint{margin:0}
.btn.block{width:100%;justify-content:center}
.ag-desc{font-size:13px;line-height:1.55;overflow-wrap:anywhere}
.person b{font-size:13px}
.fermer-detail{display:none;position:absolute;right:10px;top:10px;z-index:2}
.col.detail{position:relative}
@media (max-width:1180px){
  .app.ag-detail .col.detail{display:block;position:fixed;top:0;right:0;bottom:0;width:min(380px,100%);z-index:40;background:var(--panel);border-left:1px solid var(--line);box-shadow:-20px 0 50px #0006}
  .app.ag-detail .fermer-detail{display:inline-flex}
}
@media (max-width:760px){.app.ag-detail .col.detail{bottom:60px}.sem{min-width:0}}
/* Accueil */
.acc{max-width:none}   /* grand écran : tout l'espace (Housame, 29/10) */
.acc-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.acc-tete .hint{margin:2px 0 0}.acc-tete .hint::first-letter{text-transform:uppercase}
.acc-gestes{display:flex;gap:8px;flex-wrap:wrap}
.acc-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;align-items:start}
@media (min-width:1400px){.acc-grille{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}   /* grand écran : toutes les cartes sur une ligne */
.acc-carte{display:grid;gap:6px}
.acc-carte h3{display:flex;align-items:center;gap:8px;margin:0 0 4px}
.acc-carte h3 svg{width:17px;height:17px;color:var(--muted)}
.acc-carte h3 .count{margin-left:auto}
.acc-ligne{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 6px;border-radius:10px;min-height:40px}
.acc-ligne:hover{background:var(--hover)}
.acc-ligne .time{color:var(--muted);font-size:12px;min-width:50px;font-variant-numeric:tabular-nums}
.acc-ligne .name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-ligne .extrait{flex:1;min-width:0;color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-ligne svg{width:15px;height:15px;color:var(--muted);flex:none}
.acc-ligne .btn{margin-left:auto}
.acc-ouvrir{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}   /* appel manqué : toucher la ligne ouvre la conversation */
button.acc-ligne{border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.acc-prochain{display:grid;gap:3px;padding:12px;border-radius:12px;background:var(--forest);color:#fff;margin-bottom:6px}
.acc-prochain small{color:#cfdacf;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.acc-prochain span{color:#dfe8df;font-size:12.5px}.acc-prochain .btn{justify-self:start;margin-top:6px}
.acc-pied{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:4px}.acc-pied .btn{flex:1 1 auto;justify-content:center}
@media (max-width:760px){.acc-tete{align-items:flex-start}.acc-gestes .btn span{display:inline}.acc-grille{grid-template-columns:1fr}}

/* ---------- Retouches du 28/10 (retour de Housame : rendu des événements, mobile, éléments sélectionnés) ---------- */
.badge[hidden]{display:none}
a.btn{text-decoration:none;color:var(--ink)}a.btn:visited{color:var(--ink)}a.btn.primary{color:var(--accent-ink)}
/* Élément sélectionné : fond teinté de l'accent et une barre nette (plus de liseré courbé dans un coin arrondi). */
.rail a.active{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);box-shadow:none}
.rail a.active::before{content:"";position:absolute;left:-9px;top:11px;bottom:11px;width:4px;border-radius:0 4px 4px 0;background:var(--accent)}
.item.active{background:color-mix(in srgb,var(--accent) 12%,var(--card));box-shadow:none;position:relative}
.item.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--accent)}
.seg button.on{background:color-mix(in srgb,var(--accent) 20%,var(--card));color:var(--ink);font-weight:650}
html[data-theme=light] .rail a.active{color:#fff;background:#ffffff26}html[data-theme=light] .rail a.active::before{background:var(--accent)}
/* Accueil : la journée en ligne de temps (heure de début et de fin, barre de la couleur de l'agenda). */
.acc-jour{display:grid;gap:6px}
.acc-ev{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:8px 10px 8px 12px;border-radius:12px;background:color-mix(in srgb,var(--c) 10%,var(--panel2));position:relative;min-height:48px}
.acc-ev::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--c)}
.acc-ev:hover{background:color-mix(in srgb,var(--c) 18%,var(--panel2))}
.acc-ev.passe{opacity:.55}
.acc-tache{--c:var(--accent)}.acc-tache.retard{--c:var(--danger,#e5484d)}.acc-tache.retard .acc-h{color:var(--danger,#e5484d)}   /* tâches du jour : même carte que les événements */.acc-ev.encours{box-shadow:inset 0 0 0 1px var(--c)}
.acc-h{display:grid;font-size:12.5px;font-weight:650;font-variant-numeric:tabular-nums;min-width:46px}.acc-h small{color:var(--quiet);font-weight:500;font-size:11px}
.acc-t{flex:1;min-width:0;display:grid}.acc-t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px}.acc-t small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-ev svg{width:16px;height:16px;color:var(--muted);flex:none}
.acc-ligne .time{margin-left:0}.acc-ligne .name{flex:none;max-width:45%}
/* Événements de la grille : fond teinté, barre de couleur, titre puis heure et lieu ; un événement court tient sur une ligne. */
.sem-jour .ev,.sem-journee .ev{background:color-mix(in srgb,var(--c) 26%,var(--panel2));border:0;border-left:4px solid var(--c);border-radius:7px;padding:4px 8px;gap:1px;box-shadow:0 1px 0 #0003}
.sem-jour .ev b{display:flex;align-items:center;gap:5px;font-weight:650;font-size:12px}.sem-jour .ev b svg{width:13px;height:13px;flex:none}
.sem-jour .ev span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sem-jour .ev.court{flex-direction:row;align-items:center;gap:6px;padding-top:2px;padding-bottom:2px}.sem-jour .ev.court span{font-size:10.5px}
.sem-jour .ev:hover{background:color-mix(in srgb,var(--c) 36%,var(--panel2));filter:none;box-shadow:0 4px 14px #0005}
.ev.sel{outline:2px solid var(--ink);outline-offset:1px}
.sem-journee .ev{flex-direction:row;padding:3px 8px}
/* Téléphone : l'Accueil prend toute la largeur ; la grille de l'agenda en une colonne lisible ; en-tête qui passe à la ligne. */
@media (max-width:760px){
  .app.plein{grid-template-columns:1fr}
  .app.plein .col.main{display:block}
  .acc{padding:16px 14px 80px}.acc-gestes{width:100%}.acc-gestes .btn{flex:1;justify-content:center}
  .rail a.active::before{left:12px;right:12px;top:-6px;bottom:auto;width:auto;height:3px;border-radius:0 0 3px 3px}
  .cal-head{padding:10px 12px;gap:6px}.cal-head h2{order:9;width:100%;margin:2px 0 0;font-size:15px}.cal-head .seg{margin-left:auto}
  .sem{--h:56px}.sem-heures .hour{font-size:10.5px}
  .col.list .head,.col.main .head{padding-top:12px}
}
/* Panneau de droite masquable par une flèche (Housame, 28/10), sur grand écran comme en tiroir. */
.app{position:relative}
.app.sans-detail{grid-template-columns:var(--rail) var(--list) 1fr}
.app.sans-detail .col.detail{display:none}
.poignee{position:fixed;top:50%;right:calc(var(--detail) - 13px);z-index:45;width:26px;height:52px;border-radius:13px;display:grid;place-items:center;
  background:var(--panel);border:1px solid var(--line);color:var(--muted);box-shadow:0 4px 14px #0003;transform:translateY(-50%)}
.poignee svg{width:16px;height:16px;transition:transform .15s}
.poignee:hover{color:var(--ink);background:var(--hover)}
.poignee.ferme{right:6px}.poignee.ferme svg{transform:rotate(180deg)}
.poignee[hidden]{display:none}
@media (max-width:1180px){.poignee{right:calc(min(380px,100%) - 13px)}}
@media (max-width:760px){.poignee{right:auto;left:6px;top:auto;bottom:72px;transform:none;width:44px;height:44px;border-radius:50%}}
/* Semaine : les 7 jours tiennent dans la largeur ; un événement étroit ne montre que son titre. */
@media (min-width:761px){.sem{min-width:calc(56px + var(--n) * 64px)}}
.app.plein.sans-detail{grid-template-columns:var(--rail) 1fr}
.sem-jour .ev{container-type:inline-size}
@container (max-width:70px){.ev span{display:none}}
/* Toast vide caché pour de bon (il dépassait en bas à droite, petit rond blanc tronqué : retour du 28/10). */
.toast:not(.show){visibility:hidden;opacity:0;transform:translateY(calc(100% + 40px))}
.toast{transition:transform .3s,opacity .3s,visibility .3s}
/* ---------- Mail (CONCEPT-14 L3) ---------- */
.mail-item .txt{display:grid;gap:1px}
.mail-item .objet{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.mail-item:not(.unread) .objet{font-weight:500;color:var(--muted)}
.mail-item.unread .name{font-weight:750}
.point{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none}
.folders .item .name{font-weight:600}
.folders .item.active svg{color:var(--accent)}
.chips{display:flex;gap:6px;flex-wrap:wrap;padding:6px 14px}
.chip button{background:none;border:0;padding:0 0 0 4px;color:inherit}
.plus{display:flex;justify-content:center;padding:10px}
.deplacer{width:auto;min-height:36px;padding:6px 10px;font-size:12.5px}
.mail-read .from .adr{color:var(--quiet);font-size:12.5px}
.mail-read .note{margin:6px 0 12px;align-items:center;flex-wrap:wrap}
iframe.corps-mail{width:100%;min-height:240px;border:1px solid var(--line);border-radius:12px;background:#fff;display:block}
.mail-body.texte{white-space:normal;font-size:14.5px;line-height:1.6;overflow-wrap:anywhere}
a.file,a.mini-file{text-decoration:none;color:inherit}
.file{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.file:hover{background:var(--hover)}.file .ic{width:34px;height:40px;border-radius:7px;display:grid;place-items:center;font-size:9.5px;font-weight:800;background:var(--accent);color:var(--accent-ink);flex:none}
.file b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file small{color:var(--quiet);font-size:11.5px}
.modal.ecrire{width:min(720px,100%)}
.modal.ecrire textarea{min-height:200px;resize:vertical;font-family:inherit}
.lien-cc{justify-self:start;padding:2px 10px;min-height:28px;font-size:12px}
.me-pj{display:grid;gap:4px}.me-pj .mini-file{border:1px solid var(--line);border-radius:10px;padding:6px 8px}.me-pj .mini-file div{flex:1;min-width:0}
.me-pj .refus{border-color:var(--bad)}.me-pj .refus small{color:var(--bad)}.me-pj .refus .ic{background:var(--badbg);color:var(--bad)}
.me-pj .envoi .ic{background:var(--card);color:var(--muted)}
.modal .foot .de{margin-right:auto;align-self:center;margin-top:0}
.acc-mail .acc-t small{color:var(--muted)}
@media (max-width:760px){.mail-read .tools .btn span{display:none}.deplacer{max-width:120px}.modal .foot .de{display:none}}
/* ---------- Mon profil, photos, salons (CONCEPT-16) ---------- */
.av.photo{padding:0;overflow:visible;background:var(--card)}
.av.photo img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.av.salon svg{width:55%;height:55%}
.rail .av.me.photo img{border-radius:50%}
.modal.profil{width:min(640px,100%)}
.profil-grille{display:grid;grid-template-columns:170px 1fr;gap:18px;align-items:start}
.photo-zone{display:grid;justify-items:center;gap:8px;text-align:center}.photo-zone .av.xl{width:112px;height:112px;font-size:40px}
.photo-zone .btn{width:100%;justify-content:center}
.champs{display:grid;gap:12px}.champs .tools{justify-content:flex-end}
.input[readonly]{opacity:.75}
.bloc-mdp{border-top:1px solid var(--line);margin-top:6px;padding-top:14px;display:grid;gap:12px}
.bloc-mdp h2{display:flex;align-items:center;gap:8px;font-size:15px;margin:0}.bloc-mdp h2 svg{width:17px;height:17px}.bloc-mdp .tools{justify-content:flex-end}
.choix-membres{display:grid;gap:4px;max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:12px;padding:6px}
.membre{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;cursor:pointer;min-height:44px}
.membre:hover{background:var(--hover)}.membre input{width:18px;height:18px;accent-color:var(--accent)}.membre small{display:block;color:var(--quiet);font-size:11.5px}
.menu-moi .btn.block{justify-content:flex-start}
@media (max-width:760px){.profil-grille{grid-template-columns:1fr}}
/* ---------- Contacts (CONCEPT-15 D6) ---------- */
.mot{display:inline-block;font-size:11px;padding:1px 7px;border-radius:99px;background:var(--infobg);color:var(--info);margin-left:4px;white-space:nowrap}
.mot-ligne{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid var(--line)}.mot-ligne small{color:var(--quiet);flex:1;min-width:120px}
.btn.sm{min-height:30px;padding:0 10px;font-size:12px}
.contact-fiche .profile-top{padding-top:8px}.contact-fiche .kv{margin:14px 0}.contact-fiche .kv dd a{color:inherit}
/* ---------- iPhone, application ajoutée à l'écran d'accueil (retour du 28/10) ----------
   Barre du bas remontée au-dessus de la zone du geste d'accueil (safe-area) ; hauteur réelle de l'écran (dvh) ; champs en 16 px au toucher :
   Safari ne zoome plus tout seul quand on touche une recherche ou un champ (il zoome sous 16 px). Le zoom à deux doigts reste possible. */
:root{--bas:env(safe-area-inset-bottom,0px);--haut:env(safe-area-inset-top,0px)}
@media (max-width:760px){
  .toast{bottom:calc(72px + var(--bas))}
  .poignee{bottom:calc(72px + var(--bas))}
  .app.ag-detail .col.detail{bottom:calc(60px + var(--bas))}
  .menu-moi{bottom:calc(76px + var(--bas))}
  .appel{padding-bottom:var(--bas)}
}
@media (max-width:760px),(pointer:coarse){
  input,textarea,select,.input,.search input,#msg{font-size:16px}
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ---------- Finitions de l'expérience (28/10 : « simple, clair, fluide ») ----------
   Un seul langage partout : changements d'espace en fondu court, survol et appui discrets, focus visible au clavier, chargements calmes,
   fenêtres qui montent du bas sur téléphone, cibles de 44 px au toucher. Aucune animation si la personne les a coupées (prefers-reduced-motion). */
/* 29/10 : plus d'animation au changement d'espace (les blocs qui glissaient de 3 px faisaient « vibrer » l'écran, même sur ordinateur). */   /* seulement au changement d'espace (pas à chaque nouveau message) */
@keyframes apparaitre{from{opacity:.0;transform:translateY(3px)}to{opacity:1;transform:none}}
.item,.btn,.chip,.acc-ev,.sem-jour .ev{transition:background-color .12s,border-color .12s,box-shadow .12s,transform .08s}
.btn:active,.item:active,.chip:active{transform:scale(.98)}
.btn:focus-visible,.item:focus-visible,.chip:focus-visible,.ev:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.empty p{max-width:34ch;margin-inline:auto}
.empty svg{color:var(--quiet)}
.overlay{background:#0008}
.modal .head h1{font-size:17px;letter-spacing:-.01em}
.modal .foot{border-top:1px solid var(--line);padding:12px 18px}
.field label{letter-spacing:.01em}
.state .pulse{width:6px;height:6px}
@media (max-width:760px){
  .overlay{align-items:flex-end;padding:0}
  .modal{width:100%;max-height:92dvh;border-radius:18px 18px 0 0;animation:monter .2s ease-out;padding-bottom:var(--bas)}
  @keyframes monter{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
  .head h1{font-size:19px}
}
@media (prefers-reduced-motion:reduce){.app.changement .col>*,.modal{animation:none}.item,.btn,.chip{transition:none}}
/* Appel à plusieurs : panneau « Ajouter » posé sur la visio (organisation : Appeler ; contacts extérieurs : Envoyer le lien). */
.appel.en-conversation{position:fixed}
.appel-ajout{position:absolute;top:62px;right:12px;z-index:3;width:min(360px,calc(100% - 24px));max-height:calc(100% - 80px);display:flex;flex-direction:column;gap:8px;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:0 18px 40px #0007}
.appel-ajout[hidden]{display:none}
.ajout-tete{display:flex;align-items:center;justify-content:space-between}
.appel-ajout .scroll{overflow:auto;display:grid;gap:4px}
.ajout-titre{margin:8px 2px 2px;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--quiet)}.ajout-titre small{text-transform:none;letter-spacing:0}
.ajout-ligne{display:flex;align-items:center;gap:10px;padding:6px;border-radius:10px;min-height:44px}.ajout-ligne:hover{background:var(--hover)}
.ajout-ligne>span:nth-child(2){flex:1;min-width:0}.ajout-ligne small{display:block;color:var(--quiet);font-size:11.5px;overflow:hidden;text-overflow:ellipsis}
.ajout-pied{display:flex;justify-content:center}
.overlay.au-dessus{z-index:95}
@media (max-width:760px){.appel-ajout{top:auto;bottom:12px;right:12px;left:12px;width:auto;max-height:70%}.appel-barre [data-appel-ajouter] span{display:none}}
.membre.exterieur{opacity:.6;cursor:not-allowed}
.par-adresse{display:flex;gap:8px;margin-top:8px}.par-adresse .input{flex:1}
.modal.petit{width:min(440px,100%)}
/* Invitation dans un mail : la réponse donnée au-dessus des trois choix, carte qui passe à la ligne sur mobile. */
.invite-card{flex-wrap:wrap}
.invite-reponse{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.invite-reponse .pick button[disabled]{opacity:.55;cursor:progress}
@media (max-width:640px){.invite-reponse{width:100%;align-items:stretch}.invite-reponse .state{align-self:flex-start}}
/* Mon profil (28/10) : deux pages dans la même fenêtre, boutons en bas ; accès au profil bien visible dans « Mon compte ». */
.err[hidden]{display:none}
.modal.profil .foot{display:flex;justify-content:flex-end;gap:8px}
.ligne-mdp{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:inherit;font:inherit;text-align:left;cursor:pointer}
.ligne-mdp:hover{background:var(--hover)}.ligne-mdp svg{width:18px;height:18px;flex:none}.ligne-mdp span:not(.chev){flex:1;min-width:0}
.ligne-mdp small{display:block;color:var(--muted);font-size:12px}.ligne-mdp .chev,.moi-profil .chev{font-size:20px;color:var(--muted)}
.modal.profil .bloc-mdp{border-top:0;margin:0;padding:0}
.moi-profil{width:100%;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:inherit;font:inherit;text-align:left;cursor:pointer}
.moi-profil:hover{background:var(--hover)}.moi-profil .txt{flex:1;min-width:0}.moi-profil b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.moi-profil .lien{display:inline-flex;align-items:center;gap:5px;margin-top:4px;font-size:12.5px;font-weight:600;color:var(--good)}.moi-profil .lien svg{width:13px;height:13px}
.appels-ligne{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.appels-aide{display:block;margin-top:4px;color:var(--muted);font-size:11.5px}
.modal.profil [hidden]{display:none!important}
/* Supprimer la conversation (28/10) : en bas du panneau, discret, confirmation en rouge. */
.suppr-conv{padding:14px 16px 18px;display:grid;gap:6px;justify-items:start}.suppr-conv .hint{font-size:11.5px}
.btn.danger-doux{color:var(--bad)}.btn.danger-doux.confirmer{background:var(--badbg);border-color:var(--bad)}
.ajout-contact{padding:10px 16px 0}
/* Menu « ⋯ » d'une conversation (28/10) : contacts et suppression, à portée de main. */
.col.main .head .tools{position:relative}
.menu-conv{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:240px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:6px;display:grid;gap:2px;box-shadow:0 16px 40px #0005}
.item-menu{display:flex;align-items:center;gap:10px;padding:10px 12px;border:0;border-radius:10px;background:none;color:inherit;font:inherit;font-size:13.5px;text-align:left;cursor:pointer}
.item-menu:hover{background:var(--hover)}.item-menu svg{width:17px;height:17px;flex:none}.item-menu.danger{color:var(--bad)}.item-menu.confirmer{background:var(--badbg)}
/* « Plus » sur téléphone (28/10) : Contacts, thème et profil sortent de la barre du bas. */
.plus-mobile,.moi-mobile{display:none}
@media (max-width:760px){
  .rail .hors-mobile,.rail #moi{display:none}
  .plus-mobile{display:grid;place-items:center;gap:1px;width:52px;height:46px;border:0;border-radius:12px;background:none;color:#cfdacf;font:inherit;font-size:10px;position:relative}
  .plus-mobile svg{width:22px;height:22px}.plus-mobile.active{color:var(--accent)}
  .plus-mobile.active::before{content:"";position:absolute;left:12px;right:12px;top:-6px;height:3px;border-radius:0 0 3px 3px;background:var(--accent)}
  .moi-mobile{display:grid;grid-template-columns:1fr 1fr;gap:8px}.moi-mobile .btn{justify-content:center}
}
html[data-theme=light] .plus-mobile{color:#e6efe4}
/* ---------- Tâches (CONCEPT-17) ---------- */
.filtres-taches{display:grid;gap:2px;padding:4px 8px 8px}.filtres-taches .count,.item .count{margin-left:auto;color:var(--muted);font-size:12px}
.pastille-liste{width:12px;height:12px;border-radius:50%;flex:none;background:var(--accent)}.pastille-liste.grande{width:44px;height:44px;border-radius:14px}
.item.ajout{color:var(--muted)}.ligne-renommer{display:flex;gap:8px;padding:6px 12px}.ligne-renommer .input{flex:1;min-width:0}
.page.taches{padding:8px 14px 90px;max-width:820px}
.tache{display:flex;align-items:flex-start;gap:12px;padding:10px 8px;border-bottom:1px solid var(--line)}
.tache .coche,.coche.petite{flex:none;width:24px;height:24px;margin-top:1px;border-radius:50%;border:2px solid var(--muted);background:none;display:grid;place-items:center;color:var(--accent-ink);cursor:pointer;padding:0}
.tache .coche svg,.coche.petite svg{width:15px;height:15px}.tache.faite .coche,.ctrl-item.fait .coche{background:var(--accent);border-color:var(--accent)}
.tache.retard .coche{border-color:var(--warn)}
.tache-txt{flex:1;min-width:0;display:grid;gap:3px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;padding:0}
.tache-txt .titre{font-size:14.5px;overflow-wrap:anywhere}.tache.faite .titre{text-decoration:line-through;color:var(--muted)}
.tache-txt .meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:12px;color:var(--muted)}.tache-txt .meta svg{width:13px;height:13px;vertical-align:-2px}
.tache-txt .meta .rouge{color:var(--warn);font-weight:600}
.modal.tache-modal{width:min(620px,100%)}.tache-modal .foot .grow{flex:1}
.repetition{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:10px;margin:0}.repetition legend{font-size:12.5px;font-weight:600;padding:0 4px}
.repetition [hidden]{display:none!important}.en-ligne{display:flex;align-items:center;gap:8px;font-size:13px}.input.court{width:78px}
.jours{display:flex;gap:6px;flex-wrap:wrap}.jours .chip{width:38px;justify-content:center}
.ctrl{display:grid;gap:6px}.ctrl-item{display:flex;align-items:center;gap:8px}.ctrl-item .input{flex:1;min-width:0}.ctrl-item.fait .input{text-decoration:line-through;color:var(--muted)}
.ctrl-ajout{display:flex;gap:8px;margin-top:6px}.ctrl-ajout .input{flex:1;min-width:0}
.liste-gestes{display:grid;gap:8px;padding:8px 16px}
.ic-tache svg{width:16px;height:16px;color:var(--good)}
/* Pièces jointes du chat (CONCEPT-18) */
.composer .joindre{cursor:pointer;flex:none}
.bubble.fichier{display:grid;gap:6px;padding:8px}.fichier-image img{display:block;max-width:min(320px,100%);max-height:260px;border-radius:10px;object-fit:cover}
.fichier-nom{font-size:12px;color:var(--muted)}
.fichier-carte{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;min-width:220px}
.fichier-carte .ic,.mini-file .ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--card);border:1px solid var(--line);font-size:10px;font-weight:700;flex:none}
.fichier-carte b{display:block;overflow-wrap:anywhere}.fichier-carte small{color:var(--muted)}
#main.depot{outline:2px dashed var(--accent);outline-offset:-8px}
/* Icônes de l'espace Tâches à leur taille (28/10 : « Nouvelle liste » et l'en-tête du panneau sortaient en géant). */
.item.ajout svg{width:18px;height:18px;flex:none}
.pastille-liste.icone{display:grid;place-items:center;color:var(--accent-ink)}.pastille-liste.icone svg{width:24px;height:24px}
.item .pastille-liste.icone:not(.grande){width:18px;height:18px;background:none;color:var(--muted)}.item .pastille-liste.icone:not(.grande) svg{width:18px;height:18px}   /* « Toutes les listes » : l'icône des Tâches */
.col svg:not([width]):not(.av svg){max-width:48px;max-height:48px}
.modele-liste{margin:6px 16px;padding:12px;border:1px solid var(--line);border-radius:12px;display:grid;gap:6px;justify-items:start}.modele-liste .hint{margin:0}
.hint.herite{margin:-4px 0 0;color:var(--good)}
/* En-tête d'une conversation sur téléphone (29/10) : le nom et l'adresse tiennent sur une ligne (points de suspension), jamais sous les boutons. */
.col.main .head .grow{min-width:0}
.col.main .head h1,.col.main .head .sous-titre{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.col.main .head .sous-titre{font-size:12px;color:var(--muted)}
@media (pointer:coarse){.aide-clavier{display:none}}
@media (max-width:760px){
  .col.main .head{gap:8px}.col.main .head h1{font-size:16px}.col.main .head .tools{gap:6px;flex:none}
  .col.main .head .tools .btn span{display:none}.col.main .head>.av{display:none}
  .composer .btn.primary span{display:none}
}
/* ---------- Téléphone : barre du bas flottante et arrondie (Housame, 29/10, « comme WhatsApp »), qui ne suit pas le clavier ---------- */
@media (max-width:760px){
  .rail{height:62px;padding:0 6px;border-radius:31px;align-items:center;justify-content:space-around;
    box-shadow:0 10px 30px #0007,0 0 0 1px #ffffff14;backdrop-filter:blur(12px)}
  .rail a,.plus-mobile{width:48px;height:48px;border-radius:24px}
  .rail a.active,.plus-mobile.active{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent)}
  .rail a.active::before,.plus-mobile.active::before{display:none}
  .plus-mobile span{display:none}
  .toast,.poignee{bottom:calc(84px + var(--bas))}
  .menu-moi{bottom:calc(84px + var(--bas))}
  .app.ag-detail .col.detail{bottom:calc(82px + var(--bas))}
  /* Clavier ouvert : la barre ne monte pas (retirée), l'écran prend la hauteur visible et la zone d'écriture se pose sur le clavier. */
  .clavier .app.ag-detail .col.detail{bottom:0}
}
/* ---------- Passe iPhone (29/10) : bonnes pratiques WebKit, PWA en écran d'accueil ----------
   La coque et ses tailles sont dans mobile.css (une seule source) ; ici, les fenêtres et la zone d'écriture.
   Clavier ouvert, la zone d'écriture reste entièrement visible au-dessus du clavier. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,a,.btn,.item,.chip,label{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.scroll,.modal .body{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
@media (max-width:760px){
  .col.main .foot{flex:none;padding-bottom:max(10px,env(safe-area-inset-bottom,0px))}
  .clavier .col.main .foot{padding-bottom:8px}
  .composer{align-items:flex-end}
  .composer textarea{max-height:120px;overflow-y:auto}
  .overlay{position:fixed;top:0;height:var(--vvh,100dvh);bottom:auto}
  .modal{max-height:calc(var(--vvh,100dvh) - 12px)}.overlay .modal .body{max-height:calc(var(--vvh,100dvh) - 150px)}
}
/* Chargement (29/10) : une roue au milieu, à la place des blocs qui arrivent un par un (l'écran ne « vibre » plus). */
.chargement{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:220px;height:100%;color:var(--muted);font-size:13px;text-align:center;padding:24px}
.roue{width:28px;height:28px;border-radius:50%;border:3px solid color-mix(in srgb,var(--accent) 25%,transparent);border-top-color:var(--accent);animation:tourne .8s linear infinite;display:inline-block}
.etat-carte .roue{margin:2px auto 0}.etat-carte.erreur .roue{display:none}
@keyframes tourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.roue{animation-duration:2.4s!important}}
.chargement.petit{min-height:120px;height:auto;padding:12px;font-size:12.5px}.chargement.petit .roue{width:22px;height:22px}
.acc-grille .card,.acc-grille>*{min-height:180px}   /* une carte garde sa place pendant qu'elle se lit : rien ne saute */
/* Écran stable pendant la navigation (29/10) : la barre de défilement garde sa place (le contenu ne se décale plus quand elle apparaît),
   les listes et le fil gardent leur hauteur pendant qu'ils se lisent. */
.scroll{scrollbar-gutter:stable}
/* Téléphone (29/10) : un seul fond partout (page, coque, colonnes) : plus de bande sombre sous la liste ni au rebond du défilement. */
@media (max-width:760px){html,body,.app,.app>.col,.col.main,.col.list,.col.detail{background:var(--panel)}}
/* Téléphone (29/10) : l'Accueil est une colonne comme les autres, sa zone défile dans la coque fixe. */
@media (max-width:760px){.app.plein .col.main{display:flex}}
/* Téléphone (29/10) : toute colonne défile si son contenu déborde (pages sans zone de défilement propre : agenda, fiches, réglages) ;
   dans Messages, le fil défile seul et la zone d'écriture reste en bas. */
@media (max-width:760px){.app>.col{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}}
/* Téléphone (29/10) : aucune page ne glisse sur le côté. Les colonnes, zones qui défilent et pages ne débordent jamais en largeur ;
   le doigt ne fait défiler que de haut en bas, sauf dans les rangées faites pour défiler sur le côté (puces, jours, onglets). */
@media (max-width:760px){
  html,body,.app{overflow-x:hidden;max-width:100vw}
  .app>.col,.scroll,.page,.modal .body{overflow-x:hidden;max-width:100%;touch-action:pan-y}
  .chips,.jours,.seg,.tabs,.filtres-taches{touch-action:pan-x pan-y}
  .item .txt,.tache-txt,.acc-ligne .name,.fichier-carte span{min-width:0}
  .item .name,.tache-txt .titre,.acc-ligne .name,.mail-item .objet{overflow-wrap:anywhere}
  img,iframe,table,pre{max-width:100%}
}
/* Téléphone (29/10) : zone d'écriture plus près de la barre du bas (la marge du bord de l'écran n'est plus comptée deux fois). */
@media (max-width:760px){
  .col.main .foot{padding-top:8px;padding-bottom:6px}
  .col.main .foot .hint{display:none}
}
/* Détails en tiroir (tablette, téléphone) : barre « Fermer » collée en haut ; sur grand écran, la flèche suffit. */
.tiroir-tete{display:none}
@media (max-width:1180px){.app.ag-detail .tiroir-tete{display:flex;justify-content:flex-start;padding:10px 12px;border-bottom:1px solid var(--line);flex:none;background:var(--panel)}}
/* Pas de zoom au pincement sur téléphone (29/10) : seul le défilement est permis à la racine. */
@media (max-width:760px){html{touch-action:pan-x pan-y}}
/* NORME D'AFFICHAGE (Housame, 31/10 : « il faut pas que les composants dépassent ; dans les normes de base de l'affichage pour les futurs dev »).
   Règles de base, valables pour tout écran présent et futur : rien ne sort de son conteneur. 1) Une carte, une colonne, un enfant de grille ou de
   flex peut rétrécir (min-width:0) et coupe un mot trop long. 2) Une rangée de boutons passe à la ligne au lieu de déborder. 3) Un bouton ne dépasse
   jamais la largeur disponible : son texte se coupe en « … » (le titre complet reste dans title ou aria-label). */
.card,.acc-carte,.acc-grille>*,.col,.modal,.body,.field{min-width:0;overflow-wrap:anywhere}
/* 5) Le texte d'une ligne de liste ne pousse jamais la ligne hors de l'écran (Housame 31/10 : en réduisant la fenêtre, le trombone et l'heure des mails
   sortaient à droite) : sa colonne de texte rétrécit, chaque ligne de texte se coupe en « … », l'heure et les icônes gardent leur place. */
.item .txt{min-width:0;grid-template-columns:minmax(0,1fr)}
/* 6) Jamais de défilement horizontal (norme 20, Housame 31/10 : barre de défilement en bas de Mail) : une colonne et une zone qui défile ne
   s'élargissent jamais au-delà de l'écran ; un contenu trop large (tableau, code) défile dans son propre cadre, pas la page. */
.col,.scroll,.col>.head,.mail-read{min-width:0;max-width:100%;overflow-x:clip}
.l1,.l2{min-width:0}.l1 .name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.l1 .time,.l2 svg,.l2 .point,.l2 [title]{flex:none}.l1 .time{margin-left:auto}
.acc-pied,.tools,.foot,.acc-gestes,.row-actions,.liste-gestes{flex-wrap:wrap}
.btn{max-width:100%;min-width:0}.btn>span:not(.badge):not(.count){min-width:0;overflow:hidden;text-overflow:ellipsis}
/* 4) Un élément [hidden] reste caché, quel que soit son affichage (un .field en grille montrait le Cc « + Cc » toujours ouvert, 31/10). */
[hidden]{display:none!important}
/* Mail (CONCEPT-27 D8) : pas de panneau de droite ; la bande latérale = boîtes et dossiers ; le corps = liste puis lecture. */
.app.no-detail .col.detail{display:none}
.boite>summary .txt,.boite-autre .txt{display:grid;min-width:0}.boite-autre small{color:var(--muted);font-size:11.5px}.boite-autre{margin-top:6px;border:1px solid var(--line)}.boite>summary .name{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.boite>summary small{color:var(--muted);font-size:11.5px;font-weight:500}
.mail-outils{display:grid;gap:4px;padding:0 0 6px}.mail-outils .search{margin:0 14px}
.retour-liste{gap:6px}
.mail-gestes{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}
.dest summary{cursor:pointer;color:var(--muted);font-size:12.5px;list-style:none}.dest summary::-webkit-details-marker{display:none}.dest summary::after{content:' ▾'}.dest[open] summary::after{content:' ▴'}
.dest small{display:block;margin-top:4px;overflow-wrap:anywhere}

/* Bande latérale du Mail (31/10, « cartes moins grossières, au moins les non lus ») : une ligne légère par boîte, initiales, nom avant @, domaine en petit, non lus */
#list .boite-ligne,#list .boite-ligne-ouverte>summary{display:flex;align-items:center;gap:10px;padding:8px 10px;min-height:44px;border:0;border-radius:10px;background:transparent;text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;color:var(--text);width:100%;text-align:left;min-width:0}
#list .boite-ligne:hover,#list .boite-ligne-ouverte>summary:hover{background:var(--hover,rgba(127,127,127,.08))}
#list .boite-ligne-ouverte{margin:2px 0 6px;border-radius:12px;background:var(--hover,rgba(127,127,127,.06))}
#list .boite-ligne-ouverte>summary .name{font-weight:650}
#list .boite-ligne .txt,#list .boite-ligne-ouverte>summary .txt{display:grid;min-width:0;flex:1}
#list .boite-ligne .name,#list .boite-ligne-ouverte>summary .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#list .boite-ligne .name em,#list .boite-ligne-ouverte>summary .name em{font-style:normal;font-weight:500;color:var(--muted)}
#list .boite-ligne small,#list .boite-ligne-ouverte>summary small{color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#list .boite-ligne .badge,#list .boite-ligne-ouverte>summary .badge{margin-left:auto;flex:none}
#list .boite-ligne-ouverte .item.dossier{padding-left:20px;min-height:40px}
.av.xs{width:28px;height:28px;min-width:28px;font-size:11px}
#list .boite-ligne-ouverte .item.dossier{padding-left:calc(20px + var(--niveau,0) * 16px)}
#list .boite-ligne-ouverte .item.dossier svg{width:16px;height:16px;flex:none}
/* 31/10 : la recherche du Mail n'est plus collée en haut du corps */
.mail-outils{padding:12px 0 8px}
/* ⚙ Réglages de la boîte (CONCEPT-28) : grandes cartes simples, une section à la fois, rien ne dépasse */
.rg{display:grid;gap:10px;align-content:start;padding:12px 16px 24px;min-width:0}
.rg-boite{color:var(--muted);font-size:12px}.rg-aide{color:var(--muted);font-size:13px;margin:6px 0 2px}
.rg-carte{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface,transparent);color:var(--text);text-align:left;cursor:pointer;min-width:0}
.rg-carte:hover{background:var(--hover)}.rg-carte .txt{display:grid;gap:2px;flex:1;min-width:0}.rg-carte b{font-size:14px}.rg-carte small{color:var(--muted);font-size:12.5px}
.rg-carte.bientot{opacity:.55;cursor:default}.rg-carte.bientot:hover{background:transparent}
.rg-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--hover);flex:none}.rg-ic svg{width:20px;height:20px}
.rg-liste{display:grid;gap:4px}
.rg-ligne{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px 8px calc(10px + var(--niveau,0) * 18px);border-radius:10px;min-width:0}
.rg-ligne:hover{background:var(--hover)}.rg-ligne>svg{width:16px;height:16px;flex:none;color:var(--muted)}
.rg-ligne .txt{display:grid;flex:1;min-width:0}.rg-ligne .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rg-ligne small{color:var(--muted);font-size:11.5px}
.rg-ligne .tools{display:flex;gap:6px;flex-wrap:wrap}.rg-ligne.edition input{flex:1;min-width:140px}
.rg-ligne.confirmer{display:grid;gap:8px;border:1px solid var(--line);background:var(--hover)}
.rg-nouveau .rg-champs{display:flex;gap:8px;flex-wrap:wrap}.rg-nouveau input{flex:2;min-width:160px}.rg-nouveau select{flex:1;min-width:140px}
.rg-pied{margin-top:10px}.rg-entree{margin-top:6px;border-top:1px solid var(--line);border-radius:0}
/* 31/10 : domaine en pastille discrète ; boîte ouverte marquée par une ligne sous son nom (plus d'arrière-plan qui touche les bords) */
#list .pastille-domaine{flex:none;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-size:10.5px;font-weight:500;line-height:1.5}
#list .boite-ligne-ouverte{background:transparent;margin:2px 0 8px}
#list .boite-ligne-ouverte>summary{background:transparent;border-radius:0;box-shadow:inset 0 -2px 0 var(--accent)}
#list .boite-ligne-ouverte>summary:hover{background:transparent}
#list .boite-ligne .badge,#list .boite-ligne-ouverte>summary .badge{margin-left:0}
/* 31/10 : arborescence des dossiers (traits, repli), « ⋯ » d'actions, sélection marquée par un seul trait vertical à gauche ; trait sous la boîte affinée */
#list .boite-ligne-ouverte>summary{box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--accent) 70%,transparent)}
#list .ligne-dossier{position:relative;display:flex;align-items:stretch;min-height:36px;padding-left:8px;border-left:2px solid transparent}
#list .ligne-dossier.active{border-left-color:var(--accent)}
#list .ligne-dossier .item.dossier,#list .ligne-dossier .item.dossier.active{flex:1;min-width:0;min-height:36px;padding:6px 4px;background:transparent!important;border-radius:6px}
#list .ligne-dossier.active .item.dossier .name{font-weight:700;color:var(--text)}#list .ligne-dossier.active .item.dossier svg{color:var(--accent)}
#list .ligne-dossier:hover .item.dossier{background:transparent}#list .ligne-dossier:hover .name{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
#list .guide{position:relative;flex:none;width:16px}
#list .guide.suite::before,#list .guide.coude::before{content:'';position:absolute;left:7px;top:0;bottom:0;border-left:1px solid var(--line)}
#list .guide.coude.dernier::before{bottom:50%}
#list .guide.coude::after{content:'';position:absolute;left:7px;right:0;top:50%;border-top:1px solid var(--line)}
#list .replier,#list .replier-vide{flex:none;width:20px;display:grid;place-items:center;border:0;background:transparent;color:var(--muted);cursor:pointer;padding:0}
#list .replier svg{transition:transform .15s}#list .replier.ouvert svg{transform:rotate(90deg)}
#list .dossier-menu{flex:none;width:30px;border:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:6px;font-size:16px;opacity:0}
#list .ligne-dossier:hover .dossier-menu,#list .dossier-menu.ouvert,#list .dossier-menu:focus-visible{opacity:1}#list .dossier-menu:hover{background:var(--hover)}
@media (hover:none){#list .dossier-menu{opacity:.7}}
#list .menu-dossier{display:grid;gap:2px;margin:2px 8px 6px 28px;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--surface,var(--bg))}
#list .menu-dossier button{display:flex;align-items:center;gap:8px;min-height:36px;padding:6px 10px;border:0;border-radius:8px;background:transparent;color:var(--text);text-align:left;cursor:pointer}
#list .menu-dossier button:hover{background:var(--hover)}#list .menu-dossier .danger{color:var(--danger,#e5484d)}#list .menu-dossier .hint{font-size:11.5px;color:var(--muted);padding:4px 10px}
/* 31/10 : un seul marqueur de sélection (le petit trait du dossier), pas de bordure en plus sur la ligne */
#list .ligne-dossier,#list .ligne-dossier.active{border-left-color:transparent}
/* Visionneuse des pièces jointes (31/10) : cadrée, plein écran sur téléphone, rien ne dépasse */
.attach button.file{font:inherit;color:inherit;text-align:left;cursor:pointer;background:var(--surface,transparent)}
.overlay .modal.visionneuse{width:min(960px,calc(100vw - 32px));max-height:calc(100dvh - 32px);display:flex;flex-direction:column;min-width:0}
.visionneuse .head{gap:8px;flex-wrap:nowrap}.visionneuse .head .grow{min-width:0}.visionneuse .head h1{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.visionneuse .head small{color:var(--muted);font-size:11.5px}
.corps-pj{flex:1;min-height:0;overflow:auto;display:grid;place-items:center;padding:12px;background:var(--hover)}
.pj-image{max-width:100%;max-height:calc(100dvh - 140px);object-fit:contain;border-radius:8px}
.pj-texte{align-self:start;justify-self:stretch;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.5;max-width:100%}
.pj-pdf{width:100%;height:calc(100dvh - 160px);border:0;border-radius:8px;background:#fff}
.pj-autre{display:grid;gap:12px;justify-items:center;text-align:center;padding:30px 16px}.pj-autre p{color:var(--muted);max-width:320px}
.pj-type{display:grid;place-items:center;width:64px;height:64px;border-radius:14px;background:var(--surface);font-weight:700;font-size:13px}
@media (max-width:760px){.overlay .modal.visionneuse{width:100vw;max-height:100dvh;height:100dvh;border-radius:0}.visionneuse .head .btn span{display:none}.pj-image{max-height:calc(100dvh - 110px)}}
/* Sélection de plusieurs mails (CONCEPT-28 D5) et de plusieurs dossiers ; rien ne dépasse */
.barre-choix{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0 14px;min-width:0}.barre-choix b{font-size:13px;margin-right:4px}
.barre-choix .chip-select{width:auto;min-height:32px;padding:4px 10px;border-radius:999px;font-size:12.5px}.barre-choix .chip.danger{color:var(--danger,#e5484d)}
.barre-choix .chip svg,.chips .chip svg{width:14px;height:14px}
.mail-item .case-mail{display:grid;place-items:center;width:28px;height:28px;flex:none;border:2px solid var(--line);border-radius:8px}
.mail-item.choisi .case-mail{background:var(--accent);border-color:var(--accent);color:var(--accent-ink,#111)}.mail-item.choisi{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.rg-case,.rg-case-vide{flex:none;width:22px;display:grid;place-items:center}.rg-case input{width:18px;height:18px;min-height:0;margin:0;accent-color:var(--accent)}
.rg-ligne.coche{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.rg-lot{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface,var(--bg))}
.rg-lot.confirmer{display:grid}.rg-lot .tools{display:flex;gap:6px;flex-wrap:wrap}