/* ===== Logos des projets (Ondine, Autocut) sur leurs cartes et en tête de leur fiche =====
   Autocut, Mathélio, Lunélio : leur icône d'appli ; Multimédia : le logo Jellyfin (CC BY-SA 4.0, Jellyfin contributors).
   Autocut : son icône fixe. Ondine : sa mascotte Goutte gomme, animée en direct par js/projets-logos.js
   (moteur repris du site d'Ondine, assets/vendor/ondine-gomme.js) ; sans script, l'image fixe reste. */
.tile:has(.plogo) { position: relative; }
.tile .plogo { position: absolute; top: 10px; right: 10px; width: 74px; height: 74px; }
.tile:has(.plogo) small, .tile:has(.plogo) b { padding-right: 78px; }
.plogo { display: block; pointer-events: none; }
.plogo img, .plogo canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.plogo canvas { opacity: 0; transition: opacity .3s; }
.plogo.live canvas { opacity: 1; }
.plogo.live img { opacity: 0; }
/* Autocut : l'icône d'appli, posée de travers avec l'ombre du classeur */
.plogo.app img { inset: 6%; width: 88%; height: 88%; transform: rotate(5deg); filter: drop-shadow(3px 3px 0 var(--ink)); transition: transform .2s; }
.tile:hover .plogo.app img { transform: rotate(-3deg) scale(1.06); }
/* Ondine : la goutte un peu plus grande, elle déborde volontiers de la carte */
.tile .plogo.gum { top: 2px; right: 4px; width: 86px; height: 86px; }

/* En tête de fiche : le logo à droite du grand titre (le titre reste aligné sur le reste de la colonne) */
.ptitle { display: flex; align-items: center; gap: clamp(8px, 1.6vw, 18px); margin: 18px 0 6px; }
.ptitle .big { margin: 0; }
.ptitle .plogo { position: relative; flex: 0 0 auto; width: clamp(70px, 10vw, 128px); aspect-ratio: 1; }
.ptitle .plogo.gum { width: clamp(84px, 12vw, 150px); margin: -10px -10px -14px -6px; }

/* Jellyfin : le logo officiel, sans fond, avec l'ombre du classeur ; Lunélio : pixel art net */
.plogo.jf img { inset: 8%; width: 84%; height: 84%; filter: drop-shadow(3px 3px 0 var(--ink)); transform: rotate(-4deg); transition: transform .2s; }
.tile:hover .plogo.jf img { transform: rotate(3deg) scale(1.06); }
.plogo.px img { image-rendering: pixelated; }
/* Ça colle ? : son favicon (la case cochée a déjà son ombre de classeur) */
.plogo.cc img { inset: 8%; width: 84%; height: 84%; transform: rotate(-4deg); transition: transform .2s; }
.tile:hover .plogo.cc img { transform: rotate(3deg) scale(1.06); }
.ptitle .big.long + .plogo { width: clamp(56px, 7vw, 96px); }
/* Hermes : l'aile officielle de Hermes Agent (Nous Research) */
.plogo.hm img { inset: 4%; width: 92%; height: 92%; object-fit: contain; transform: rotate(4deg); filter: drop-shadow(2px 2px 0 var(--ink)); transition: transform .2s; }
.tile:hover .plogo.hm img { transform: rotate(-3deg) scale(1.06); }
/* Bassin de koïs : ensō à l'encre et carpe kohaku */
.plogo.koi img { inset: 4%; width: 92%; height: 92%; transform: rotate(-4deg); filter: drop-shadow(2px 2px 0 var(--ink)); transition: transform .2s; }
.tile:hover .plogo.koi img { transform: rotate(6deg) scale(1.06); }