/* interface/etiquettes.css — dessin des étiquettes (atelier d'étiquettes, 08/10)
   Une étiquette porte les classes « etq etq--<style> » (et « etq-neutre » pour les styles à fond gris), les variables
   --e-… posées par noyau/etiquettes.js (variablesEtiquette) et l'intérieur écrit par interieurEtiquetteHtml.
   Toutes les tailles suivent --etq-taille (taille du texte) : la même étiquette sert sur les cartes, dans la barre
   Filtrer, dans la fenêtre Étiquettes et sur la page publique. Chargé après telephone.css : à spécificité égale, il
   l'emporte sur les puces (.chip) ; les règles du téléphone qui visent #boardRow restent plus fortes. */
.etq{
 display:inline-flex; align-items:center; gap:.48em; box-sizing:border-box; max-width:100%; min-width:0; min-height:2.08em;
 padding:.32em .88em; border:0; border-radius:.56em; background:var(--e-c,var(--surface-3)); color:var(--e-fg,var(--text));
 font:650 var(--etq-taille,12.5px)/1.2 system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; letter-spacing:normal; text-transform:none;
 white-space:nowrap; vertical-align:middle; position:relative; text-shadow:none;
}
.etq-texte{overflow:hidden; text-overflow:ellipsis; min-width:0;}
.etq-icone{width:1.12em; height:1.12em; flex:none; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.etq-point{width:round(.64em,1px); height:round(.64em,1px); border-radius:50%; background:var(--e-fort); flex:none;}
.etq-anneau{width:round(.8em,1px); height:round(.8em,1px); box-sizing:border-box; border-radius:50%; border:2px solid var(--e-fort); flex:none;}
.etq-pastille,.etq-rond{width:round(1.6em,1px); height:round(1.6em,1px); border-radius:50%; background:var(--e-fort); color:var(--e-fort-fg); display:grid; place-items:center; flex:none; margin-left:-.56em;}
.etq-pastille .etq-icone,.etq-rond .etq-icone{width:.96em; height:.96em; stroke-width:2.6;}
.etq-bloc,.etq-carre{align-self:stretch; display:grid; place-items:center; flex:none; margin:-.32em 0 -.32em -.88em;}
.etq-bloc{padding:0 .56em; background:var(--e-bas);}
.etq-bloc .etq-point{background:var(--e-fg);}
.etq-carre{width:2.08em; background:var(--e-fort); color:var(--e-fort-fg);}
.etq-carre .etq-icone{width:1.04em; height:1.04em;}
.etq-trou{width:round(.48em,1px); height:round(.48em,1px); border-radius:50%; background:var(--etq-fond-carte,var(--surface-2)); flex:none; box-shadow:inset 0 1px 1px rgba(0,0,0,.4);}
.etq.etq-neutre{background:var(--surface-3); color:var(--text); box-shadow:inset 0 0 0 1px var(--border);}
.etq.etq-neutre > .etq-icone{color:var(--e-ink);}

/* Plein */
.etq--pilule{border-radius:999px; padding-inline:.96em;}
.etq--net{border-radius:.24em; font-weight:700;}
.etq--degrade{border-radius:999px; padding-inline:.96em; background:linear-gradient(115deg,var(--e-haut),var(--e-c) 55%,var(--e-bas));}
.etq--relief{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 var(--e-bas),0 4px 10px -2px rgba(0,0,0,.5);}
.etq--angle{border-radius:0; padding-inline:1.2em; clip-path:polygon(.56em 0,100% 0,calc(100% - .56em) 100%,0 100%);}
.etq--fleche{border-radius:.4em 0 0 .4em; padding:.32em 1.52em .32em .8em; clip-path:polygon(0 0,calc(100% - .8em) 0,100% 50%,calc(100% - .8em) 100%,0 100%);}
.etq--duo{overflow:hidden;}
/* Pastel */
.etq--pastel-pilule{border-radius:999px; padding-inline:.96em;}
.etq--pale{border-radius:.72em;}
.etq--pastel-lisere{border-radius:999px; box-shadow:inset 0 0 0 1.5px var(--e-bord);}
.etq--pastel-point{border-radius:999px; padding-inline:.8em .96em;}
.etq--pastel-bande{border-radius:.32em .72em .72em .32em; box-shadow:inset .32em 0 0 var(--e-fort); padding-left:1.04em;}
.etq--pastel-bulle{border-radius:1.04em 1.04em 1.04em .32em;}
/* Contour */
.etq:is(.etq--contour,.etq--contour-net,.etq--contour-epais,.etq--pointille,.etq--double-trait){background:transparent; color:var(--e-ink); box-shadow:inset 0 0 0 1.5px var(--e-c);}
.etq--contour{border-radius:999px;}
.etq--contour-net{border-radius:.32em;}
.etq.etq--contour-epais{border-radius:.72em; box-shadow:inset 0 0 0 2.5px var(--e-c); font-weight:750;}
.etq.etq--pointille{border-radius:999px; box-shadow:none; border:1.5px dashed var(--e-c); padding-block:.2em;}
.etq.etq--double-trait{border-radius:999px; box-shadow:inset 0 0 0 1.5px var(--e-c),0 0 0 2px var(--etq-fond-carte,var(--surface-2)),0 0 0 3.5px var(--e-trait); margin:.24em;}
/* Teinté */
.etq:is(.etq--teinte,.etq--verre,.etq--teinte-barre,.etq--halo,.etq--soulignee){background:var(--e-doux); color:var(--e-ink);}
.etq--teinte{border-radius:999px;}
.etq.etq--verre{border-radius:.8em; background:linear-gradient(180deg,var(--e-doux2),var(--e-doux)); box-shadow:inset 0 0 0 1px var(--e-trait),inset 0 1px 0 rgba(255,255,255,.15);}
.etq--teinte-barre{border-radius:.24em .64em .64em .24em; box-shadow:inset 3px 0 0 var(--e-c); padding-left:.96em;}
.etq--halo{border-radius:999px; box-shadow:inset 0 0 0 1px var(--e-trait),0 0 14px -2px var(--e-lueur);}
.etq--soulignee{border-radius:.48em .48em .16em .16em; box-shadow:inset 0 -2px 0 var(--e-c);}
/* Repère (fond gris, la couleur en repère) */
.etq--point{border-radius:999px; padding-inline:.8em .96em;}
.etq--pastille{border-radius:999px; padding:.24em .96em .24em .88em;}
.etq.etq--barre-laterale{border-radius:.56em; box-shadow:inset 0 0 0 1px var(--border),inset 4px 0 0 var(--e-c); padding-left:1.04em;}
.etq.etq--socle{border-radius:.56em .56em .24em .24em; box-shadow:inset 0 0 0 1px var(--border),inset 0 -3px 0 var(--e-c);}
.etq.etq--coin{border-radius:.56em; background:linear-gradient(135deg,var(--e-c) 0 .8em,var(--surface-3) .8em); padding-left:1.04em;}
.etq--anneau{border-radius:.64em; padding-inline:.72em .96em;}
/* Sombre */
.etq--sombre{border-radius:999px; padding-inline:.96em;}
.etq--encre{box-shadow:inset 0 0 0 1px var(--e-trait2);}
.etq.etq--neon{border-radius:999px; background:#0d1016; color:var(--e-neon); box-shadow:inset 0 0 0 1px var(--e-fort),0 0 10px -1px var(--e-lueur),inset 0 0 8px -2px var(--e-lueur); text-shadow:0 0 7px var(--e-lueur);}
.etq--velours{border-radius:.72em; background:linear-gradient(140deg,var(--e-haut),var(--e-c) 45%,var(--e-fond)); box-shadow:inset 0 1px 0 rgba(255,255,255,.12);}
/* Forme */
.etq--bulle{border-radius:1.04em 1.04em 1.04em .24em;}
.etq--etiquette{border-radius:0 .56em .56em 0; padding-left:1.04em; clip-path:polygon(.8em 0,100% 0,100% 100%,.8em 100%,0 50%);}
.etq--ticket{border-radius:.4em; padding-inline:1.12em;
 -webkit-mask:radial-gradient(circle .36em at 0 50%,transparent 96%,#000) left/51% 100% no-repeat,radial-gradient(circle .36em at 100% 50%,transparent 96%,#000) right/51% 100% no-repeat;
 mask:radial-gradient(circle .36em at 0 50%,transparent 96%,#000) left/51% 100% no-repeat,radial-gradient(circle .36em at 100% 50%,transparent 96%,#000) right/51% 100% no-repeat;}
.etq--onglet{border-radius:.88em .88em .16em .16em; padding-top:.4em;}
.etq--hexagone{border-radius:0; padding-inline:1.2em; clip-path:polygon(.64em 0,calc(100% - .64em) 0,100% 50%,calc(100% - .64em) 100%,.64em 100%,0 50%);}
.etq--fanion{border-radius:.32em 0 0 .32em; padding-right:1.44em; clip-path:polygon(0 0,100% 0,calc(100% - .56em) 50%,100% 100%,0 100%);}
/* Compact */
.etq.etq--micro{font-size:calc(var(--etq-taille,12.5px) * .88); min-height:1.82em; padding:.18em .73em; border-radius:.45em; gap:.36em;}
.etq.etq--majuscules{font-size:calc(var(--etq-taille,12.5px) * .84); font-weight:750; letter-spacing:.07em; text-transform:uppercase; border-radius:.38em; min-height:2.1em; padding:.29em .76em;}
.etq.etq--point-seul{background:transparent; color:var(--text); padding-inline:.24em; min-height:1.76em;}
.etq.etq--point-seul > .etq-icone{color:var(--e-ink);}
.etq.etq--code{font:600 calc(var(--etq-taille,12.5px) * .92)/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; border-radius:.43em; background:var(--e-doux); color:var(--e-ink); min-height:1.91em; padding:.26em .7em; letter-spacing:-.01em;}
/* Icône */
.etq--icone-carree{border-radius:.56em; overflow:hidden;}
.etq--icone-ronde{border-radius:999px; padding:.24em .96em .24em .8em;}
.etq--icone-ronde .etq-rond{margin-left:-.56em;}
.etq--icone-coloree{border-radius:999px;}
.etq.etq-neutre.etq--icone-coloree > .etq-icone{color:var(--e-fort);}
.etq.etq--picto-seul{width:2.24em; height:2.24em; min-height:0; padding:0; justify-content:center; border-radius:.72em;}
.etq.etq--picto-seul .etq-texte{display:none;}

/* Sélecteur d'étiquettes des fiches (Nouvelle carte, fiche d'une carte) : les choix et les puces choisies montrent
   la vraie étiquette. Un choix non coché est un peu effacé ; coché, il est entier, cerclé et marqué d'une coche. */
.label-check.label-check--etq{position:relative; padding:calc(2px * var(--ui-scale-factor)); border:0; border-radius:calc(7px * var(--ui-scale-factor)); background:none; box-shadow:none; opacity:.6;
 --etq-taille:calc(9.5px * var(--ui-scale-factor)); --etq-fond-carte:var(--surface-2); transition:opacity .12s ease,box-shadow .12s ease;}
.label-check.label-check--etq:hover{opacity:.9; border:0; background:none;}
.label-check.label-check--etq.checked{opacity:1; background:none; box-shadow:0 0 0 calc(1.5px * var(--ui-scale-factor)) var(--accent);}
.label-check.label-check--etq:focus-visible{opacity:1; box-shadow:0 0 0 calc(1.5px * var(--ui-scale-factor)) var(--accent),0 0 0 calc(3px * var(--ui-scale-factor)) color-mix(in srgb,var(--accent) 35%,transparent);}
.label-check-coche{display:none;}
.label-check.checked .label-check-coche{display:grid; place-items:center; position:absolute; top:calc(-4px * var(--ui-scale-factor)); right:calc(-4px * var(--ui-scale-factor));
 width:round(calc(12px * var(--ui-scale-factor)),1px); height:round(calc(12px * var(--ui-scale-factor)),1px); border-radius:50%; background:var(--accent); color:#fff;
 font:800 calc(8px * var(--ui-scale-factor))/1 system-ui,sans-serif; box-shadow:0 0 0 calc(1.5px * var(--ui-scale-factor)) var(--surface-2);}
.label-check.checked .label-check-coche::before{content:"✓";}
.label-chip{display:inline-flex; align-items:center; gap:calc(2px * var(--ui-scale-factor)); padding:0; border:0; background:none; --etq-taille:calc(9.5px * var(--ui-scale-factor)); --etq-fond-carte:var(--surface-2);}
.label-chip > .etq{pointer-events:none;}
html.mode-telephone .label-check.label-check--etq{min-height:0; padding:3px; border-radius:10px; --etq-taille:13px;}
html.mode-telephone .label-check.checked .label-check-coche{top:-5px; right:-5px; width:16px; height:16px; font-size:10px;}
html.mode-telephone .label-chip{--etq-taille:12.5px;}
@media (prefers-reduced-motion:reduce){ .etq{transition:none;} }