/* ============================================================
   alaune.css — les ronds « à la une » qui ouvrent la visionneuse
   (visionneuse.js), façon highlights d'Instagram.
   Partagés : evenement.html (un rond par vidéo ou photo, « Ce qu'il
   s'est passé ») ; organisateur.html (un rond par soirée passée ; le
   rond « + » et ce qui est propre au profil restent dans organisateur.css).
   ============================================================ */
.alaune-rang{
  list-style:none; margin:0; padding:8px 6px 4px; display:flex; gap:clamp(16px,3vw,34px);
  overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity; overscroll-behavior-x:contain;
}
.alaune-rang::-webkit-scrollbar{display:none}
.alaune-rang li{flex:none; scroll-snap-align:start}
.alaune-rond{
  appearance:none; background:none; border:0; padding:0; margin:0; cursor:pointer; font:inherit;
  display:flex; flex-direction:column; align-items:center; gap:9px; width:88px; color:var(--lb-papier);
  /* L'appui long du propriétaire (organisateur.html) : sans le menu
     système de l'image, sans sélection du texte. */
  touch-action:manipulation; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}
.alaune-rond img, .alaune-rond video{-webkit-touch-callout:none; pointer-events:none}
.alaune-cercle{
  position:relative; width:84px; height:84px; border-radius:50%; overflow:hidden; display:grid; place-items:center;
  box-sizing:border-box;
  /* Le cercle d'Instagram : un liseré bleu, puis un trait papier pâle. */
  box-shadow:0 0 0 3px var(--lb-bleu), 0 0 0 5px color-mix(in srgb, var(--lb-papier) 55%, transparent);
}
.alaune-cercle img, .alaune-cercle video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.alaune-ini{font-family:var(--titre); font-size:24px; line-height:1}
.alaune-nom{
  max-width:88px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:12.5px; font-weight:600; line-height:1.25;
}
.alaune-rond:hover .alaune-cercle{box-shadow:0 0 0 3px var(--lb-bleu), 0 0 0 5px var(--lb-papier)}
.alaune-rond:focus-visible{outline:none}
.alaune-rond:focus-visible .alaune-cercle{box-shadow:0 0 0 3px var(--lb-bleu), 0 0 0 6px var(--lb-jaune)}
.alaune-rond:focus-visible .alaune-nom{text-decoration:underline; text-underline-offset:3px}
@media (max-width:640px){
  .alaune-rang{gap:14px}
  .alaune-rond{width:72px; gap:8px}
  .alaune-cercle{width:66px; height:66px}
  .alaune-nom{max-width:72px; font-size:12px}
  .alaune-ini{font-size:20px}
}
@media (prefers-reduced-motion:no-preference){
  .alaune-cercle{transition:box-shadow .15s ease}
}