/* ===========================================================================
   Les étiquettes de la collection (27/10/2026) : sur les cartes, dans le layer,
   le menu rapide (clic droit, appui long) et la fenêtre de gestion. Classes `et-`.
   Le dessin vient du serveur (`ui_etiquettes.py`) ; la couleur d'une étiquette
   arrive en variables : `--et` (sa teinte) et `--et-encre` (le texte écrit dessus).
   =========================================================================== */

/* --- Sur une carte ---------------------------------------------------------- */

/* Tout ce qu'une carte porte d'étiquettes tient dans UN élément posé sur la
   pochette : le script le remplace d'un bloc. Les tailles suivent celle de la
   carte (`cqi`), pour la vue compacte comme pour la grande. */
.et-deco { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  container-type: inline-size; box-shadow: var(--et-anneaux, none); }
.et-deco > *, .et-bas > * { font-family: var(--police); }
.et-cadenas { width: 1em; height: 1em; flex: none; stroke-width: 2.6; }
.et-deco span > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sur la pochette : des autocollants, un peu de travers. */
.et-pastilles { position: absolute; left: 6%; top: 52%; display: flex; flex-direction: column;
  align-items: flex-start; gap: 5px; max-width: 88%; }
.et-pastille { display: inline-flex; align-items: center; gap: .3em; max-width: 100%;
  padding: .3em .75em; border-radius: 999px; background: var(--et); color: var(--et-encre);
  font-size: max(10px, 6.6cqi); font-weight: 800; line-height: 1.15;
  box-shadow: 0 3px 8px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.28),
              inset 0 1px 0 rgba(255,255,255,.35);
  transform: rotate(-4deg); }
.et-pastille:nth-child(2) { transform: rotate(3deg); margin-left: 8%; }
.et-pastille:nth-child(3) { transform: rotate(-1.5deg); margin-left: 3%; }

/* En bas de la pochette : les noms (puces) au-dessus des bandeaux. */
.et-bas { position: absolute; left: 0; right: 0; bottom: 0; display: flex;
  flex-direction: column; align-items: stretch; }
.et-puces { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 6% 6%; }
.et-puce { display: inline-flex; align-items: center; gap: .3em; max-width: 100%;
  padding: .22em .62em; border-radius: 999px; background: var(--et); color: var(--et-encre);
  font-size: 12px; font-weight: 700; line-height: 1.2;
  box-shadow: 0 1px 5px rgba(0,0,0,.45); }
.et-deco .et-puce { font-size: max(9px, 5.6cqi); }
.et-puce > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.et-bandeau { display: flex; align-items: center; justify-content: center; gap: .35em;
  padding: .36em .7em; background: var(--et); color: var(--et-encre);
  font-size: max(9.5px, 5.8cqi); font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; line-height: 1.2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 -6px 14px -8px rgba(0,0,0,.6); }
.et-bandeau + .et-bandeau { box-shadow: inset 0 1px 0 rgba(0,0,0,.25); }

/* Ruban en coin (VIP) : en travers du coin bas droit, cousu. */
.et-ruban { position: absolute; right: -27%; bottom: 17%; width: 92%; display: flex;
  align-items: center; justify-content: center; gap: .3em; padding: .3em 23%;
  background: var(--et); color: var(--et-encre); font-size: max(8.5px, 4.8cqi); font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase; line-height: 1.15;
  border-top: 1px dashed rgba(255,255,255,.45); border-bottom: 1px dashed rgba(255,255,255,.45);
  outline: 2px solid var(--et); box-shadow: 0 4px 10px rgba(0,0,0,.5);
  transform: rotate(-45deg); }

/* Tampon (VIP) : encré, penché, au milieu de la pochette. */
.et-tampon { position: absolute; left: 50%; top: 44%; display: inline-flex; align-items: center;
  gap: .3em; max-width: 86%; padding: .18em .5em; border: .2em solid var(--et);
  border-radius: .3em; color: var(--et); background: rgba(8,10,14,.22);
  font-size: max(12px, 9cqi); font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  line-height: 1.1; transform: translate(-50%, -50%) rotate(-13deg);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.55));
  -webkit-mask-image: repeating-linear-gradient(118deg, #000 0 5px, rgba(0,0,0,.62) 5px 6px,
                                                #000 6px 9px, rgba(0,0,0,.82) 9px 10px);
  mask-image: repeating-linear-gradient(118deg, #000 0 5px, rgba(0,0,0,.62) 5px 6px,
                                        #000 6px 9px, rgba(0,0,0,.82) 9px 10px); }

/* Scotch (VIP) : un morceau de ruban adhésif, un peu translucide, en haut. */
.et-scotch { position: absolute; left: 50%; top: 5%; width: 64%; display: flex;
  align-items: center; justify-content: center; gap: .3em; padding: .4em .8em;
  background: color-mix(in srgb, var(--et) 68%, transparent); color: var(--et-encre);
  font-size: max(9.5px, 6cqi); font-weight: 700; font-style: italic; line-height: 1.15;
  box-shadow: 0 2px 6px rgba(0,0,0,.28); backdrop-filter: blur(1.5px);
  transform: translateX(-50%) rotate(-3deg);
  clip-path: polygon(0 0, 100% 0, 97% 20%, 100% 40%, 97% 60%, 100% 80%, 97% 100%,
                     0 100%, 3% 80%, 0 60%, 3% 40%, 0 20%); }

/* Tout autour : un anneau autour de la carte (les suivants dans la pochette). */
.col-carte.et-tour { outline: 2.5px solid var(--et-tour); outline-offset: 3px; }

/* Néon (VIP) : un anneau qui luit et respire. */
.col-carte.et-neon { outline: 2px solid var(--et-neon); outline-offset: 3px;
  animation: et-neon 2.8s ease-in-out infinite; }
.col-carte.et-neon .et-deco::before { content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1.5px var(--et-neon), inset 0 0 22px 2px var(--et-neon);
  opacity: .55; animation: et-lueur 2.8s ease-in-out infinite; }
.col-carte.et-neon.et-tour .et-deco { box-shadow: inset 0 0 0 3px var(--et-tour), var(--et-anneaux, 0 0 0 0 transparent); }
@keyframes et-neon {
  50% { outline-color: color-mix(in srgb, var(--et-neon) 55%, #fff); } }
@keyframes et-lueur { 50% { opacity: .95; } }
@media (prefers-reduced-motion: reduce) {
  .col-carte.et-neon, .col-carte.et-neon .et-deco::before { animation: none; } }

/* Dans SA collection : pas de bulle « ouvrir le lien » à l'appui long d'iOS, le
   menu des étiquettes la remplace. */
[data-collection][data-moi] .col-carte:not(.col-manquant) {
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.col-carte.et-appui { transform: scale(.97) !important; transition: transform .2s ease; }

/* --- Dans le layer ------------------------------------------------------------ */

.layer-et { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.layer-et:empty { display: none; }
.et-puce.grande { font-size: 12.5px; padding: .3em .75em; }
.et-bouton .icone { margin-right: 6px; }
.layer-actions .bouton[disabled] .icone, .bouton.danger[disabled] .icone { margin-right: 6px; }

/* --- Le menu rapide ----------------------------------------------------------- */

.et-menu { position: fixed; z-index: 90; width: 268px; max-width: calc(100vw - 24px);
  max-height: min(70vh, 520px); overflow: auto; padding: 6px; border-radius: 14px;
  background: #151a21; border: 1px solid #2b3340; color: var(--texte);
  box-shadow: 0 24px 60px -14px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.3);
  font: 14px/1.4 var(--police); animation: et-pop .14s ease-out; transform-origin: top left; }
.et-menu.sur-carte { width: 248px; animation-name: et-pop-carte; transform-origin: center; }
@keyframes et-pop { from { opacity: 0; transform: scale(.96) translateY(-3px); } }
@keyframes et-pop-carte { from { opacity: 0; transform: scale(.9); } }
.et-menu-tete { display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px;
  color: var(--doux); font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; }
.et-menu-tete small { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; }
.et-menu-liste { list-style: none; margin: 0; padding: 0; }
.et-menu-liste form { margin: 0; }
.et-choix { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
  border: 0; border-radius: 9px; background: none; color: var(--texte); font: inherit;
  text-align: left; cursor: pointer; }
.et-choix:hover:not([disabled]), .et-choix:focus-visible { background: rgba(255,255,255,.06);
  outline: none; }
.et-choix[disabled] { opacity: .4; cursor: not-allowed; }
.et-choix-nom { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.et-choix-nom > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.et-choix-nom .et-cadenas { color: var(--doux); width: 13px; height: 13px; }
.et-point { width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--et);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.et-coche { display: grid; place-items: center; width: 20px; height: 20px; flex: none;
  border-radius: 6px; border: 1.5px solid #3a4450; color: transparent; }
.et-coche .icone { width: 13px; height: 13px; stroke-width: 3.2; }
.et-choix[aria-pressed="true"] .et-coche { background: var(--vert); border-color: var(--vert);
  color: #04240f; }
.et-choix.envoi { opacity: .6; pointer-events: none; }
.et-menu-vide, .et-menu-aide { margin: 4px 10px 8px; color: var(--doux); font-size: 13px; }
.et-menu-message { margin: 4px 10px 8px; color: #ff9b94; font-size: 13px; }
.et-menu-gerer { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 10px;
  border-top: 1px solid #232a34; border-radius: 0 0 9px 9px; color: var(--vert);
  font-weight: 600; font-size: 13.5px; }
.et-menu-gerer:hover { background: rgba(29,185,84,.08); }
@media (prefers-reduced-motion: reduce) { .et-menu { animation: none; } }

/* --- La fenêtre de gestion ------------------------------------------------------ */

dialog.et-fenetre { width: min(660px, calc(100vw - 24px)); max-height: calc(100dvh - 40px);
  padding: 0; border: 1px solid #2b3340; border-radius: 18px; background: #11161d;
  color: var(--texte); box-shadow: 0 40px 100px -20px rgba(0,0,0,.9); overflow: auto; }
dialog.et-fenetre::backdrop { background: rgba(5,7,10,.66); backdrop-filter: blur(3px); }
dialog.et-fenetre[open] { animation: et-pop-carte .18s ease-out; }
.et-fenetre-attente { padding: 40px; text-align: center; color: var(--doux); }
.et-page { max-width: 660px; margin: 24px auto; }
.et-page .et-fermer { display: none; }
.et-gestion { padding: 18px 20px 22px; }
.et-gestion-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.et-gestion-tete h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 20px; }
.et-gestion-tete h2 .icone { color: var(--vert); }
.et-gestion-tete small { color: var(--doux); font-variant-numeric: tabular-nums; }
.et-fermer { margin-left: auto; }
.et-gestion-message { margin: 0 0 12px; padding: 9px 12px; border-radius: 10px; font-size: 13.5px;
  background: rgba(229,83,75,.12); color: #ffb3ad; }
.et-gestion-message.ok { background: rgba(29,185,84,.12); color: #9be3b5; }
.et-intro { margin: 0 0 14px; color: var(--doux); font-size: 14px; }
.et-plein { color: var(--doux); font-size: 13.5px; }
.et-pour-album { margin: 0 0 16px; padding: 10px; border-radius: 14px; background: #161b22;
  border: 1px solid #232a34; }
.et-pour-album h3 { margin: 4px 8px 2px; font-size: 14px; }
.et-pour-album .et-menu-gerer { display: none; }

.et-liste { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.et-ligne details { border: 1px solid #232a34; border-radius: 12px; background: #161b22; }
.et-ligne details[open] { border-color: #2f3946; }
.et-ligne summary { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  cursor: pointer; list-style: none; }
.et-ligne summary::-webkit-details-marker { display: none; }
.et-ligne-compte { color: var(--doux); font-size: 13px; }
.et-ligne-theme { margin-left: auto; color: var(--doux); font-size: 12.5px; }
.et-ligne-crayon { color: var(--doux); }
.et-ligne-corps { padding: 4px 12px 12px; border-top: 1px solid #232a34; }
.et-supprimer { margin: 10px 0 0; text-align: right; }
.et-nouvelle > summary { display: inline-flex; align-items: center; gap: 8px; list-style: none;
  cursor: pointer; }
.et-nouvelle > summary::-webkit-details-marker { display: none; }
.et-nouvelle[open] > summary { margin-bottom: 12px; }
.et-nouvelle > .et-form { padding: 14px; border-radius: 14px; background: #161b22;
  border: 1px solid #232a34; }

/* Le formulaire : l'aperçu à gauche, les choix à droite. */
.et-form { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: start;
  margin: 10px 0 0; }
.et-form-champs { display: grid; gap: 14px; min-width: 0; }
.et-champ { display: grid; gap: 6px; font-size: 13px; color: var(--doux); }
.et-champ input { padding: 10px 12px; border-radius: 10px; border: 1px solid #2b3340;
  background: #0d1117; color: var(--texte); font-size: 15px; }
.et-champ input:focus { outline: 2px solid var(--vert); outline-offset: 1px; }
.et-couleurs, .et-themes { margin: 0; padding: 0; border: 0; min-width: 0; }
.et-couleurs legend, .et-themes legend { margin-bottom: 8px; padding: 0; color: var(--doux);
  font-size: 13px; }
.et-couleurs { display: flex; flex-wrap: wrap; gap: 8px; }
.et-teinte { position: relative; width: 28px; height: 28px; margin: 0; cursor: pointer; }
.et-teinte input[type="radio"] { position: absolute; opacity: 0; inset: 0; margin: 0; }
.et-teinte > span { position: absolute; inset: 0; border-radius: 50%; background: var(--et);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); transition: transform .12s ease; }
.et-teinte:hover > span { transform: scale(1.08); }
.et-teinte:has(input:checked) > span { box-shadow: 0 0 0 2px #11161d, 0 0 0 4px #fff; }
.et-teinte:has(input:focus-visible) > span { box-shadow: 0 0 0 2px #11161d, 0 0 0 4px var(--vert); }
.et-teinte.libre { width: auto; display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 4px 2px 2px; border-radius: 999px;
  background: conic-gradient(#ef4444, #f5c451, #1db954, #38bdf8, #8b5cf6, #ec4899, #ef4444); }
.et-teinte.libre:has(input[type="radio"]:checked) { box-shadow: 0 0 0 2px #11161d, 0 0 0 4px #fff; }
.et-teinte.libre input[type="color"] { width: 24px; height: 24px; padding: 0; border: 0;
  border-radius: 50%; background: none; cursor: pointer; position: relative; z-index: 1; }
.et-teinte.libre input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.et-teinte.libre input[type="color"]::-webkit-color-swatch { border: 2px solid #11161d;
  border-radius: 50%; }

.et-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.et-themes legend { grid-column: 1 / -1; }
.et-theme { position: relative; display: grid; justify-items: center; gap: 6px; margin: 0;
  padding: 10px 6px 8px; border-radius: 12px; border: 1px solid #2b3340; background: #0f141a;
  cursor: pointer; text-align: center; transition: border-color .12s ease, background .12s ease; }
.et-theme input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: inherit; }
.et-theme:hover { border-color: #3a4552; }
.et-theme:has(input:checked) { border-color: var(--vert); background: rgba(29,185,84,.08); }
.et-theme:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; }
.et-theme.ferme { cursor: not-allowed; opacity: .55; }
.et-theme-nom { font-size: 12px; line-height: 1.2; }
.et-vip { display: inline-flex; align-items: center; gap: 3px; color: var(--or); font-size: 10.5px;
  font-weight: 800; letter-spacing: .04em; }
.et-vip .icone { width: 11px; height: 11px; }
.et-vip-note { display: flex; gap: 8px; align-items: flex-start; margin: -4px 0 0; color: var(--doux);
  font-size: 12.5px; }
.et-vip-note > .icone { color: var(--or); margin-top: 2px; }

/* Le motif d'un thème : une petite pochette et son étiquette, à la couleur choisie. */
.et-theme-motif { position: relative; width: 40px; height: 40px; border-radius: 6px;
  background: linear-gradient(140deg, #3b4656, #1c232d); overflow: hidden; }
.et-theme-motif i { position: absolute; display: block; background: var(--et); }
[data-motif="pastille"] i { left: 5px; top: 22px; width: 22px; height: 8px; border-radius: 9px;
  transform: rotate(-6deg); }
[data-motif="bandeau"] i { left: 0; right: 0; bottom: 0; height: 9px; }
[data-motif="contour"] { box-shadow: inset 0 0 0 3px var(--et); }
[data-motif="contour"] i, [data-motif="neon"] i { display: none; }
[data-motif="ruban"] i { right: -9px; bottom: 7px; width: 34px; height: 7px; transform: rotate(-45deg); }
[data-motif="tampon"] i { left: 9px; top: 13px; width: 22px; height: 13px; background: none;
  border: 2px solid var(--et); border-radius: 2px; transform: rotate(-13deg); }
[data-motif="scotch"] i { left: 8px; top: 3px; width: 24px; height: 8px; opacity: .75;
  transform: rotate(-4deg); }
[data-motif="neon"] { box-shadow: inset 0 0 0 1.5px var(--et), inset 0 0 10px 1px var(--et); }

.et-protege { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px;
  border-radius: 12px; border: 1px solid #2b3340; cursor: pointer; }
.et-protege:has(input:checked) { border-color: rgba(245,196,81,.5); background: rgba(245,196,81,.07); }
.et-protege input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: #f5c451; flex: none; }
.et-protege > span { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; }
.et-protege .icone { color: #f5c451; margin-top: 2px; }
.et-protege small { grid-column: 2; color: var(--doux); font-size: 12.5px; }
.et-form-pied { display: flex; justify-content: flex-end; }

/* L'aperçu : une carte d'exemple. Tous les thèmes y sont, un seul se montre. */
.et-apercu { position: sticky; top: 0; }
.et-apercu-carte { display: block; padding-bottom: 10px; border-radius: 12px; background: var(--carte);
  border: 1px solid var(--bord); overflow: visible; transition: outline-color .2s ease; }
.et-apercu-pochette { position: relative; display: grid; place-items: center; aspect-ratio: 1;
  border-radius: 11px 11px 0 0; overflow: hidden; color: rgba(255,255,255,.18);
  background: radial-gradient(circle at 30% 25%, #4b5b70, #222a35 62%, #161b22); }
.et-apercu-pochette > .icone { width: 46%; height: 46%; stroke-width: 1.2; }
.et-apercu-ligne { display: block; height: 7px; margin: 10px 12px 0; border-radius: 4px;
  background: #2b3340; }
.et-apercu-ligne.courte { width: 46%; height: 6px; margin-top: 6px; background: #232a34; }
.et-apercu .et-pastilles, .et-apercu .et-ruban, .et-apercu .et-tampon, .et-apercu .et-scotch,
.et-apercu .et-puces, .et-apercu .et-bandeau { display: none; }
.et-apercu[data-theme="pastille"] .et-pastilles { display: flex; }
.et-apercu[data-theme="bandeau"] .et-bandeau { display: flex; }
.et-apercu[data-theme="ruban"] .et-ruban { display: flex; }
.et-apercu[data-theme="tampon"] .et-tampon { display: inline-flex; }
.et-apercu[data-theme="scotch"] .et-scotch { display: flex; }
.et-apercu[data-theme="contour"] .et-puces, .et-apercu[data-theme="neon"] .et-puces { display: flex; }
.et-apercu[data-theme="contour"] .et-apercu-carte { outline: 2.5px solid var(--et); outline-offset: 3px; }
.et-apercu[data-theme="neon"] .et-apercu-carte { outline: 2px solid var(--et); outline-offset: 3px;
  --et-neon: var(--et); animation: et-neon 2.8s ease-in-out infinite; }
.et-apercu[data-theme="neon"] .et-deco::before { content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1.5px var(--et), inset 0 0 22px 2px var(--et); opacity: .6;
  animation: et-lueur 2.8s ease-in-out infinite; }
.et-apercu .et-deco { box-shadow: none; }

@media (max-width: 620px) {
  dialog.et-fenetre { width: 100vw; max-width: none; max-height: 92dvh; margin: auto 0 0;
    border-radius: 18px 18px 0 0; }
  .et-gestion { padding: 16px 14px 22px; }
  .et-form { grid-template-columns: 1fr; }
  .et-apercu { position: static; width: 150px; margin: 0 auto; }
  .et-themes { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}

/* --- La Collection : le bouton et les filtres --------------------------------- */

.col-etiquettes { gap: 6px; }
.col-panneau { max-height: min(72vh, 620px); overflow: auto; }
.col-puces-titre { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px;
  padding: 8px 10px 4px; border-top: 1px solid #232a34; color: var(--doux); font-size: 12px;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
/* Un rond de sa couleur, jamais étiré (`.col-puce span` prend toute la place libre). */
.col-puce-et .et-point { flex: 0 0 12px; width: 12px; height: 12px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.col-puce small { margin-left: auto; }

/* --- Échanges : un album protégé ---------------------------------------------- */

.ec-choix.protege { cursor: not-allowed; }
.ec-choix.protege .ec-mini { filter: grayscale(1) brightness(.6); }
.ec-choix.protege:hover .ec-mini { transform: none; }
.ec-choix.protege .ec-choix-titre, .ec-choix.protege .ec-choix-artiste { opacity: .5; }
.ec-choix .ec-cadenas { display: grid; place-items: center; background: rgba(13,17,23,.85);
  border-color: rgba(255,255,255,.25); color: #f5c451; }
.perdu-marque .icone { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; }
.et-apercu:not([data-protege]) .et-cadenas { display: none; }