/* 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 <svg class="cadre-svg"> — un
   sélecteur de classe ne traverserait PAS la frontière d'un <use href="fichier
   externe#id"> (Chrome n'applique pas les feuilles de style de CE document au
   contenu d'un AUTRE fichier SVG référencé), mais l'HÉRITAGE CSS normal des
   propriétés comme `fill`, lui, traverse cette frontière (c'est la technique
   standard des sprites d'icônes en currentColor). */
.cadre-svg { fill: #fff; }
body[data-gtheme="dark"] .cadre-svg { fill: #1c1c1e; }
.cadre-anneau-trait { stroke-linecap: round; }

/* --- l'anneau CSS, dans les listes denses (≥ 28 px, < le seuil SVG) --- */
.cadre-anneau {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2.5px solid var(--cadre-c, transparent);
    pointer-events: none;
}
@media (min-resolution: 1.5dppx) { .cadre-anneau { border-width: 2px; } }

/* --- le compteur de « Coup de chapeau » (dynamique, posé en HTML, pas en SVG) --- */
.cadre-compteur {
    position: absolute;
    right: 2px;
    bottom: 2px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 7px;
    background: #7B4FA6;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    box-shadow: 0 0 0 1.5px #fff;
}
body[data-gtheme="dark"] .cadre-compteur { box-shadow: 0 0 0 1.5px #1c1c1e; }

/* --- la couleur de chaque cadre (anneau CSS ET glyphes « currentColor ») --- */
[data-cadre="chanv"]              { --cadre-c: #DDCBA4; }
[data-cadre="bleuh"]              { --cadre-c: #92C0E9; }
[data-cadre="maison-d-herbes"]    { --cadre-c: #7A4C1F; }
[data-cadre="citrouilles"]        { --cadre-c: #E07B1B; }
[data-cadre="guirlande"]          { --cadre-c: #1E5E3A; }
[data-cadre="feu-d-artifice"]     { --cadre-c: #1A2A52; }
[data-cadre="coeurs"]             { --cadre-c: #E05C8A; }
[data-cadre="erable"]             { --cadre-c: #B5702E; }
[data-cadre="oeufs"]              { --cadre-c: #C9A6E0; }
[data-cadre="bourgeons"]          { --cadre-c: #6FAF6B; }
[data-cadre="fleur-de-lys"]       { --cadre-c: #2D6CDF; }
[data-cadre="soleil"]             { --cadre-c: #F2B705; }
[data-cadre="feuilles-d-automne"] { --cadre-c: #A0522D; }
[data-cadre="c-est-ma-fete"]      { --cadre-c: #E05C8A; }
[data-cadre="diplome-gandalf-academy"] { --cadre-c: #D4AF37; }
[data-cadre="sans-filet"]         { --cadre-c: #B8BEC6; }
[data-cadre="nouveau-ici"]        { --cadre-c: #2FB3A3; }
[data-cadre="1-an"]               { --cadre-c: #B08040; }
[data-cadre="5-ans"]              { --cadre-c: #B8BEC6; }
[data-cadre="10-ans"]             { --cadre-c: #D4AF37; }
[data-cadre="coup-de-chapeau"]    { --cadre-c: #7B4FA6; }

/* --- la grille « Mes cadres » de Mon profil --- */
.mp-cadres-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-top: 10px; }
.mp-cadre-carte { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 12px; border: 1px solid var(--gs-line, #e4e0d8); background: var(--gs-panel, #fff); cursor: pointer; text-align: center; }
.mp-cadre-carte.mp-cadre-aucun { cursor: pointer; }
.mp-cadre-carte[data-porte="1"] { border-color: var(--cadre-c, #C9A227); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cadre-c, #C9A227) 35%, transparent); }
.mp-cadre-carte[data-verrouille="1"] { opacity: .5; cursor: default; filter: grayscale(.6); }
.mp-cadre-carte .mp-cadre-nom { font-size: 12px; font-weight: 600; }
.mp-cadre-carte .mp-cadre-condition { font-size: 11px; color: var(--gs-ink-dim, #6b6457); }
.mp-cadre-carte .mp-cadre-coche { font-size: 11px; color: #2e7d32; font-weight: 700; }
body[data-gtheme="dark"] .mp-cadre-carte { background: var(--gs-panel, #2a2a2c); border-color: var(--gs-line, #3a3a3c); }

.avatar-crm-groupe { width: 100%; height: 100%; }

/* --- L'hôte porte la classe du hub (.chat-avatar, .chat-msg-avatar,
   .ucard-photo, .chat-user-photo…) : il en hérite la taille et le FOND
   prévus pour une <img>. 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; }
}