/* public/css/cadres-avatar.css — les cadres d'avatar (lot L8). Deux rendus, posés par public/js/avatar-cadre.js : - .cadre-svg : le dessin complet (public/images/cadres-avatar.svg), sur les avatars isolés (carte, tiroir, Mon profil, messages). - .cadre-anneau : un anneau de couleur en CSS pur, dans les listes denses (tâches, membres) — zéro SVG, zéro requête. Rien en style="" inline (CSP) : la couleur de chaque cadre vit ici, par sélecteur [data-cadre="…"], jamais posée par le script. */ .avatar-cadre-hote { position: relative; display: inline-flex; flex: none; vertical-align: middle; line-height: 0; overflow: hidden; isolation: isolate; } /* Le diamètre annoncé inclut toute la décoration. Le disque reste sous l'anneau : aucun vide entre photo et cadre, aucun débordement vers le texte. */ .avatar-cadre-hote:has(> .cadre-svg, > .cadre-image) > :first-child { clip-path: circle(44% at 50% 50%); } .avatar-disque { border-radius: 50%; object-fit: cover; display: block; } /* Les modules fixent la taille de leur emplacement (responsive compris). Le disque suit cet emplacement, jamais sa taille HTML d'origine. */ .avatar-personne > .avatar-disque { width: 100%; height: 100%; min-width: 0; } .avatar-cadre-pose { width: 100%; height: 100%; } .cadre-anneau { box-sizing: border-box; } .avatar-disque-initiales .avatar-fond-initiales { fill: var(--gs-accent, #8a7a52); } .avatar-texte-initiales { fill: #fff; font-size: 16px; font-weight: 700; font-family: inherit; } /* --- Le tiroir du profil : « Cadre : … · changer » --- */ .gdh-cadre { display: block; margin-top: 2px; padding: 0; border: 0; background: none; color: var(--gs-accent, #8a7a52); font-size: 12px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; text-align: left; } /* --- Mon profil : le grand avatar et les vignettes de la grille --- */ .gprof-avatar-grand { display: flex; justify-content: center; margin: 2px 0 8px; } .mp-cadre-vignette { display: block; margin-bottom: 2px; } .mp-cadre-vignette .avatar-cadre-hote { pointer-events: none; } /* --- le dessin complet, autour d'un avatar isolé --- */ .cadre-svg, .cadre-image { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; object-fit: contain; } /* Le halo derrière chaque motif (.cadre-halo, dans le sprite) n'a pas de fill="" : il hérite de celui posé ici sur . Quand le hub réduit l'image à l'intérieur (bande mobile des conversations : `img { width: 34px !important }`), ce fond dépassait en anneau gris autour de chaque photo (signalé par Thierry le 10 octobre 2026 au soir). L'hôte n'a JAMAIS de fond propre : c'est le disque qui en a un. Classe doublée = plus précise que la classe du hub, sans !important. --- */ .avatar-cadre-hote.avatar-cadre-hote { background: none; } @media (max-width: 860px) { .chat-strip-item .avatar-cadre-hote.chat-avatar { width: 34px; height: 34px; } } /* --- Vérification complète du 14 octobre 2026 (Thierry : « plein d'endroits où le cadre ne s'affiche pas bien »). Les images sont propres (rien hors du cercle inscrit) ; les défauts viennent des classes du hub que l'hôte ou son conteneur reprennent, prévues pour une photo qui remplit un disque. Un cadre est transparent entre ses motifs et la photo recule à 88 % : tout ce qui se dessine entre les deux apparaît en bord. Trois cas : 1. l'élément habillé par poserCadre garde son liseré (.ua du rail et du tiroir) ou n'a pas de taille (le T de l'en-tête : la lettre disparaissait, rognée par le clip-path d'une boîte de 8 px) ; 2. l'hôte lui-même porte un liseré ou une ombre (salle d'appel, Gestion des utilisateurs) ; 3. le conteneur autour de l'hôte est un disque dessiné : bouton de l'en-tête universel (signalé le 13 octobre), bulle du quai, carte « Mon profil » (fond beige + liseré de 64 px). Règle : dès qu'un cadre est posé, rien ne se dessine entre la photo et le cadre. Sans cadre, aucune de ces règles ne s'applique : les dessins du hub restent exactement ce qu'ils étaient. Vérifié sur les 30 emplacements avec les vraies feuilles de style (banc /tmp/banc-cadres). --- */ /* 1. L'élément habillé remplit son hôte (pas une : sa taille CSS est celle du hub, et un 100 % cyclique la ferait sauter à sa taille native). */ .avatar-cadre-pose.avatar-cadre-pose > :first-child:not(img) { display: grid; place-items: center; width: 100%; height: 100%; box-sizing: border-box; line-height: 1; } .avatar-cadre-pose:has(> .cadre-image, > .cadre-svg) > :first-child { border-color: transparent; box-shadow: none; } /* 2. L'hôte : plus de liseré ni d'ombre sous un cadre (la boîte ne bouge pas : la couleur du liseré s'efface, pas le liseré). */ .avatar-cadre-hote.avatar-cadre-hote:has(> .cadre-image, > .cadre-svg) { border-color: transparent; box-shadow: none; padding: 0; } /* 3. Les conteneurs-disques. !important : la bande d'Aujourd'hui repeint le bouton de l'en-tête avec un sélecteur bien plus lourd (body.shell-on:has(#today-view) …). */ .gshell-head-avatar:has(.cadre-image, .cadre-svg), .gshell-head-avatar:has(.cadre-image, .cadre-svg):hover, .gq-bulle:has(.cadre-image, .cadre-svg), .gcall-avatar:has(.cadre-image, .cadre-svg), .gprof-av:has(.cadre-image, .cadre-svg) { padding: 0 !important; border-color: transparent !important; background: none !important; box-shadow: none !important; } /* 4. L'hôte SANS boîte intermédiaire : poserCadre() enveloppe toujours l'élément dans une rangée flexible pré-dimensionnée au shell (rail, en-tête, tiroir — le nouvel hôte hérite déjà du 28/36/40 px de ce conteneur). La photo de Gestion des utilisateurs › Paramètres vit, elle, à même une grande rangée flex (.settings-user-header) : sans taille à elle, .avatar-cadre-pose (width/height: 100 %, règle générale plus haut) étire l'hôte à TOUTE la largeur de la rangée. Constaté le 22/10/2026 au banc de vérification du lot H1 : hôte à 500 px au lieu de 56, le cadre flottant loin de la photo. */ .settings-user-header .avatar-cadre-hote { width: 56px; height: 56px; flex: none; }