/* ---------- Socle responsive natif (Housame, 02/11 : « le responsive doit être un mécanisme natif ») ----------
   Par défaut, dans une fenêtre ou une colonne, aucun bloc ne s'élargit au-delà de son parent à cause d'un contenu long (adresse, lien, mot sans
   espace) : les blocs peuvent rétrécir, les médias ne dépassent jamais, un mot trop long passe à la ligne. :where() ne pèse rien : toute règle
   précise d'un écran l'emporte. La garde (tests/link/garde-responsive.js, dans avant-mep) vérifie à 375 et 1280 px que rien ne dépasse. */
:where(.modal,.col,.page,.overlay) :where(div,section,article,form,fieldset,label,p,ul,ol,li,details,summary){min-width:0}
:where(.modal,.col,.page) :where(img,video,iframe,canvas,table,pre){max-width:100%}
:where(.modal,.col,.page) :where(h1,h2,h3,h4,p,b,strong,small,a,li,label,summary){overflow-wrap:break-word}
:where(.modal,.col,.page) fieldset{min-inline-size:0}
/* 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:var(--danger-fond);border-color:var(--danger-fond);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-gestes [data-acc-carte]{background:var(--infobg);color:var(--info);border-color:color-mix(in srgb,var(--info) 40%,transparent)}.acc-gestes [data-acc-carte]:hover{background:color-mix(in srgb,var(--info) 22%,var(--infobg))}   /* « Ma carte » se distingue des actions (Housame, 02/11) */
.acc-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}   /* écran moyen : 2 cartes par ligne (Housame, 02/11 : à 4 par ligne, les titres des tâches se coupaient en plein mot) */
@media (min-width:1600px){.acc-grille{grid-template-columns:repeat(3,minmax(0,1fr))}}   /* grand écran : 3 par 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)/*barre-foncee*/;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-taches{margin:0 -6px}.acc-taches .tache:last-child{border-bottom:0}   /* Accueil : la ligne de Tâches, dans la carte (CONCEPT-41 G3) */
.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)}.acc-tache.retard .acc-h{color:var(--danger)}   /* 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%;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}.acc-gestes .btn{justify-content:center}.acc-gestes .btn{padding:0 6px;gap:5px;font-size:12.5px}.acc-gestes .btn svg{width:16px;height:16px}   /* téléphone : « Ma carte » d'abord, sur toute la largeur (Housame, 02/11) ; : 2 colonnes lisibles, « Nouvel événement » sur toute la largeur (garde responsive, 02/11) */
  .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)}
/* Discrètes hors survol (Housame, 02/11 : « moyennement transparent hors hover ») ; nettes au survol, au clavier et au toucher. */
.poignee{opacity:.45;transition:opacity .15s,background .15s,color .15s}.poignee:hover,.poignee:focus-visible,.poignee:active{opacity:1}
@media (hover:none){.poignee{opacity:.7}}
.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%}}
/* Bande de gauche masquable (02/11) : la poignée sur son bord droit ; repliée, la bande ne prend plus de place. Ordinateur seulement. */
.poignee.gauche{right:auto;left:calc(var(--rail) + var(--list) - 13px)}.poignee.gauche svg{transform:rotate(180deg)}
.poignee.gauche.ferme{right:auto;left:calc(var(--rail) + 6px)}.poignee.gauche.ferme svg{transform:none}
.app.sans-liste{--list:0px}.app.sans-liste #list{visibility:hidden;overflow:hidden;min-width:0;border:0}
@media (max-width:760px){.poignee.gauche{display:none}}
/* 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-texte)}
.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}
/* Le mail se lit toujours sur fond clair, comme l'a écrit l'expéditeur (02/11) : en thème sombre, le cadre restait blanc mais les mails qui ont
   leur propre mode sombre (Google Agenda…) passaient leurs textes en clair : illisibles. Le cadre est donc en schéma clair, quel que soit le thème. */
iframe.corps-mail{color-scheme:light}
.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)}
/* Barre du bas sur téléphone (Housame, 02/11) : tous les espaces, la cloche et la photo de profil, toujours visibles. Sur un écran trop étroit,
   « Plus » apparaît et regroupe les DERNIERS espaces (jamais la cloche ni le profil). La barre se mesure elle-même (container query) : 8 places de
   44 px ; moins de 352 px : Tâches et Contacts passent dans « Plus » ; moins de 308 px : Mail aussi. Le menu « Plus » liste ce qui est caché. */
.plus-mobile,.moi-mobile{display:none}
@media (max-width:760px){
  .rail .hors-mobile{display:none}
  .rail{container-type:inline-size;gap:0}
  .rail a,.rail .plus-mobile,.rail #moi{width:44px;height:44px;flex:none}
  .rail #moi{display:grid;order:4;margin:0}.rail .cloche{order:3}
  .plus-mobile{place-items:center;gap:1px;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)/*barre-foncee*/}
  .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 des tâches en sélecteur sur une ligne, en pilule (02/11, Housame : « préférence pour switch bouton », « dans ce style là ») : le nombre à côté du mot, rien s'il est nul. */
.filtres-taches.seg-taches{display:flex;margin:2px 14px 10px;padding:4px;gap:2px;border:1.5px solid var(--line);border-radius:999px;background:var(--panel2)}
.seg-taches button{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:34px;padding:0 6px;border:0;border-radius:999px;background:none;color:var(--muted);font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
.seg-taches button.on{background:var(--accent);color:var(--accent-ink)}
.seg-taches .n{font-size:10.5px;font-weight:700;opacity:.75}.seg-taches .alerte .n{color:var(--bad);opacity:1}.seg-taches button.on .n{opacity:.8}
@media (max-width:360px){.seg-taches button{font-size:11px;padding:0 2px}.seg-taches .n{font-size:9.5px}}
.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}
/* La coche prend toute la hauteur de la ligne sur 44 px de large (Housame, 02/11 : « la liste des tâches faites ne se décoche pas facilement ») :
   le rond de 24 px restait en haut d'une ligne de 88 px et le reste de la bande de gauche ne faisait rien. Le dessin ne change pas ; plus de marge
   morte en haut et en bas de la ligne (le texte, qui ouvre la tâche, va lui aussi jusqu'aux bords). */
.tache{align-items:stretch;padding:0 8px}
.tache .coche{align-self:stretch;width:44px;height:auto;margin:0 -10px;padding:0;border:0;border-radius:0;background:none;display:grid;place-items:start center;position:relative}
.tache .coche::before{content:"";position:absolute;top:11px;left:10px;width:24px;height:24px;box-sizing:border-box;border-radius:50%;border:2px solid var(--muted)}
.tache .coche svg{position:relative;margin-top:15.5px}.tache.faite .coche{background:none;border:0}.tache.faite .coche::before{background:var(--accent);border-color:var(--accent)}
.tache.retard .coche::before{border-color:var(--warn)}
/* Ligne de tâche sur deux rangées (Housame, 02/11) : 1) la marque, la coche, le titre sur toute la largeur, la pastille d'événement, Pas faite ;
   2) la date, la répétition, la liste… depuis le bord gauche. Sur téléphone, un titre long ne pousse plus la date en colonne. */
.tache{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;align-items:center;column-gap:8px;row-gap:0;padding:6px 8px 10px}
.tache>.marque-liste{grid-area:1/1;margin:0}.tache>.coche{grid-area:1/2}.tache>.tache-txt{grid-area:1/3}.tache>.ev-lie-mini{grid-area:1/4}.tache>.gestes-tache{grid-area:1/5}
.tache>.tache-meta{grid-area:2/1/3/-1}
.tache:not(:has(>.marque-liste)){grid-template-columns:auto minmax(0,1fr) auto auto}.tache:not(:has(>.marque-liste))>.coche{grid-column:1;margin-left:-8px}
.tache:not(:has(>.marque-liste))>.tache-txt{grid-column:2}.tache:not(:has(>.marque-liste))>.ev-lie-mini{grid-column:3}.tache:not(:has(>.marque-liste))>.gestes-tache{grid-column:4}   /* sans marque : la coche au bord, alignée sur la date */
.tache .coche{align-self:center;width:40px;height:40px;margin:0 -6px;place-items:center}.tache .coche::before{top:8px;left:8px}.tache .coche svg{margin-top:0}
.tache .tache-txt{padding:4px 0;align-self:center}
.tache-meta{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;min-width:0;padding:0;margin:0;border:0;background:none;font:inherit;font-size:12px;color:var(--muted);text-align:left;cursor:pointer}
.tache-meta svg{width:13px;height:13px;vertical-align:-2px}.tache-meta .rouge{color:var(--warn);font-weight:600}.tache-meta>span{display:inline-flex;align-items:center;gap:5px}
/* CONCEPT-41 : gestes de droite (Afficher, Pas faite) en 40 px, une tâche pas faite (⊘ rouge, barrée), « Annuler » dans le message court. */
.gestes-tache{display:flex;align-items:center;align-self:center;gap:2px;flex:none;padding-left:4px}
.geste{width:40px;height:40px;border:0;border-radius:12px;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.geste:hover{background:var(--hover);color:var(--ink)}.geste.pas:hover{color:var(--bad)}.geste svg{width:19px;height:19px}
.tache.pasfaite .coche::before{background:var(--badbg);border-color:var(--bad)}.tache.pasfaite .coche{color:var(--bad)}.tache.pasfaite .titre{text-decoration:line-through;color:var(--muted)}
.toast .toast-action{margin-left:6px;min-height:34px;padding:0 14px;border-radius:10px;border:0;background:var(--accent);color:var(--accent-ink);font-weight:700;cursor:pointer}
.bloc-lecture{border:1px solid var(--line);border-radius:16px;padding:14px 16px;background:var(--panel2)}
.bloc-lecture h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}.bloc-lecture h3 svg{width:15px;height:15px}
.bloc-lecture .texte{line-height:1.55;color:var(--text)}.bloc-lecture .ctrl-item{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.bloc-lecture .ctrl-item:first-of-type{border-top:0}.bloc-lecture .ctrl-item.fait span{text-decoration:line-through;color:var(--muted)}
.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);color:var(--ink);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{border-radius:22px}
  .rail a.active,.plus-mobile.active{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent)/*barre-foncee*/}
  .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-texte)}
#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)}#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)}
.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}
/* Geste en cours (31/10) : une roue et son libellé en bas de l'écran ; le corps grisé, sans second clic, jusqu'à la fin */
.geste-en-cours{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:90;display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:var(--panel);color:var(--ink,var(--text));border:1px solid var(--line);box-shadow:0 8px 24px #0006;font-size:13px;max-width:calc(100vw - 32px)}
.geste-en-cours .roue{flex:none}
#main.occupe{pointer-events:none;opacity:.6;transition:opacity .15s}
@media (max-width:760px){.geste-en-cours{bottom:calc(90px + env(safe-area-inset-bottom,0px))}}
/* Règles de rangement (CONCEPT-28 D4) : cartes avec interrupteur, assistant en trois étapes */
.rg-nouvelle{justify-self:start}
.rg-regle{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;min-width:0}.rg-regle.eteinte{opacity:.55}
.rg-regle .txt{display:grid;flex:1;min-width:0}.rg-regle small{color:var(--muted);overflow-wrap:anywhere}
.rg-interrupteur input{width:20px;height:20px;min-height:0;margin:0;accent-color:var(--accent)}
.rg-pas{display:flex;gap:6px;flex-wrap:wrap;list-style:none;padding:0;margin:0}.rg-pas li{padding:4px 10px;border-radius:999px;border:1px solid var(--line);font-size:12px;color:var(--muted)}
.rg-pas li.en-cours{border-color:var(--accent);color:var(--text);font-weight:650}.rg-pas li.fait{color:var(--text)}
.rg-assistant{display:grid;gap:12px}.rg-champs{display:flex;gap:8px;flex-wrap:wrap}.rg-champs select{flex:1;min-width:160px}.rg-champs input{flex:2;min-width:180px}
.rg-choix{display:grid;gap:8px}.rg-option{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px;border:1px solid var(--line);border-radius:12px;cursor:pointer}
.rg-option select{flex:1;min-width:160px}.rg-option input[type=radio]{width:18px;height:18px;min-height:0;margin:0;accent-color:var(--accent)}
.rg-resume{padding:10px 12px;border-radius:10px;background:var(--hover);font-size:13px}
.rg-regle{flex-wrap:wrap}.rg-regle .tools{display:flex;gap:6px;flex-wrap:wrap}
.rg-appliquer{flex-basis:100%;display:grid;gap:8px;padding:10px 12px;border-radius:10px;background:var(--hover);font-size:13px}
/* Proposition d'ajout au carnet après un envoi (31/10) : discrète, en bas à droite, rien n'est ajouté sans un clic */
.proposer-carnet{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:85;width:min(380px,calc(100vw - 32px));display:grid;gap:8px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:0 10px 30px #0007;font-size:13px}
.proposer-carnet .ligne{display:flex;align-items:center;gap:8px;min-width:0}.proposer-carnet .txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proposer-carnet .fait{color:var(--muted);font-size:12px}.proposer-carnet .tools{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
@media (max-width:760px){.proposer-carnet{right:16px;bottom:calc(90px + env(safe-area-inset-bottom,0px))}}
/* 31/10 : thème clair moins agressif (le vert pâle d'accent sur fond blanc piquait les yeux) : icônes et traits d'accent en vert foncé ;
   boîtes marquées par une icône d'enveloppe qui suit le thème, au lieu d'un rond coloré (on distingue les boîtes des mails) */
:root{--accent-trait:var(--accent)}
html[data-theme=light]{--accent-trait:#2f5c43}   /* vert sapin de la vitrine pour les marques fines en thème clair (Housame, 03/11) */
.item.active::before{background:var(--accent-trait)}
html[data-theme=light] .item.active{background:color-mix(in srgb,var(--accent-trait) 9%,var(--card))}
.folders .item.active svg,#list .ligne-dossier.active .item.dossier svg{color:var(--accent-trait)}
#list .boite-ligne-ouverte>summary{box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--accent-trait) 70%,transparent)}
#list .boite-ic{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:8px;border:1px solid var(--line);color:var(--muted)}
#list .boite-ic svg{width:15px;height:15px}
#list .boite-ligne-ouverte>summary .boite-ic{color:var(--ink,var(--text));border-color:color-mix(in srgb,var(--accent-trait) 60%,var(--line))}
html[data-theme=light] .mail-item.choisi .case-mail,html[data-theme=light] .rg-pas li.en-cours{border-color:var(--accent-trait)}
html[data-theme=light] .rg-case input,html[data-theme=light] .rg-interrupteur input,html[data-theme=light] .rg-option input[type=radio]{accent-color:var(--accent-trait)}
/* « Ma carte de visite » (CONCEPT-30) */
#list .cv-entree{border-bottom:1px solid var(--line)}
.page.carte-visite{max-width:640px;padding:12px 16px 90px;display:flex;flex-direction:column;gap:14px}
.carte-visite h2{font-size:15px;margin:6px 0 0}
.cv-etat{border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.cv-etat.publie{border-color:color-mix(in srgb,var(--accent-trait,var(--accent)) 50%,var(--line))}
.cv-etat p{margin:0}
.cv-qr{align-self:center;background:#fff;border-radius:12px;padding:6px;line-height:0}
.cv-qr svg{width:min(220px,60vw);height:auto}
.cv-lien{font-size:12px;color:var(--muted);word-break:break-all}
.cv-etat .cta{display:flex;flex-wrap:wrap;gap:8px}
.cv-confirmer{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cv-form{display:flex;flex-direction:column;gap:10px}
.cv-champ .cv-public{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--muted);margin-top:4px}
.cv-apercu{list-style:none;margin:0;padding:12px 14px;border:1px dashed var(--line);border-radius:12px;display:flex;flex-direction:column;gap:6px}
.cv-apercu li{display:flex;gap:10px;flex-wrap:wrap}.cv-apercu span{color:var(--muted);min-width:90px;font-size:13px}
html[data-theme=light] .cv-public input{accent-color:var(--accent-trait)}
/* Tâches : « ⋯ » sur chaque liste (31/10), mêmes gestes que les dossiers du mail */
#list .ligne-liste{display:flex;align-items:stretch}
#list .ligne-liste .item{flex:1;min-width:0}
#list .ligne-liste:hover .dossier-menu{opacity:1}
#list form.menu-dossier{display:flex;gap:6px}
#list form.menu-dossier .input{flex:1;min-width:0}
/* Carte de visite : rendu (comme la page publique), photo, fenêtre de l'Accueil (31/10) */
.cv-rendu{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:18px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface,var(--bg))}
.cv-rendu h3{margin:6px 0 0;font-size:20px;overflow-wrap:anywhere}.cv-role{margin:0;color:var(--muted)}
.cv-rendu ul{list-style:none;margin:10px 0 0;padding:0;width:100%;text-align:left}.cv-rendu li{display:grid;padding:8px 0;border-top:1px solid var(--line)}
.cv-rendu li span{font-size:12px;color:var(--muted)}.cv-rendu li b{font-weight:500;overflow-wrap:anywhere}
.cv-photo{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--line)}
.cv-photo.vide{display:grid;place-items:center;font-size:34px;font-weight:700;color:#17251b}
.cv-zone-photo{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.cv-photo-gestes{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:1;min-width:0}.cv-photo-gestes .hint{flex-basis:100%;margin:0}
.cv-modal .body{display:flex;flex-direction:column;gap:12px}.cv-modal .cv-qr{align-self:center}.cv-centre{text-align:center;margin:0}
.cv-rendu .cv-societe{margin:0;font-weight:600}
.cv-rendu li{display:flex;gap:12px;align-items:center}.cv-rendu .cv-val{display:grid;min-width:0}
.cv-rendu .cv-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent-texte)}
html[data-theme=light] .cv-rendu .cv-ic{color:var(--accent-trait)}
.cv-rendu .cv-ic svg{width:18px;height:18px}
/* Lecture d'un mail (31/10) : barre qui tient toujours sur une ligne ; « ⋯ » regroupe les gestes quand la place manque */
.lecture-tete{container-type:inline-size;container-name:lecture}
.lecture-tete .retour-liste,.lecture-tete .tools>*{flex:none}
.plus-lecture{display:none;position:relative}
.plus-lecture>summary{list-style:none;display:inline-grid;place-items:center;font-size:18px;cursor:pointer}.plus-lecture>summary::-webkit-details-marker{display:none}
.menu-lecture{position:absolute;right:0;top:calc(100% + 6px);z-index:30;display:grid;gap:2px;min-width:220px;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--surface,var(--bg));box-shadow:0 10px 30px rgba(0,0,0,.35)}
.menu-lecture button{display:flex;align-items:center;gap:10px;min-height:42px;padding:8px 12px;border:0;border-radius:8px;background:transparent;color:var(--text);text-align:left;cursor:pointer;font:inherit}
.menu-lecture button:hover{background:var(--hover)}.menu-lecture .input{margin-top:4px;width:100%}
/* Barre étroite (téléphone) : toutes les icônes qui tiennent restent, le reste passe dans « ⋯ » par priorité (p3, puis p2, puis p1). */
.menu-lecture>button{display:none}
@container lecture (max-width:640px){.lecture-tete .deplacer{display:none}.plus-lecture{display:block}.lecture-tete .tools{gap:4px}
  .lecture-tete .btn.icon,.plus-lecture>summary{width:42px;height:42px}}
@container lecture (max-width:520px){.lecture-tete .tools>.p3{display:none}.menu-lecture>.p3{display:flex}}
@container lecture (max-width:430px){.lecture-tete .tools>.p2{display:none}.menu-lecture>.p2{display:flex}}
@container lecture (max-width:330px){.lecture-tete .tools>.p1{display:none}.menu-lecture>.p1{display:flex}}
.col>.head.lecture-tete{overflow:visible}
/* Échanges avec un contact, sous sa fiche (CONCEPT-34) : onglets en pastilles, mails en lignes, fil du chat en bulles, lecture seule. */
.echanges{margin-top:22px;border-top:1px solid var(--line);padding-top:16px}
.ech-onglets{margin:0 0 12px}.ech-onglets .chip{display:inline-flex;align-items:center;gap:6px}.ech-onglets .chip svg{width:15px;height:15px}
.ech-zone .vide-court,.ech-panne p{margin:8px 2px}
.ech-mails .item{width:100%;text-align:left}.ech-mails .item .l1{display:flex;align-items:center;gap:6px}.ech-mails .item .l1 svg{width:14px;height:14px;flex:none}
.ech-mails .item .when{margin-left:auto;font-size:11px;opacity:.7;white-space:nowrap}
.ech-mails .item .l2 span{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.ech-zone>.btn{margin-top:10px}
.ech-fil{display:flex;flex-direction:column;gap:8px;max-height:420px;overflow:auto;padding:4px 2px}
.ech-msg{max-width:85%;align-self:flex-start;background:var(--raised,rgba(127,127,127,.12));border-radius:14px;padding:8px 12px}
.ech-msg.moi{align-self:flex-end;background:color-mix(in srgb,var(--accent,#d4f77d) 30%,transparent)}
.ech-msg small{display:block;font-size:11px;opacity:.7;margin-bottom:2px}.ech-msg p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.sa-cherche{margin:0 0 8px}.choix-membres label.membre[hidden],.choix-membres .ajout-titre[hidden]{display:none}
/* Membres d'une discussion en pastilles (CONCEPT-35) : la croix demande « Retirer ? Oui / Non » dans la pastille même. */
#sa-actuels{list-style:none;margin:4px 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
#sa-actuels .pastille-x{display:inline-flex;align-items:center;gap:6px;padding:3px 4px 3px 4px;border-radius:999px;background:color-mix(in srgb,var(--accent) 22%,transparent);border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line));font-size:13px;font-weight:600;max-width:100%}
#sa-actuels .pastille-x>span{overflow-wrap:anywhere}
#sa-actuels .pastille-retirer{display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
#sa-actuels .pastille-retirer:hover,#sa-actuels .pastille-retirer:focus-visible{background:color-mix(in srgb,var(--danger) 18%,transparent);color:var(--danger)}
#sa-actuels .pastille-x.confirmer{background:color-mix(in srgb,var(--danger) 18%,transparent);border-color:var(--danger);color:var(--danger);padding-right:6px}
#sa-actuels .oui,#sa-actuels .non{border:0;border-radius:999px;padding:4px 10px;font:inherit;font-size:12px;cursor:pointer}
#sa-actuels .oui{background:var(--danger-fond);color:#fff}#sa-actuels .non{background:transparent;color:inherit;text-decoration:underline}
.item-menu.danger.confirmer{font-weight:700}
/* Mails non lus bien visibles dans la liste, sans filtrer (Housame, 01/11) : barre d'accent à gauche, fond teinté, expéditeur et objet en
   gras foncés, aperçu plus contrasté, point plus gros ; un mail lu passe en poids normal, plus discret. Clair et sombre. */
.mail-item{position:relative}
.mail-item.unread{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.mail-item.unread::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--accent)}
.mail-item.unread .name{font-weight:800;color:var(--ink)}
.mail-item.unread .objet{font-weight:750;color:var(--ink)}
.mail-item.unread .l2 span:first-child{color:var(--ink);opacity:.85}
.mail-item.unread .time{font-weight:700;color:var(--ink)}
.mail-item.unread .point{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent);flex:none}
.mail-item:not(.unread) .name{font-weight:500}
html[data-theme=light] .mail-item.unread::before,html[data-theme=light] .mail-item.unread .point{background:var(--accent-trait,var(--accent))}
/* Actions d'une conversation dans une fenêtre (01/11) : la liste d'actions y est à sa place, sans position propre. */
.modal.actions-conv{width:min(420px,calc(100vw - 32px))}
.modal .menu-conv{position:static;min-width:0;border:0;box-shadow:none;padding:0;background:none}
.modal .menu-conv .item-menu{min-height:48px;font-size:15px}
/* Favoris du Mail (01/11) : étoile discrète sur la ligne, jaune et pleine quand le mail est en favori. */
/* Étoile dans sa propre colonne, à droite de la carte, sur toute sa hauteur (01/11 : « ça ouvre toujours le mail, il faut cliquer en haut à
   gauche de l'étoile » : elle était dans la ligne du nom, la ligne de l'objet passait par-dessus le bas de sa zone). */
.mail-item .etoile-mail{align-self:stretch;flex:none;width:44px;margin:-6px -8px -6px 6px;display:grid;place-items:center;border-radius:12px;color:var(--muted);cursor:pointer;position:relative;z-index:1}
.mail-item .etoile-mail svg{width:22px;height:22px}
.mail-item .etoile-mail:hover{background:var(--hover);color:#E8B931}
@media (pointer:coarse){.mail-item .etoile-mail{width:52px}.mail-item .etoile-mail svg{width:26px;height:26px}}
.etoile-mail.on{color:#E8B931}.etoile-mail.on svg{fill:currentColor}
/* Réponse à un mail (01/11) : son message et le message d'origine dans un seul bloc, comme Gmail ; l'origine dessous, non modifiable. */
.me-zone.avec-origine{border:1px solid var(--line);border-radius:12px;background:var(--card);max-height:62vh;overflow:auto}
.me-zone.avec-origine:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.me-zone.avec-origine textarea{border:0!important;box-shadow:none!important;background:transparent!important;outline:0!important;border-radius:12px 12px 0 0;resize:vertical}
.me-zone .me-origine{padding:4px 14px 14px}
.me-origine .hint{margin:6px 0 6px}
.me-cite{border-left:3px solid #3B7A57;padding-left:12px;color:var(--text,inherit);opacity:.85;font-size:13px;max-height:320px;overflow:auto;overflow-wrap:anywhere;white-space:normal}
.me-cite blockquote{border-left-color:var(--line)!important}
/* Recherche du Mail soudée au choix du dossier (01/11) : arrondis aux seules extrémités, gauche pour le champ, droite pour la liste. */
.recherche-soudee{display:flex;align-items:stretch;min-width:0;margin:0 14px}
.recherche-soudee .search{flex:1;min-width:0;border-top-right-radius:0!important;border-bottom-right-radius:0!important;margin-right:0!important}
.recherche-soudee .search{margin:0!important}
.recherche-soudee select{flex:none;width:auto;max-width:42%;height:auto;margin:0!important;padding:0 10px;border:1px solid var(--line);border-left:0;border-radius:0 12px 12px 0!important;background:var(--panel2);color:var(--muted);font-size:13px;cursor:pointer}
.recherche-soudee:focus-within .search,.recherche-soudee:focus-within select{border-color:var(--accent,var(--line))}
/* Pastilles d'une ligne de mail (01/11) : dossier, et Reçu / Envoyé avec icône, sur la ligne du nom. */
.pastille-mail-dossier,.pastille-mail-sens{display:inline-flex;align-items:center;gap:4px;flex:none;max-width:140px;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:600;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pastille-mail-dossier{background:var(--hover);color:var(--muted)}
.pastille-mail-dossier span,.pastille-mail-sens span{overflow:hidden;text-overflow:ellipsis}
.pastille-mail-dossier svg,.pastille-mail-sens svg{width:12px;height:12px;flex:none}
.pastille-mail-sens.recu{background:var(--goodbg);color:var(--good)}
.pastille-mail-sens.envoye{background:var(--warnbg);color:var(--warn)}
@media (max-width:760px){.pastille-mail-sens span{display:none}.pastille-mail-sens{padding:1px 5px}.pastille-mail-dossier{max-width:90px}}

/* Barre de lecture (01/11) : Retour à gauche, icônes au centre, Déplacer et Corbeille (rouge) à droite, tous à la même hauteur. */
.lecture-tete{gap:8px;align-items:center}.lecture-tete .tools{display:flex;align-items:center;gap:6px}
.lecture-tete .tools.centre{flex:1;justify-content:center;min-width:0}.lecture-tete .tools.droite{justify-content:flex-end}
.lecture-tete .btn.icon,.lecture-tete .plus-lecture>summary{width:46px;height:42px;min-height:42px;padding:0;justify-content:center;border-radius:12px}
.lecture-tete .btn.icon svg{width:20px;height:20px}
.lecture-tete .deplacer{height:42px;min-height:42px;padding:0 12px;border-radius:12px;font-size:13px;max-width:170px}
.lecture-tete .favori-on{color:#E8B931}.lecture-tete .favori-on svg{fill:currentColor}
.lecture-tete .btn.supprimer{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}.lecture-tete .btn.supprimer:hover{background:var(--badbg)}
/* Import des règles d'une autre boîte (CONCEPT-37). */
.rg-boutons{display:flex;flex-wrap:wrap;gap:8px}.rg-boutons .rg-nouvelle{margin:0}
.imp-liste{display:grid;gap:8px}.imp-regle{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer}
.imp-regle input{margin-top:3px;flex:none}.imp-regle .txt{display:grid;gap:2px;min-width:0}.imp-regle small{color:var(--muted)}
.imp-regle.deja{opacity:.55;cursor:default}.imp-note.cree{display:inline-flex;align-items:center;gap:4px;color:var(--warn)}.imp-note svg{width:13px;height:13px}
.imp-avis{margin:0 18px 8px;padding:8px 12px;border-radius:10px;background:var(--badbg);color:var(--bad);font-size:13px}
.agenda-taches{border-top:1px solid var(--line);margin-top:4px;padding-top:8px}.agenda-taches svg{width:15px;height:15px;color:var(--muted)}
/* Marque d'une liste de tâches (CONCEPT-39) : son icône dans sa couleur ; filet de la couleur à gauche de chaque tâche. */
.marque-liste{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:8px;background:color-mix(in srgb,var(--lc) 18%,transparent);color:var(--lc)}
.marque-liste svg{width:15px;height:15px}.marque-liste.petite{width:22px;height:22px;margin-top:3px}.marque-liste.petite svg{width:13px;height:13px}
.marque-liste.grande{width:52px;height:52px;border-radius:16px}.marque-liste.grande svg{width:28px;height:28px}
.tache.teintee{box-shadow:inset 3px 0 0 var(--lc)}
.ap-apercu{display:flex;align-items:center;gap:12px}
.ap-icones{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}.ap-icone{display:grid;place-items:center;aspect-ratio:1;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--muted);cursor:pointer}
.ap-icone.on{border-color:var(--lc);background:color-mix(in srgb,var(--lc) 18%,var(--panel2));color:var(--lc)}
.ap-couleurs{display:flex;flex-wrap:wrap;gap:8px}.ap-couleur{width:32px;height:32px;border-radius:50%;border:2px solid transparent;background:var(--lc);cursor:pointer;box-shadow:inset 0 0 0 2px var(--panel)}
.ap-couleur.on{border-color:var(--ink,#fff)}
@media (max-width:420px){.ap-icones{grid-template-columns:repeat(6,1fr)}}
/* Événement lié à une tâche (CONCEPT-38). */
.ev-lie{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}.ev-lie .txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.te-panneau{display:grid;gap:8px;padding:10px;border:1px solid var(--line);border-radius:12px}.te-liste{display:grid;gap:4px;max-height:220px;overflow:auto}
.te-ev{display:flex;align-items:center;gap:8px;padding:8px 10px;border:0;border-radius:8px;background:none;text-align:left;cursor:pointer;color:var(--text)}.te-ev:hover{background:var(--hover)}
.te-ev svg,.ev-lie svg,.ev-lie-mini svg{width:15px;height:15px;flex:none;color:var(--muted)}.te-pied{display:flex;gap:8px;flex-wrap:wrap}
.ev-lie-mini{align-self:center;display:inline-flex;align-items:center;gap:5px;max-width:45%;padding:3px 9px;border:1px solid var(--line);border-radius:999px;background:var(--panel2);font-size:11.5px;color:var(--muted);cursor:pointer}
.ev-lie-mini span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){.tache .ev-lie-mini{padding:3px 7px}.tache .ev-lie-mini span{display:none}}   /* téléphone : l'icône seule, le titre de la tâche garde sa place (garde responsive, 02/11) */
/* Bibliothèque, partage d'une liste, cloche (CONCEPT-40, maquette validée le 02/11) : fenêtres aérées, une question par écran. */
.biblio-modal{width:min(640px,100%);border-radius:22px}.biblio-modal.large{width:min(860px,100%)}
.biblio-modal .mh{display:flex;align-items:flex-start;gap:14px;padding:22px 24px 12px}.biblio-modal .mh .grow{flex:1;min-width:0}.biblio-modal .mh>.btn.icon{margin-left:auto;flex:none}.biblio-modal .mh h2{margin:0;font-size:19px;color:var(--ink)}.biblio-modal .mh p{margin:4px 0 0;color:var(--muted)}
.biblio-modal .mb{padding:6px 24px 18px;overflow:auto;display:grid;gap:14px;align-content:start}
.biblio-modal .mf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:16px 24px 22px;border-top:1px solid var(--line)}.biblio-modal .mf .grow{flex:1}
.etapes-barre{display:flex;gap:8px;padding:0 24px 12px}.etapes-barre span{flex:1;height:4px;border-radius:4px;background:var(--line)}.etapes-barre span.fait{background:var(--accent)}
.biblio-modal .q{margin:0;font-size:15px;font-weight:650;color:var(--ink)}.biblio-modal .tout{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lien-mini{border:0;background:none;color:var(--accent-texte);font-weight:600;font-size:13px;cursor:pointer}
.liste-cases{display:grid;gap:6px}.biblio-modal .case{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:14px;background:var(--panel2);cursor:pointer}
.biblio-modal .case.off{opacity:.55}.biblio-modal .case input{width:20px;height:20px;accent-color:var(--accent);flex:none}.biblio-modal .case .t{flex:1;min-width:0}
.biblio-modal .case .t b{display:block;font-weight:600;color:var(--ink)}.biblio-modal .case .t small{color:var(--muted)}.biblio-modal .rep{color:var(--accent-texte)}
.biblio-modal .jour{padding:2px 9px;border-radius:999px;background:var(--hover);color:var(--muted);font-size:11.5px;font-weight:700;white-space:nowrap}
.biblio-modal .jour.proche{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent-texte)}
.biblio-modal .phase{margin:6px 2px 0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.depart{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.depart .input{max-width:190px}
.seg-pilule{display:flex;padding:4px;gap:2px;border:1.5px solid var(--line);border-radius:999px;background:var(--panel2)}
.seg-pilule button{min-height:34px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--muted);font-size:12.5px;font-weight:600;white-space:nowrap;cursor:pointer}
.seg-pilule button.on{background:var(--accent);color:var(--accent-ink)}
.seg-pilule{max-width:100%}.seg-pilule button{flex:1 1 auto;min-width:0;padding:0 10px;overflow:hidden;text-overflow:ellipsis}   /* 3 choix tiennent sur 375 px (garde responsive, 02/11) */
.fiche{padding:14px 16px;border-radius:16px;background:var(--panel2);border:1px solid var(--line)}.fiche p{margin:0 0 6px;color:var(--text)}
.biblio-modal .mots{display:flex;flex-wrap:wrap;gap:5px}.biblio-modal .mots span{padding:2px 8px;border-radius:999px;background:var(--hover);color:var(--muted);font-size:11.5px}
.dest{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.carte-choix{display:grid;gap:10px;align-content:start;padding:16px;border:1.5px solid var(--line);border-radius:18px;background:var(--panel2);cursor:pointer}
.carte-choix.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--panel2))}.carte-choix .titre{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink)}
.carte-choix .rond{width:20px;height:20px;border-radius:50%;border:2px solid var(--muted);flex:none}.carte-choix.on .rond{border:6px solid var(--accent)}
.carte-choix .champ{display:grid;gap:6px}.carte-choix .champ span{font-size:12.5px;color:var(--muted);font-weight:600}.avec-marque{display:flex;align-items:center;gap:8px}
.resume-import{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:16px;background:color-mix(in srgb,var(--accent) 10%,var(--panel2));border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line))}
.resume-import b{color:var(--ink)}.resume-import svg{color:var(--accent-texte);flex:none}
.succes{display:grid;place-items:center;text-align:center;gap:10px;padding:20px}.succes b{font-size:16px;color:var(--ink)}
.succes .rondok{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent-texte)}.succes .rondok svg{width:32px;height:32px}
.onglets-biblio{display:flex;gap:6px;padding:0 24px 6px}.onglets-biblio button{padding:8px 14px;border:0;border-radius:999px;background:none;color:var(--muted);font-weight:600;cursor:pointer}
.onglets-biblio button.on{background:var(--hover);color:var(--ink)}.onglets-biblio .n,.n-cloche{margin-left:6px;padding:0 7px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700}
.biblio-modal .search{margin:0}.cats{display:flex;gap:6px;flex-wrap:wrap}.cats button{padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--muted);font-size:12.5px;cursor:pointer}
.cats button.on{border-color:var(--accent);color:var(--accent-texte)}
.produits{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.produit{display:grid;gap:10px;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--panel2);text-align:left;cursor:pointer;color:var(--text);transition:border-color .15s,transform .15s}
.produit:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));transform:translateY(-2px)}.produit .haut{display:flex;gap:12px;align-items:center}
.produit .haut b{display:block;font-size:15px;color:var(--ink)}.produit .haut small,.produit .court{color:var(--muted);font-size:12.5px}
.produit .reperes{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;color:var(--muted);font-size:12px}.produit .reperes b{color:var(--text)}.produit .reperes svg{width:13px;height:13px}.produit .voir{margin-left:auto;color:var(--accent-texte)}
/* .recu : une liste reçue (Catalogue › Reçus, cloche), toujours dans une fenêtre de la bibliothèque ; jamais la pastille « Reçu » d'un mail (02/11). */
.biblio-modal .recu{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--panel2)}.biblio-modal .recu .grow{flex:1;min-width:160px}
.biblio-modal .recu b{color:var(--ink)}.biblio-modal .recu small{display:block;color:var(--muted)}
.av-notif{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent-texte);font-weight:700;flex:none}
.vide-notif{display:grid;place-items:center;gap:10px;padding:26px 10px;text-align:center;color:var(--muted)}.vide-notif svg{width:34px;height:34px}
.pills{display:flex;flex-wrap:wrap;gap:8px}.pill{display:inline-flex;align-items:center;gap:8px;padding:5px 6px 5px 5px;border-radius:999px;background:var(--panel2);border:1px solid var(--line)}
.pill i,.propositions i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:12px;background:color-mix(in srgb,var(--accent) 25%,transparent);color:var(--accent-texte);flex:none}
.pill button{width:24px;height:24px;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer}.pill button:hover{background:var(--hover);color:var(--bad)}
.propositions{display:grid;gap:2px;padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}
.propositions button{display:flex;align-items:center;gap:10px;padding:8px 10px;border:0;border-radius:10px;background:none;text-align:left;cursor:pointer;color:var(--text)}.propositions button:hover{background:var(--hover)}
.propositions span{flex:1;min-width:0}.propositions small{display:block;color:var(--muted)}
.carte-lien{display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--panel2)}.carte-lien .ligne{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.carte-lien .grow{flex:1;min-width:0}
/* Rien ne dépasse de la fenêtre (02/11, iPhone : l'écran « Liste partagée » débordait à droite) : dans une grille, un enfant ne descend pas sous la
   largeur de son contenu sans minmax(0,1fr) ; l'adresse du lien, qui ne se coupe pas, élargissait la carte, centrée par l'écran de succès. */
.biblio-modal .mb,.succes,.carte-lien{grid-template-columns:minmax(0,1fr)}.succes .carte-lien{justify-self:stretch;text-align:left}
.carte-lien .ligne{min-width:0}.carte-lien .ligne .url{flex:1 1 180px}.carte-lien .ligne .btn{flex:none}
.carte-lien p{margin:2px 0 0}.url{min-width:0;padding:10px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--line);font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.interrupteur{position:relative;width:46px;height:28px;flex:none}.interrupteur input{opacity:0;position:absolute;inset:0;margin:0;cursor:pointer;z-index:1}
.interrupteur span{position:absolute;inset:0;border-radius:999px;background:var(--line);transition:.2s}.interrupteur span:after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.2s}
.interrupteur input:checked+span{background:var(--accent)}.interrupteur input:checked+span:after{left:21px;background:var(--accent-ink)}
.confirmer-inline{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px;border-radius:12px;background:var(--badbg);color:var(--bad)}.confirmer-inline p{flex:1 1 100%;margin:0}
.catalogue-btn{display:flex;align-items:center;gap:12px;width:calc(100% - 32px);margin:12px 16px 18px;padding:12px 14px;border:1.5px dashed var(--line);border-radius:14px;background:none;color:var(--text);text-align:left;cursor:pointer}
.catalogue-btn:hover{border-color:var(--accent);background:var(--hover)}.catalogue-btn .txt{flex:1;min-width:0}.catalogue-btn small{display:block;color:var(--muted)}.catalogue-btn>svg:first-child{color:var(--accent-texte)}
.tag-partagee{margin-left:auto;color:var(--accent-texte);font-size:11px}
@media (max-width:760px){.dest{grid-template-columns:1fr}.biblio-modal{border-radius:22px 22px 0 0;max-height:92vh}.rail .plus-mobile{order:1}.rail .cloche{order:2}}

/* Catalogue en cours de lecture : la place des cartes est gardée (la fenêtre ne change pas de taille quand elles arrivent). */
.produit .reperes>span{white-space:nowrap}
.produits .hint.attente{grid-column:1/-1;min-height:280px;display:grid;place-items:center;margin:0}

@container (max-width:351px){.rail a[data-vue=taches],.rail a[data-vue=contacts]{display:none}.rail .plus-mobile{display:grid}}
@container (max-width:307px){.rail a[data-vue=mail]{display:none}}
.menu-plus{display:grid;gap:2px;padding:6px}.menu-plus .item-menu.actif{background:var(--hover);font-weight:650}

/* Accueil (Housame, 02/11) : en haut « Votre récap du jour » (un nombre et « Ouvrir » par tuile, deux par ligne ; quatre sur grand écran), dessous
   « Mes tâches du jour ». L'écran tient en une page : la liste des tâches défile, pas la page (elle ne descend pas sous 240 px : au-delà, la page défile). */
.acc-ecran{height:100%;overflow:auto}
.acc-ecran>.acc{height:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:14px}
.acc-ecran .acc-tete{margin-bottom:0}
.acc-recap{flex:none;display:grid;gap:10px}
.acc-recap h3{display:flex;align-items:center;gap:8px;margin:0}.acc-recap h3 svg{width:17px;height:17px;color:var(--muted)}
.recap-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:1200px){.recap-grille{grid-template-columns:repeat(4,minmax(0,1fr))}}
.recap-tuile{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ic n g" "ic l l";align-items:center;column-gap:10px;row-gap:0;padding:8px 10px 8px 8px;border:1px solid var(--line);border-radius:14px;background:var(--panel2);min-width:0}
.recap-n{grid-area:n;font-size:22px;line-height:1.15;font-variant-numeric:tabular-nums;color:var(--ink)}.recap-tuile:not(.a-voir) .recap-n{color:var(--muted)}
.recap-gestes{grid-area:g;display:flex;gap:6px}.recap-gestes .btn{min-height:32px;padding:0 11px;font-size:12.5px}.recap-gestes .btn svg{width:16px;height:16px}
.recap-l{grid-area:l;color:var(--muted);font-size:12px;line-height:1.3;min-width:0}
.recap-tuile.a-voir{border-color:color-mix(in srgb,var(--info) 35%,var(--line))}
.acc-taches-carte{flex:1 1 0;min-height:240px;display:flex;flex-direction:column;gap:6px}
.acc-taches-carte>.acc-taches{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.acc-taches-carte>.acc-pied{flex:none}
@media (max-width:760px){.acc-ecran>.acc{padding-bottom:12px;gap:12px}.acc-ecran .acc-recap,.acc-ecran .acc-taches-carte{padding:12px}.acc-taches-carte{min-height:200px}}   /* la barre du bas est dans le flux : pas de marge en dessous */

/* Accueil, en-tête (Housame, 02/11) : « Ma carte » (un quart plus haute) et UN bouton « Nouveau » qui ouvre la liste (événement, tâche, mail,
   message, appel, visio). Sur téléphone, les deux sur une ligne. */
.acc-gestes{align-items:stretch}.acc-gestes>.btn,.acc-nouveau>.btn{min-height:45px}
@media (pointer:coarse){.acc-gestes>.btn,.acc-nouveau>.btn{min-height:55px}}
.acc-nouveau{position:relative;display:flex}.acc-nouveau>.btn{flex:1;justify-content:center}.acc-nouveau .fleche{font-size:11px;opacity:.8}
.menu-nouveau{position:absolute;right:0;top:calc(100% + 6px);min-width:200px}
.acc-tete>div:first-child{flex:none}.acc-gestes{flex:1 1 320px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.acc-gestes>.btn{justify-content:center}   /* côte à côte, toute la largeur disponible (ordinateur et téléphone) */

/* Tuiles du récap : l'icône dans un bloc carré de toute la hauteur, à la couleur de son espace (Housame, 02/11). */
.recap-ic{grid-area:ic;align-self:stretch;width:44px;min-height:44px;border-radius:10px;display:grid;place-items:center;background:var(--fi,var(--hover));color:var(--ci,var(--muted))}.recap-ic svg{width:22px;height:22px}
.recap-rdv{--fi:var(--infobg);--ci:var(--info)}.recap-mail{--fi:var(--goodbg);--ci:var(--good)}.recap-msg{--fi:var(--warnbg);--ci:var(--warn)}.recap-appel{--fi:var(--badbg);--ci:var(--bad)}.recap-pps{--fi:var(--hover);--ci:var(--ink)}
/* Le plus de place possible pour les tâches (02/11) : récap serré sur téléphone, et « plein écran » de la liste (en-tête et récap masqués). */
.acc-plein{margin-left:6px;display:none}.acc-taches-carte h3 .count+.acc-plein{margin-left:6px}
.acc-taches-carte h3 .count{margin-left:auto}.acc-taches-carte h3:not(:has(.count)) .acc-plein{margin-left:auto}
@media (max-width:760px){
  .acc-plein{display:inline-grid}
  .acc.taches-plein>.acc-tete,.acc.taches-plein>.acc-recap{display:none}
  .acc-ecran .acc-recap{gap:8px}.recap-grille{gap:8px}.recap-tuile{padding:6px 8px 6px 6px;column-gap:8px}.recap-ic{width:38px;min-height:38px}.recap-ic svg{width:19px;height:19px}
  .recap-n{font-size:19px}.recap-l{font-size:11.5px}.recap-gestes .btn{min-height:30px;padding:0 9px}
}
.acc-taches-carte>.acc-pied{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}   /* « Nouvelle tâche » et « Ouvrir les tâches » sur une ligne : une rangée de plus pour la liste */
/* Deux volets côte à côte (CONCEPT-42, volets.js) : liste à gauche (320 px au moins), détail à droite (480 px au moins), séparateur à tirer. */
.volets{flex:1;min-height:0;height:100%;display:grid;grid-template-columns:clamp(320px,var(--va,40%),calc(100% - 488px)) 8px minmax(0,1fr)}
.volet-a,.volet-b{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.volet-a{border-right:0}.volet-b{background:var(--bg)}
.separateur{position:relative;cursor:col-resize;touch-action:none;outline:none}
.separateur::after{content:"";position:absolute;top:0;bottom:0;left:3px;width:2px;background:var(--line);transition:background-color .12s}
.separateur:hover::after,.separateur:focus-visible::after,.separateur.glisse::after{left:2px;width:4px;background:var(--accent)}
.volets.glisse{user-select:none;cursor:col-resize}.volets.glisse iframe{pointer-events:none}   /* le cadre du mail ne capte pas la souris pendant qu'on tire */
.volets .retour-liste{display:none}   /* côte à côte : la liste est là, pas de Retour (D4) */
.volets .mail-item.sel{background:color-mix(in srgb,var(--accent) 12%,var(--card));box-shadow:inset 3px 0 var(--accent)}
/* Jauge d'espace de la boîte (02/11) : la pastille du domaine, remplie à proportion de l'espace utilisé ; le pourcentage ne se coupe jamais. */
#list .pastille-domaine.jauge{display:inline-flex;align-items:center;gap:5px;--cj:var(--good);background:linear-gradient(90deg,color-mix(in srgb,var(--cj) 24%,transparent) var(--p),transparent var(--p));border-color:color-mix(in srgb,var(--cj) 45%,var(--line))}
#list .pastille-domaine.jauge.haute{--cj:var(--warn)}#list .pastille-domaine.jauge.pleine{--cj:var(--bad)}
#list .pastille-domaine.jauge .dom{min-width:0;overflow:hidden;text-overflow:ellipsis}#list .pastille-domaine.jauge b{flex:none;font-weight:650;color:var(--ink)}
@media (max-width:760px){.volets{display:flex}.volets>.volet-a,.volets>.separateur{display:none}.volets>.volet-b{flex:1}}   /* sécurité : jamais deux volets sur un téléphone */
@media (max-width:760px){.acc-taches-carte>.acc-pied .btn{padding:0 8px;gap:5px;font-size:12.5px}.acc-taches-carte>.acc-pied .btn svg{width:15px;height:15px}}   /* deux par ligne sur téléphone : libellés entiers */
/* Liste des mails dans un volet (CONCEPT-42) : la place va au nom ; sous 620 px de volet, « Reçu/Envoyé » en icône seule et dossier raccourci. */
.volet-a{container-type:inline-size}
@container (max-width:620px){.mail-item .pastille-mail-sens span,.mail-item .pastille-mail-dossier span{display:none}.mail-item .pastille-mail-sens,.mail-item .pastille-mail-dossier{padding:1px 5px;flex:none}}   /* volet étroit : dossier et sens en icône seule (le nom est dans la bulle) */
/* Liste des mails (Housame, 02/11 : « éviter les retours à la ligne, masquer le texte en trop par … ») : une ligne par information. Le nom garde
   au moins 72 px (lisible) ; la pastille du dossier rétrécit d'abord (icône seule dans un volet étroit), puis le nom finit par « … ». */
.mail-item .txt{min-width:0}
.mail-item .l1{display:flex;align-items:center;gap:6px;min-width:0}
.mail-item .l1 .name{flex:1 1 auto;min-width:72px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
.mail-item .l1 .pastille-mail-dossier{flex:none}
@media (max-width:760px){.mail-item .pastille-mail-dossier span{display:none}.mail-item .pastille-mail-dossier{padding:1px 5px}}   /* téléphone : dossier en icône seule (nom dans la bulle) */.mail-item .l1 .time{flex:none;white-space:nowrap}
.mail-item .objet{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;min-width:0}
.mail-item .l2{display:flex;align-items:center;gap:6px;min-width:0}.mail-item .l2>span:first-child{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Revue du 02/11 : */
/* - une photo illisible ne montre jamais son texte de remplacement en géant (« Votre photo » débordait du rond) ; */
.av.photo img{font-size:0;color:transparent}
/* - les filtres en pilule passent à la ligne au lieu de couper « Terminées » (Tâches : 5 choix dans la bande) ; */
.seg-pilule{flex-wrap:wrap;border-radius:20px}.seg-pilule button{flex:1 0 auto;overflow:visible;text-overflow:clip}
/* - ligne de tâche étroite (colonne serrée, pas seulement le téléphone) : le rendez-vous lié en icône seule, le titre garde sa place. */
.tache{container-type:inline-size}
@container (max-width:460px){.ev-lie-mini{padding:3px 7px}.ev-lie-mini span{display:none}}
.filtres-taches.seg-taches{flex-wrap:wrap;border-radius:20px}.seg-taches button{flex:1 0 auto}   /* 5 filtres dans une bande étroite : 2 lignes plutôt que « Terminées » coupé */
@container (max-width:460px){.tache .ev-lie-mini{gap:0;max-width:none;padding:0;width:30px;height:30px;justify-content:center}}