/* optionnels/synchro-supabase/profil.css — avatar et menu du profil, pastilles de présence, « Mon profil », fiche d'un membre
   Module optionnel : <link data-module> d'index.html, chargé juste avant interface/surcharges.css (retiré sans le module).
   --profil-couleur : couleur du membre ; .a-smiley : l'avatar est un smiley (fond teinté) et non une initiale (fond plein). */
 .profil-pastille,.profil-avatar,.presence-dot,.lock-badge{font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;}
 .profil-pastille,.profil-avatar{
 display:inline-flex; align-items:center; justify-content:center; flex:none; border-radius:50%; box-sizing:border-box;
 width:round(calc(22px * var(--ui-scale-factor)),1px); height:round(calc(22px * var(--ui-scale-factor)),1px);
 background:var(--profil-couleur,#7d8799); color:#fff; font-weight:700; font-size:calc(10px * var(--ui-scale-factor)); line-height:1;
 text-shadow:0 0 calc(2px * var(--ui-scale-factor)) rgba(0,0,0,.35); user-select:none;
 }
 .profil-pastille.a-smiley,.profil-avatar.a-smiley,.presence-dot.a-smiley{background:color-mix(in srgb,var(--profil-couleur,#7d8799) 30%,var(--surface-2)); box-shadow:inset 0 0 0 var(--anneau) var(--profil-couleur,#7d8799); text-shadow:none; font-size:calc(12.5px * var(--ui-scale-factor));}

 /* ---- Avatar de la barre et son menu ---- */
 .profil-wrap{margin-left:calc(2px * var(--ui-scale-factor));}
 .profil-btn{
 position:relative; display:flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer;
 width:round(calc(27px * var(--ui-scale-factor)),1px); height:round(calc(27px * var(--ui-scale-factor)),1px);
 transition:transform .15s ease;
 }
 /* Avatar plus petit de 2 px que le bouton (tailles entières) : il reste exactement centré, Firefox compris. */
 .profil-btn .profil-avatar{width:calc(round(calc(27px * var(--ui-scale-factor)),1px) - 2px); height:calc(round(calc(27px * var(--ui-scale-factor)),1px) - 2px); box-shadow:0 0 0 1px var(--surface),0 0 0 max(1px,round(calc(2.25px * var(--ui-scale-factor)),1px)) var(--border); transition:box-shadow .15s ease;}
 .profil-btn .profil-avatar.a-smiley{box-shadow:inset 0 0 0 var(--anneau) var(--profil-couleur),0 0 0 1px var(--surface),0 0 0 max(1px,round(calc(2.25px * var(--ui-scale-factor)),1px)) var(--border); font-size:calc(14px * var(--ui-scale-factor));}
 .profil-btn .profil-avatar:empty{background:var(--surface-3);}
 .profil-btn:hover{transform:translateY(-1px);}
 .profil-btn:hover .profil-avatar,.profil-btn[aria-expanded="true"] .profil-avatar{box-shadow:0 0 0 1px var(--surface),0 0 0 max(1px,round(calc(2.25px * var(--ui-scale-factor)),1px)) var(--accent);}
 .profil-btn:focus-visible{outline:calc(2px * var(--ui-scale-factor)) solid color-mix(in srgb,var(--accent) 70%,transparent); outline-offset:calc(2px * var(--ui-scale-factor));}
 .profil-btn .cloud-account-dot{position:absolute; right:-1px; bottom:-1px; width:round(calc(7.5px * var(--ui-scale-factor)),1px); height:round(calc(7.5px * var(--ui-scale-factor)),1px); box-shadow:0 0 0 round(calc(1.5px * var(--ui-scale-factor)),1px) var(--surface);}
 .profil-menu{min-width:calc(236px * var(--ui-scale-factor));}
 .profil-menu-tete{display:flex; align-items:center; gap:calc(9px * var(--ui-scale-factor)); padding:calc(7px * var(--ui-scale-factor)) calc(8px * var(--ui-scale-factor)) calc(5px * var(--ui-scale-factor));}
 .profil-pastille-grande{width:calc(36px * var(--ui-scale-factor)); height:calc(36px * var(--ui-scale-factor)); font-size:calc(15px * var(--ui-scale-factor));}
 .profil-pastille-grande.a-smiley{font-size:calc(20px * var(--ui-scale-factor));}
 .profil-menu-texte{display:flex; flex-direction:column; gap:calc(2px * var(--ui-scale-factor)); min-width:0;}
 .profil-menu-texte strong{font-size:calc(11.5px * var(--ui-scale-factor)); color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
 .profil-menu-texte span{font-size:calc(9.5px * var(--ui-scale-factor)); color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
 .profil-menu-texte em{font-style:normal; font-size:calc(8.5px * var(--ui-scale-factor)); color:var(--text-faint);}
 .topbar-menu-item .cloud-account-dot{margin-left:auto;}
 .topbar-menu-item.auth-logout-btn{color:#ff8b82;}
 .topbar-menu-item.auth-logout-btn .tb-icone{color:currentColor;}
 .topbar-menu-item.auth-logout-btn:hover,.topbar-menu-item.auth-logout-btn:focus-visible{background:rgba(217,88,79,.12);}

 /* ---- Pastilles de présence (après le zoom du tableau) : un clic ouvre la fiche du membre ---- */
 .presence-bar{display:flex; align-items:center;}
 .presence-bar[hidden]{display:none;}
 .presence-dot{
 display:inline-flex; align-items:center; justify-content:center; flex:none; padding:0; border:0; border-radius:50%; cursor:pointer; position:relative;
 width:round(calc(21px * var(--ui-scale-factor)),1px); height:round(calc(21px * var(--ui-scale-factor)),1px); margin-left:calc(-5px * var(--ui-scale-factor));
 background:var(--profil-couleur,#7d8799); color:#fff; font-weight:700; font-size:calc(9.5px * var(--ui-scale-factor)); line-height:1; text-shadow:0 0 calc(2px * var(--ui-scale-factor)) rgba(0,0,0,.4);
 box-shadow:0 0 0 round(calc(2px * var(--ui-scale-factor)),1px) var(--surface); transition:transform .15s ease,margin .15s ease;
 }
 .presence-dot.a-smiley{box-shadow:inset 0 0 0 var(--anneau) var(--profil-couleur),0 0 0 round(calc(2px * var(--ui-scale-factor)),1px) var(--surface); font-size:calc(11.5px * var(--ui-scale-factor));}
 .presence-dot:first-child{margin-left:0;}
 .presence-dot:hover,.presence-dot:focus-visible{transform:translateY(calc(-1.5px * var(--ui-scale-factor))); z-index:1; outline:none;}
 .presence-dot.is-me{opacity:.55;}
 .presence-dot.is-me:hover{opacity:1;}
 .presence-bar:hover .presence-dot{margin-left:calc(2px * var(--ui-scale-factor));}
 .presence-bar:hover .presence-dot:first-child{margin-left:0;}

 /* ---- Fenêtres « Mon profil » et fiche d'un membre ---- */
 .profil-modal{width:min(calc(400px * var(--ui-scale-factor)),94vw);}
 .profil-modal .modal-body{gap:calc(12px * var(--ui-scale-factor));}
 .profil-apercu{display:flex; align-items:center; gap:calc(10px * var(--ui-scale-factor)); padding:calc(10px * var(--ui-scale-factor)); border-radius:calc(9px * var(--ui-scale-factor)); background:var(--surface-2); border:calc(1px * var(--ui-scale-factor)) solid var(--border-soft);}
 .profil-apercu > div{display:flex; flex-direction:column; gap:calc(2px * var(--ui-scale-factor)); min-width:0;}
 .profil-apercu strong{font-size:calc(13px * var(--ui-scale-factor)); color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
 .profil-apercu span:not(.profil-apercu-pastille){font-size:calc(9px * var(--ui-scale-factor)); color:var(--text-faint);}
 .profil-apercu-pastille{
 display:inline-flex; align-items:center; justify-content:center; flex:none; border-radius:50%;
 width:round(calc(44px * var(--ui-scale-factor)),1px); height:round(calc(44px * var(--ui-scale-factor)),1px); background:var(--profil-couleur); color:#fff;
 font:700 calc(19px * var(--ui-scale-factor))/1 system-ui,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; transition:background .15s ease;
 }
 .profil-apercu-pastille.a-smiley{background:color-mix(in srgb,var(--profil-couleur) 30%,var(--surface-3)); box-shadow:inset 0 0 0 max(1px,round(calc(2px * var(--ui-scale-factor)),1px)) var(--profil-couleur); font-size:calc(24px * var(--ui-scale-factor));}
 .profil-champ{display:flex; flex-direction:column; gap:calc(5px * var(--ui-scale-factor)); margin:0;}
 .profil-champ > span{font-size:calc(9px * var(--ui-scale-factor)); font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint);}
 .profil-champ input{width:100%; box-sizing:border-box; background:var(--surface-3); border:calc(1px * var(--ui-scale-factor)) solid var(--border); border-radius:calc(6px * var(--ui-scale-factor)); color:var(--text); font:inherit; font-size:calc(11px * var(--ui-scale-factor)); padding:calc(6.5px * var(--ui-scale-factor)) calc(8px * var(--ui-scale-factor));}
 .profil-champ input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 calc(2px * var(--ui-scale-factor)) color-mix(in srgb,var(--accent) 22%,transparent);}
 /* Familles de smileys : une rangée de puces, la grille n'affiche que la famille choisie (28 smileys + l'initiale : trois rangées). */
 .profil-familles{display:flex; gap:calc(3px * var(--ui-scale-factor)); overflow-x:auto; scrollbar-width:none;}
 .profil-famille{
 flex:none; padding:calc(3.5px * var(--ui-scale-factor)) calc(6.5px * var(--ui-scale-factor)); border:round(calc(1px * var(--ui-scale-factor)),1px) solid var(--border-soft); border-radius:999px;
 background:transparent; color:var(--text-dim); font:600 calc(9px * var(--ui-scale-factor))/1.2 system-ui; cursor:pointer; transition:background .12s ease,color .12s ease,border-color .12s ease;
 }
 .profil-famille:hover{color:var(--text); border-color:var(--text-faint);}
 .profil-famille[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 18%,var(--surface-2)); border-color:var(--accent); color:var(--text);}
 .profil-famille:focus-visible{outline:calc(2px * var(--ui-scale-factor)) solid var(--accent); outline-offset:calc(1px * var(--ui-scale-factor));}
 .profil-tuile[hidden]{display:none;}
 /* Tuiles de taille fixe au pixel entier (une colonne en 1fr les rendait fractionnaires : pastille-lettre décentrée), la place restante va entre elles. */
 .profil-tuiles{display:grid; grid-template-columns:repeat(auto-fill,round(calc(27px * var(--ui-scale-factor)),1px)); justify-content:space-between; gap:round(calc(4px * var(--ui-scale-factor)),1px);}
 .profil-tuile{
 aspect-ratio:1; display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer;
 border:calc(1px * var(--ui-scale-factor)) solid var(--border-soft); border-radius:calc(7px * var(--ui-scale-factor)); background:var(--surface-2);
 font:calc(15px * var(--ui-scale-factor))/1 system-ui,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; transition:transform .12s ease,border-color .12s ease,background .12s ease;
 }
 .profil-tuile:hover{transform:scale(1.08); border-color:var(--text-faint);}
 .profil-tuile.active{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 18%,var(--surface-2)); box-shadow:0 0 0 var(--anneau) var(--accent);}
 .profil-tuile:focus-visible{outline:calc(2px * var(--ui-scale-factor)) solid var(--accent); outline-offset:calc(1px * var(--ui-scale-factor));}
 .profil-tuile-lettre{color:#fff; font:700 calc(12px * var(--ui-scale-factor))/1 system-ui; background:var(--profil-couleur,#7d8799); border-radius:50%;}
 .profil-tuile-lettre.active{background:var(--profil-couleur,#7d8799);}
 .profil-couleurs{display:flex; flex-wrap:wrap; gap:calc(6px * var(--ui-scale-factor));}
 .profil-couleur{width:round(calc(20px * var(--ui-scale-factor)),1px); height:round(calc(20px * var(--ui-scale-factor)),1px); padding:0; border:0; border-radius:50%; background:var(--profil-couleur); cursor:pointer; transition:transform .12s ease,box-shadow .12s ease;}
 .profil-couleur:hover{transform:scale(1.12);}
 /* Anneau de la couleur choisie en pixels entiers (3,5 px à 75 % : Firefox le dessinait décalé). */
 .profil-couleur.active{box-shadow:0 0 0 max(1px,round(calc(2px * var(--ui-scale-factor)),1px)) var(--surface),0 0 0 calc(max(1px,round(calc(2px * var(--ui-scale-factor)),1px)) + var(--anneau)) var(--profil-couleur);}
 .profil-couleur:focus-visible{outline:calc(2px * var(--ui-scale-factor)) solid var(--text); outline-offset:calc(3px * var(--ui-scale-factor));}
 .profil-interrupteur{display:flex; align-items:center; gap:calc(9px * var(--ui-scale-factor)); cursor:pointer; padding:calc(8px * var(--ui-scale-factor)) calc(9px * var(--ui-scale-factor)); border-radius:calc(8px * var(--ui-scale-factor)); border:calc(1px * var(--ui-scale-factor)) solid var(--border-soft); background:var(--surface-2);}
 .profil-interrupteur input{position:absolute; opacity:0; width:1px; height:1px;}
 .profil-interrupteur-piste{position:relative; flex:none; width:calc(28px * var(--ui-scale-factor)); height:calc(16px * var(--ui-scale-factor)); border-radius:calc(8px * var(--ui-scale-factor)); background:var(--surface-3); border:calc(1px * var(--ui-scale-factor)) solid var(--border); transition:background .15s ease,border-color .15s ease;}
 .profil-interrupteur-piste::after{content:""; position:absolute; top:calc(1.5px * var(--ui-scale-factor)); left:calc(1.5px * var(--ui-scale-factor)); width:round(calc(11px * var(--ui-scale-factor)),1px); height:round(calc(11px * var(--ui-scale-factor)),1px); border-radius:50%; background:var(--text-dim); transition:transform .15s ease,background .15s ease;}
 .profil-interrupteur input:checked + .profil-interrupteur-piste{background:var(--accent); border-color:var(--accent);}
 .profil-interrupteur input:checked + .profil-interrupteur-piste::after{transform:translateX(calc(12px * var(--ui-scale-factor))); background:#fff;}
 .profil-interrupteur input:focus-visible + .profil-interrupteur-piste{outline:calc(2px * var(--ui-scale-factor)) solid color-mix(in srgb,var(--accent) 70%,transparent); outline-offset:calc(2px * var(--ui-scale-factor));}
 .profil-interrupteur-texte{display:flex; flex-direction:column; gap:calc(2px * var(--ui-scale-factor)); min-width:0;}
 .profil-interrupteur-texte strong{font-size:calc(10.5px * var(--ui-scale-factor)); color:var(--text);}
 .profil-interrupteur-texte span{font-size:calc(9px * var(--ui-scale-factor)); color:var(--text-faint); overflow-wrap:anywhere;}
 .profil-message{font-size:calc(9.5px * var(--ui-scale-factor)); line-height:1.45; color:var(--text-dim); padding:calc(7px * var(--ui-scale-factor)) calc(9px * var(--ui-scale-factor)); border-radius:calc(6px * var(--ui-scale-factor)); background:rgba(227,177,85,.08); border:calc(1px * var(--ui-scale-factor)) solid rgba(227,177,85,.35);}
 .profil-message.erreur{color:#f1b1ac; background:rgba(217,88,79,.08); border-color:rgba(217,88,79,.5);}
 .profil-message[hidden]{display:none;}
 .profil-actions{display:flex; gap:calc(6px * var(--ui-scale-factor));}
 /* Fiche d'un membre */
 .profil-fiche{width:min(calc(300px * var(--ui-scale-factor)),94vw);}
 .profil-fiche .modal-body{align-items:center; text-align:center; gap:calc(8px * var(--ui-scale-factor)); padding-top:calc(16px * var(--ui-scale-factor));}
 .profil-pastille-fiche{width:calc(64px * var(--ui-scale-factor)); height:calc(64px * var(--ui-scale-factor)); font-size:calc(26px * var(--ui-scale-factor)); box-shadow:0 calc(6px * var(--ui-scale-factor)) calc(18px * var(--ui-scale-factor)) rgba(0,0,0,.35);}
 .profil-pastille-fiche.a-smiley{font-size:calc(34px * var(--ui-scale-factor)); box-shadow:inset 0 0 0 max(1px,round(calc(2px * var(--ui-scale-factor)),1px)) var(--profil-couleur),0 calc(6px * var(--ui-scale-factor)) calc(18px * var(--ui-scale-factor)) rgba(0,0,0,.35);}
 .profil-fiche-nom{margin:calc(2px * var(--ui-scale-factor)) 0 0; font-size:calc(15px * var(--ui-scale-factor)); color:var(--text); overflow-wrap:anywhere;}
 .profil-fiche-etiquettes{display:flex; flex-wrap:wrap; justify-content:center; gap:calc(4px * var(--ui-scale-factor));}
 .profil-fiche-etiquettes:empty{display:none;}
 .profil-fiche-etat{font-size:calc(8.5px * var(--ui-scale-factor)); font-weight:700; color:var(--text-dim); padding:calc(2.5px * var(--ui-scale-factor)) calc(7px * var(--ui-scale-factor)); border-radius:calc(99px * var(--ui-scale-factor)); background:var(--surface-2); border:calc(1px * var(--ui-scale-factor)) solid var(--border-soft);}
 .profil-fiche-etat.en-ligne{color:#64d98b; border-color:rgba(100,217,139,.4); background:rgba(100,217,139,.08);}
 .profil-fiche-ligne{display:flex; align-items:center; justify-content:space-between; gap:calc(10px * var(--ui-scale-factor)); width:100%; box-sizing:border-box; margin-top:calc(6px * var(--ui-scale-factor)); padding:calc(8px * var(--ui-scale-factor)) calc(10px * var(--ui-scale-factor)); border-radius:calc(7px * var(--ui-scale-factor)); background:var(--surface-2); font-size:calc(10px * var(--ui-scale-factor));}
 .profil-fiche-ligne > span{color:var(--text-faint); font-weight:700;}
 .profil-fiche-ligne a{color:var(--accent); overflow-wrap:anywhere; text-align:right;}
 .profil-fiche-ligne em{color:var(--text-faint);}
 /* Fenêtre Membres : avatar et nom cliquables */
 .members-person{display:flex; align-items:center; gap:calc(7px * var(--ui-scale-factor)); flex:1; min-width:0; padding:calc(3px * var(--ui-scale-factor)) calc(4px * var(--ui-scale-factor)); margin:0 calc(-4px * var(--ui-scale-factor)); border:0; border-radius:calc(6px * var(--ui-scale-factor)); background:transparent; color:var(--text); font:inherit; text-align:left; cursor:pointer;}
 .members-person:hover,.members-person:focus-visible{background:var(--surface-2); outline:none;}
 .members-avatar{position:relative;}
 .members-avatar.en-ligne::after{content:""; position:absolute; right:-1px; bottom:-1px; width:round(calc(7px * var(--ui-scale-factor)),1px); height:round(calc(7px * var(--ui-scale-factor)),1px); border-radius:50%; background:#64d98b; box-shadow:0 0 0 var(--anneau) var(--surface);}