/* =====================================================================
   PUBLICATIONS (page publications.html ; js/publications.js), demande de Joachim du 19.10.2026
   Le même plateau chromé que la médiathèque (css/lecteur.css : .mediatheque, .publications, .mt-bouton, .mt-gel,
   .mt-led… ; sans façade depuis le 19.10.2026, demande de Joachim). Dedans, un fil de « cartes » en plastique argenté posées sur la
   console : en-tête (logo NS dans une bague chromée, nom, badge Admin, date), texte, photos en mosaïque.
   L'admin a en plus l'éditeur (texte dans un écran LCD, photos) et un menu ⋯ sur chaque carte.
   Mouvement : cartes qui glissent en arrivant à l'écran, photos qui s'approchent au survol, nouvelle publication
   qui s'allume, publication supprimée qui se replie, visionneuse plein écran. Animations réduites : rien ne bouge.
   ===================================================================== */
.publications { max-width: 780px; margin: 0 auto; }

/* ---------- Cartes (et éditeur) ---------- */
.pub-carte,
.pub-editeur {
  position: relative;
  margin: 0 0 16px;
  padding: 16px 18px 18px;
  border: 1px solid var(--contour);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--nacre-1), var(--nacre-5) 45%, var(--nacre-2));
  /* une seule lumière (en haut à gauche) : filet clair en haut, ombre courte et nette en bas à droite */
  box-shadow:
    4px 6px 0 -1px var(--ombre-portee),
    inset 0 1px 0 rgb(255 255 255 / 0.85),
    inset 0 -2px 0 rgb(0 0 30 / 0.06);
}
[data-theme="sombre"] .pub-carte,
[data-theme="sombre"] .pub-editeur { box-shadow: 4px 6px 0 -1px var(--ombre-portee), inset 0 1px 0 rgb(255 255 255 / 0.1); }
/* Arrivée à l'écran : la carte glisse et s'allume (classe « visible », js/publications.js) */
.publications.revele .pub-carte { opacity: 0; translate: 0 22px; transition: opacity 0.6s ease, translate 0.7s var(--glisse); }
.publications.revele .pub-carte.visible { opacity: 1; translate: 0 0; }
/* Nouvelle publication (ou modifiée) : un liseré lumineux qui s'éteint doucement */
.pub-carte.pub-neuve { animation: pub-neuve 2.4s ease-out; }
@keyframes pub-neuve {
  0% { box-shadow: 4px 6px 0 -1px var(--ombre-portee), 0 0 0 2px var(--lisere), 0 0 26px color-mix(in srgb, var(--lisere) 55%, transparent); }
  100% { box-shadow: 4px 6px 0 -1px var(--ombre-portee), 0 0 0 0 transparent, 0 0 0 transparent; }
}
/* Publication supprimée : elle se replie */
.pub-carte.partie { opacity: 0; scale: 0.96; transition: opacity 0.4s ease, scale 0.4s var(--glisse); }

.pub-entete { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pub-avatar {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  /* le logo NS dans une bague chromée */
  box-shadow: 0 0 0 2px var(--chrome-2), 0 0 0 3px var(--chrome-4), 0 0 0 4px var(--contour), 2px 3px 0 3px var(--ombre-portee);
}
.pub-qui { flex: 1; min-width: 0; }
.pub-auteur { margin: 0; font-size: 14px; font-weight: bold; }
.pub-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border: 1px solid var(--gel-bord);
  border-radius: 999px;
  color: var(--gel-icone);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  vertical-align: 2px;
  background: linear-gradient(180deg, var(--gel-haut), var(--gel-bas));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), 0 0 8px color-mix(in srgb, var(--gel-bas) 40%, transparent);
  text-shadow: 1px 1px 0 rgb(0 0 20 / 0.4);
}
.pub-meta { margin: 2px 0 0; font-size: 12px; opacity: 0.65; }
.pub-meta time { cursor: help; }

.pub-texte { font-family: var(--police-texte); font-size: 16px; line-height: 1.62; overflow-wrap: anywhere; }
.pub-texte p { margin: 0 0 0.75em; }
.pub-texte p:last-child { margin-bottom: 0; }
.pub-texte a { color: var(--ultra); text-underline-offset: 3px; }
[data-theme="sombre"] .pub-texte a { color: var(--lisere); }
.pub-tag { color: var(--gel-haut); font-weight: 600; }
[data-theme="sombre"] .pub-tag { color: var(--lisere); }

/* ---------- Photos : mosaïque (1 à 4, « +N » sur la 4e s'il y en a plus) ---------- */
.pub-photos {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--contour), 3px 4px 0 -1px var(--ombre-portee);
}
.pub-photos.n2 { grid-template-columns: 1fr 1fr; aspect-ratio: 16 / 9; }
.pub-photos.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16 / 10; }
.pub-photos.n3 .pub-photo:first-child { grid-row: span 2; }
.pub-photos.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 4 / 3; }
.pub-photo {
  position: relative;
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--ecran-fond);
  cursor: zoom-in;
}
.pub-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 0.6s var(--glisse), filter 0.4s ease; }
.pub-photos.n1 .pub-photo img { height: auto; max-height: 620px; }
.pub-photo:hover img { scale: 1.045; filter: brightness(1.06) saturate(1.05); }
.pub-photo:focus-visible { outline: 3px solid var(--lisere); outline-offset: -3px; }
.pub-plus {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--police-titre);
  font-size: 30px;
  background: rgb(4 8 30 / 0.55);
  text-shadow: 0 0 14px rgb(0 0 0 / 0.6);
}

/* Vidéo : image d'aperçu, bouton lecture en sphère de gel (comme le gros bouton du lecteur), durée */
.pub-photos.n1 .pub-video { aspect-ratio: 16 / 9; }
.pub-photos.n1 .pub-video img { height: 100%; max-height: none; }
.pub-lecture {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--gel-bord);
  background:
    radial-gradient(60% 45% at 45% 28%, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0) 70%),
    radial-gradient(circle at 50% 65%, var(--gel-bas), var(--gel-haut) 70%);
  box-shadow: 0 6px 18px rgb(0 0 20 / 0.45), inset 0 -3px 8px rgb(255 255 255 / 0.35), 0 0 0 4px rgb(255 255 255 / 0.18);
  transition: scale 0.35s var(--glisse), box-shadow 0.35s ease;
}
.pub-lecture::after {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  translate: -50% -50%;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--gel-icone);
  filter: drop-shadow(1px 1px 0 rgb(0 0 20 / 0.45));
}
.pub-photo:hover .pub-lecture { scale: 1.1; box-shadow: 0 8px 22px rgb(0 0 20 / 0.5), inset 0 -3px 8px rgb(255 255 255 / 0.35), 0 0 0 5px rgb(255 255 255 / 0.25), 0 0 26px var(--gel-bas); }
.pub-duree {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 7px;
  border-radius: 6px;
  color: var(--lcd);
  font: bold 11px Tahoma, Verdana, sans-serif;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--ecran-fond) 82%, transparent);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}

/* ---------- Aperçus de liens (Joachim, 19.10.2026 : « YouTube, Spotify, Wikipédia, n'importe quoi… un affichage
   propre », puis « plus de détails… la photo de profil encadrée ») : une carte en plastique argenté dans le post.
   Selon la forme : profil = photo ronde dans une bague chromée ; sortie = pochette carrée encadrée ; vidéo = grande
   image 16:9 ; page / article = image à gauche. Toute la carte ouvre le lien (titre « étiré ») ; la sphère ▶ ouvre
   le lecteur intégré (classe « joue ») ; « On the site → » mène à la page de la sortie sur le site. ---------- */
.pub-liens { display: grid; gap: 10px; margin-top: 12px; }
.pub-liens:empty { display: none; }
.pub-lien {
  position: relative;
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  border: 1px solid var(--contour);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--nacre-1), var(--nacre-2));
  box-shadow: 3px 4px 0 -1px var(--ombre-portee), inset 0 1px 0 rgb(255 255 255 / 0.7);
  transition: translate 0.35s var(--glisse), box-shadow 0.35s ease;
}
[data-theme="sombre"] .pub-lien { box-shadow: 3px 4px 0 -1px var(--ombre-portee), inset 0 1px 0 rgb(255 255 255 / 0.08); }
.pub-carte .pub-lien:not(.joue):hover {
  translate: 0 -2px;
  box-shadow: 4px 6px 0 -1px var(--ombre-portee), inset 0 1px 0 rgb(255 255 255 / 0.7), 0 0 0 1px color-mix(in srgb, var(--lisere) 55%, transparent),
    0 0 18px color-mix(in srgb, var(--lisere) 30%, transparent);
}
.pub-lien.sans-image { grid-template-columns: minmax(0, 1fr); }
.pub-lien-image {
  position: relative;
  display: block;
  min-height: 110px;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--ecran-fond);
}
button.pub-lien-image { z-index: 2; cursor: var(--curseur-main); } /* (au-dessus du lien « étiré » de la carte) */
.pub-lien-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 0.6s var(--glisse); }
.pub-lien:hover .pub-lien-image img { scale: 1.05; }
.pub-lien-image .pub-lecture { width: 48px; height: 48px; }
.pub-lien-image .pub-lecture::after { border-width: 9px 0 9px 15px; }
.pub-lien-corps { display: grid; align-content: center; gap: 3px; min-width: 0; padding: 12px 16px; }
.pub-lien-site {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}
.pub-lien-site img { width: 14px; height: 14px; border-radius: 3px; }
.pub-lien-titre {
  color: inherit;
  text-decoration: none;
  font-family: var(--police-texte);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pub-lien-titre::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* toute la carte ouvre le lien */
.pub-lien:hover .pub-lien-titre { text-decoration: underline; text-underline-offset: 3px; }
.pub-lien-titre:focus-visible { outline: none; }
.pub-lien:has(.pub-lien-titre:focus-visible) { outline: 2px solid var(--ultra); outline-offset: 2px; }
.pub-lien-auteur { font-size: 13px; font-weight: 600; opacity: 0.85; }
.pub-lien-details { font-size: 12px; letter-spacing: 0.02em; color: var(--gel-haut); font-weight: bold; }
[data-theme="sombre"] .pub-lien-details { color: var(--lisere); }
.pub-lien-resume {
  font-size: 13px;
  line-height: 1.45;
  opacity: 0.8;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pub-lien-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 4px; }
.pub-lien-domaine { font-size: 11px; opacity: 0.55; }
.pub-lien-action {
  position: relative;
  z-index: 2;
  padding: 3px 11px;
  border: 1px solid var(--gel-bord);
  border-radius: 999px;
  color: var(--gel-icone);
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
  background:
    radial-gradient(140% 90% at 50% 125%, var(--gel-lueur) 0, rgb(255 255 255 / 0) 70%),
    linear-gradient(180deg, var(--gel-haut), var(--gel-bas));
  box-shadow: 1px 2px 0 rgb(0 0 30 / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.45);
  text-shadow: 1px 1px 0 rgb(0 0 20 / 0.4);
  transition: filter 0.25s ease;
}
.pub-lien-action:hover { filter: brightness(1.1); }
/* Vidéo YouTube : la grande image 16:9 en haut, le texte dessous */
.pub-lien-video { grid-template-columns: minmax(0, 1fr); }
.pub-lien-video .pub-lien-image { aspect-ratio: 16 / 9; min-height: 0; }
.pub-lien-video .pub-lecture { width: 64px; height: 64px; }
.pub-lien-video .pub-lecture::after { border-width: 12px 0 12px 20px; }
/* Sortie (album, morceau, playlist) : la pochette carrée, encadrée et posée dans la carte */
.pub-lien-sortie { grid-template-columns: 138px minmax(0, 1fr); align-items: center; }
.pub-lien-sortie .pub-lien-image {
  aspect-ratio: 1;
  min-height: 0;
  margin: 12px 0 12px 12px;
  border-radius: 6px;
  box-shadow: 0 0 0 1px var(--contour), 3px 4px 0 -1px var(--ombre-portee);
}
/* Profil (chaîne, artiste) : la photo ronde dans une bague chromée (comme le logo NS des posts) */
.pub-lien-profil { grid-template-columns: 118px minmax(0, 1fr); align-items: center; }
.pub-lien-profil .pub-lien-image {
  width: 86px;
  height: 86px;
  min-height: 0;
  margin: 16px 0 16px 18px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--chrome-2), 0 0 0 4px var(--chrome-4), 0 0 0 5px var(--contour), 3px 4px 0 5px var(--ombre-portee);
}
.pub-lien-profil .pub-lien-titre { font-size: 17px; }
/* Lecteur lancé : il prend toute la largeur (au-dessus du lien de la carte), le texte reste dessous */
.pub-lien.joue { grid-template-columns: minmax(0, 1fr); }
.pub-embarque { position: relative; z-index: 2; display: block; width: 100%; border: 0; background: #000; }
.pub-lien-bandcamp .pub-embarque, .pub-lien-spotify .pub-embarque { background: transparent; }
.pub-embarque-video { aspect-ratio: 16 / 9; height: auto; }
/* Dans l'éditeur : l'aperçu se montre, on ne l'ouvre pas ; × pour le retirer */
.pub-liens-editeur .pub-lien { pointer-events: none; }
.pub-liens-editeur .pub-retirer { pointer-events: auto; z-index: 3; top: 8px; right: 8px; }
.pub-lien-attente { opacity: 0.75; }
.pub-lien-attente .pub-lien-site::after {
  content: "";
  width: 46px;
  height: 6px;
  margin-left: 6px;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, var(--lisere) 0 6px, transparent 6px 9px);
  animation: pub-attente 1s steps(4) infinite;
}
@keyframes pub-attente { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Menu ⋯ (admin) ---------- */
.pub-menu { position: relative; }
.pub-menu-bouton {
  list-style: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: var(--curseur-main);
  transition: background-color 0.25s ease;
}
.pub-menu-bouton::-webkit-details-marker { display: none; }
.pub-menu-bouton:hover, .pub-menu[open] .pub-menu-bouton { background: var(--mt-survol); }
.pub-menu-liste {
  position: absolute;
  z-index: 3;
  right: 0;
  top: calc(100% + 6px);
  display: grid;
  min-width: 140px;
  padding: 6px;
  border: 1px solid var(--contour);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--nacre-1), var(--nacre-5));
  box-shadow: 4px 6px 0 -2px var(--ombre-portee), inset 0 1px 0 rgb(255 255 255 / 0.6);
  transform-origin: top right;
}
.pub-menu[open] .pub-menu-liste { animation: mt-ouvre 0.3s var(--glisse); }
.pub-menu-liste button {
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: var(--curseur-main);
}
.pub-menu-liste button:hover { background: var(--mt-survol); }
.pub-menu-liste [data-supprimer] { color: #c0213a; }
[data-theme="sombre"] .pub-menu-liste [data-supprimer] { color: #ff6b7d; }

/* ---------- Éditeur (admin) ---------- */
.pub-editeur { margin-bottom: 22px; transition: box-shadow 0.35s ease; }
.pub-editeur.pret { box-shadow: 4px 6px 0 -1px var(--ombre-portee), inset 0 1px 0 rgb(255 255 255 / 0.85), 0 0 0 1px color-mix(in srgb, var(--lisere) 60%, transparent); }
/* Prête à partir : le voyant du bouton Publish s'allume */
.pub-editeur.pret .mt-gel .mt-led {
  background: radial-gradient(circle at 35% 30%, #fff 0 16%, rgb(255 255 255 / 0) 48%), var(--led);
  box-shadow: 0 0 2px var(--led), 0 0 8px var(--led), inset 0 -1px 1px rgb(0 0 0 / 0.3);
}
.pub-editeur.depot { box-shadow: 4px 6px 0 -1px var(--ombre-portee), 0 0 0 2px var(--lisere), 0 0 22px color-mix(in srgb, var(--lisere) 45%, transparent); }
.pub-editeur.envoi { opacity: 0.8; pointer-events: none; }
.pub-editeur-modif { border-style: dashed; }
/* Le texte s'écrit dans un écran LCD (même creux moulé que la recherche de la médiathèque) */
.pub-saisie {
  display: block;
  width: 100%;
  min-height: 84px;
  resize: none;
  padding: 12px 14px;
  border: 0;
  border-radius: 14px;
  color: var(--lcd);
  font-family: var(--police-texte);
  font-size: 15px;
  line-height: 1.55;
  background: radial-gradient(ellipse 80% 90% at 40% 20%, var(--retro-1), var(--retro-2) 60%, var(--retro-3));
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.85), inset 0 0 0 3px var(--cadre-ecran), inset 3px 4px 5px rgb(0 0 0 / 0.6), 0 1px 0 rgb(255 255 255 / 0.6);
  transition: box-shadow 0.35s ease;
}
.pub-saisie::placeholder { color: var(--lcd); opacity: 0.45; }
.pub-saisie:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.85), inset 0 0 0 3px var(--cadre-ecran), inset 3px 4px 5px rgb(0 0 0 / 0.6),
    0 0 0 2px var(--lisere), 0 0 18px color-mix(in srgb, var(--lisere) 40%, transparent);
}
.pub-apercus { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pub-apercus:empty { display: none; }
.pub-apercu { position: relative; margin: 0; animation: pub-apercu 0.35s var(--glisse); }
@keyframes pub-apercu { from { opacity: 0; scale: 0.85; } }
.pub-apercu img { display: block; width: 86px; height: 86px; border-radius: 10px; object-fit: cover; box-shadow: 0 0 0 1px var(--contour), 2px 3px 0 -1px var(--ombre-portee); }
.pub-retirer {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--gel-bord);
  border-radius: 50%;
  color: var(--gel-icone);
  font-size: 14px;
  line-height: 1;
  background: linear-gradient(180deg, var(--gel-haut), var(--gel-bas));
  box-shadow: 1px 2px 0 rgb(0 0 30 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.45);
  cursor: var(--curseur-main);
}
.pub-apercu-vide { display: block; width: 86px; height: 86px; border-radius: 10px; background: var(--ecran-fond); box-shadow: 0 0 0 1px var(--contour); }
.pub-apercu .pub-duree { right: 5px; bottom: 5px; font-size: 10px; }
/* Barre d'envoi : des cases qui s'allument une à une (comme la barre LOADING de la Bio), --p = 0 → 1 */
.pub-progres {
  position: relative;
  height: 16px;
  margin-top: 12px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ecran-fond);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.85), inset 2px 2px 3px rgb(0 0 0 / 0.6), 0 1px 0 rgb(255 255 255 / 0.5);
}
.pub-progres-barre {
  position: absolute;
  inset: 3px auto 3px 3px;
  width: calc((100% - 6px) * var(--p, 0));
  background: repeating-linear-gradient(90deg, var(--lisere) 0 9px, transparent 9px 12px);
  filter: drop-shadow(0 0 4px var(--lisere));
  transition: width 0.25s linear;
}
.pub-progres-texte {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font: bold 9px Tahoma, Verdana, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 0 3px #000, 0 0 6px #000;
}
.pub-aide { margin: 8px 2px 0; font-size: 11px; opacity: 0.6; }
.pub-editeur-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.pub-ajout { cursor: var(--curseur-main); }
.pub-ajout.plein { opacity: 0.4; pointer-events: none; }
.pub-compteur { font-size: 11px; font-variant-numeric: tabular-nums; opacity: 0.7; }
.pub-editeur .message-info { margin: 10px 0 0; }
.mt-gel:disabled { filter: grayscale(0.6); }

.pub-suite { display: flex; justify-content: center; min-height: 1px; }
.publications > .message-info { margin: 10px 4px 0; }

/* ---------- Visionneuse plein écran ---------- */
.pub-visionneuse {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  touch-action: pan-y;
}
.pub-visionneuse[open] { display: grid; place-items: center; animation: pub-vision 0.35s ease; }
@keyframes pub-vision { from { opacity: 0; } }
.pub-visionneuse::backdrop { background: rgb(4 6 22 / 0.88); backdrop-filter: blur(8px); }
.pub-visionneuse img,
.pub-visionneuse video {
  max-width: min(92vw, 1600px);
  max-height: 86dvh;
  border-radius: 12px;
  object-fit: contain;
  /* cadre chromé fin */
  box-shadow: 0 0 0 2px #c9d6f5, 0 0 0 3px #0e1430, 0 18px 60px rgb(0 0 0 / 0.6);
}
.pub-v-bouton {
  position: fixed;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid #061a5c;
  border-radius: 50%;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  background: radial-gradient(140% 90% at 50% 125%, #b8f6ff 0, rgb(255 255 255 / 0) 70%), linear-gradient(180deg, #0d4fd8, #5cc0ff);
  box-shadow: 1px 2px 0 rgb(0 0 30 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.5);
  cursor: var(--curseur-main);
  transition: filter 0.25s ease, scale 0.15s ease;
}
[data-theme="sombre"] .pub-v-bouton {
  border-color: #0f2400;
  color: #f4ffe0;
  background: radial-gradient(140% 90% at 50% 125%, #efffb0 0, rgb(255 255 255 / 0) 70%), linear-gradient(180deg, #2d6400, #a4ec24);
}
.pub-v-bouton:hover { filter: brightness(1.12); }
.pub-v-bouton:active { scale: 0.94; }
.pub-v-prec { left: 18px; top: 50%; translate: 0 -50%; }
.pub-v-suiv { right: 18px; top: 50%; translate: 0 -50%; }
.pub-v-fermer { right: 18px; top: 18px; }
.pub-visionneuse [hidden] { display: none; }
.pub-visionneuse video { background: #000; }
.pub-visionneuse.seule .pub-v-prec, .pub-visionneuse.seule .pub-v-suiv { display: none; }
.pub-v-compteur {
  position: fixed;
  bottom: 18px;
  left: 50%;
  translate: -50% 0;
  margin: 0;
  color: #e4fbff;
  font: bold 12px Tahoma, Verdana, sans-serif;
  letter-spacing: 0.14em;
}

/* ---------- Téléphone ---------- */
@media (max-width: 820px) {
  .pub-carte, .pub-editeur { padding: 13px 13px 14px; border-radius: 18px; }
  .pub-avatar { width: 40px; height: 40px; }
  .pub-texte { font-size: 15px; }
  .pub-lien-page:not(.sans-image) { grid-template-columns: minmax(0, 1fr); }
  .pub-lien-page .pub-lien-image { aspect-ratio: 1.91; min-height: 0; }
  .pub-lien-sortie { grid-template-columns: 104px minmax(0, 1fr); }
  .pub-lien-profil { grid-template-columns: 92px minmax(0, 1fr); }
  .pub-lien-profil .pub-lien-image { width: 64px; height: 64px; margin-left: 16px; }
  .pub-v-prec, .pub-v-suiv { top: auto; bottom: 12px; translate: none; }
  .pub-v-compteur { bottom: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .publications.revele .pub-carte { opacity: 1; translate: none; transition: none; }
  .pub-carte.pub-neuve, .pub-menu[open] .pub-menu-liste, .pub-apercu, .pub-visionneuse[open] { animation: none; }
  .pub-carte.partie, .pub-photo img, .pub-lecture, .pub-progres-barre, .pub-lien, .pub-lien-image img { transition: none; }
  .pub-lien-attente .pub-lien-site::after { animation: none; }
}