/* La visionneuse plein écran des contenus d'une soirée (visionneuse.js).
   Préfixe .vis-. Tout passe par les tokens de la marque.

   Contrastes mesurés (WCAG, au pire cas : un média blanc sous le voile) :
   - nuit = color-mix(in oklab, #1C2B8F 55%, #000) ≈ #060D3C ;
   - voile = nuit à 72 % sur blanc : papier 6,95, jaune (focus) 4,64 ;
     le texte ne sort jamais de la partie pleine du voile, le fondu ne
     commence qu'en dessous ;
   - sur la nuit pleine : papier 16,79, jaune 11,21. */

.vis{
  --vis-nuit:color-mix(in oklab, var(--lb-bleu) 55%, #000);
  --vis-voile:color-mix(in srgb, var(--vis-nuit) 72%, transparent);
  --vis-verre:color-mix(in srgb, var(--lb-papier) 14%, transparent);
  position:fixed; inset:0; z-index:1000;
  width:100vw; height:100vh; height:100dvh; max-width:none; max-height:none;
  margin:0; padding:0; border:0; overflow:hidden;
  background:var(--vis-nuit); color:var(--lb-papier);
  font-family:var(--corps);
}
.vis::backdrop{background:var(--vis-nuit)}
.vis:focus{outline:none}
.vis [hidden]{display:none !important}
.vis :focus-visible{outline:3px solid var(--lb-jaune); outline-offset:2px}

.vis-rangee{height:100%; display:flex; align-items:center; justify-content:center; gap:20px}

/* La scène : plein écran sur téléphone, colonne 9:16 sur ordinateur. */
.vis-scene{
  position:relative; flex:none; overflow:hidden;
  width:100%; height:100%;
  background:var(--vis-nuit);
  touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  animation:vis-entree .18s ease-out;
}
.vis-scene--suit{transition:none; border-radius:var(--lb-radius)}
/* Pendant le glissé, le fond descend vers le noir (--vis-retrait, 0 à 1). */
.vis{background:color-mix(in oklab, var(--vis-nuit), #000 calc(var(--vis-retrait, 0) * 70%))}
.vis-scene:not(.vis-scene--suit){transition:transform .18s ease-out}

.vis-media{position:absolute; inset:0}
.vis-media video, .vis-media img{
  display:block; width:100%; height:100%; object-fit:cover; background:var(--vis-nuit);
}
.vis-media .vis-contenir{object-fit:contain}
.vis-cadre{
  position:absolute; inset:0; display:grid; place-items:center; padding:24px;
  background:var(--lb-bleu); color:var(--lb-papier);
}
.vis-cadre-titre{
  margin:0; max-width:12ch; text-align:center; text-transform:uppercase;
  font-family:var(--titre); font-weight:400; font-size:clamp(30px, 9vw, 44px); line-height:1.02;
  overflow-wrap:anywhere;
}

/* Les voiles : pleins là où le texte se pose, fondus au-delà. */
.vis-voile{position:absolute; left:0; right:0; pointer-events:none}
.vis-voile--haut{top:0; height:calc(env(safe-area-inset-top, 0px) + 96px);
  background:linear-gradient(to bottom, var(--vis-voile) 0, var(--vis-voile) 72px, transparent 100%)}
.vis-voile--bas{bottom:0; height:calc(env(safe-area-inset-bottom, 0px) + 100px);
  background:linear-gradient(to top, var(--vis-voile) 0, var(--vis-voile) 76px, transparent 100%)}

/* L'en-tête : barres, puis avatar, nom, boutons. */
.vis-haut{
  position:absolute; top:0; left:0; right:0;
  padding:calc(env(safe-area-inset-top, 0px) + 8px) 6px 0 10px;
  transition:opacity .2s ease;
}
.vis-barres{display:flex; gap:4px; padding-right:4px}
.vis-barre{flex:1; height:3px; border-radius:2px; overflow:hidden;
  background:color-mix(in srgb, var(--lb-papier) 35%, transparent)}
.vis-remplir{display:block; height:100%; background:var(--lb-papier);
  transform:scaleX(0); transform-origin:left center}

.vis-tete{display:flex; align-items:center; gap:10px; margin-top:6px; min-height:44px}
.vis-avatar{
  flex:none; width:32px; height:32px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center; background:var(--lb-bleu); color:var(--lb-papier);
  font-family:var(--info); font-weight:700; font-size:12px; letter-spacing:.04em;
  box-shadow:0 0 0 1.5px color-mix(in srgb, var(--lb-papier) 70%, transparent);
}
.vis-avatar img{width:100%; height:100%; object-fit:cover; display:block}
.vis-noms{flex:1; min-width:0; display:flex; align-items:baseline; gap:8px}
.vis-etiquette{font-weight:700; font-size:15px; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.vis-sous{flex:none; font-family:var(--info); font-size:12px; letter-spacing:.02em;
  color:color-mix(in srgb, var(--lb-papier) 88%, transparent)}

.vis-btn{
  flex:none; display:grid; place-items:center; width:44px; height:44px; padding:0;
  border:0; border-radius:50%; background:transparent; color:var(--lb-papier); cursor:pointer;
}
.vis-btn:hover{background:var(--vis-verre)}
.vis-icone{width:24px; height:24px; display:block}
.vis-tete .vis-btn{margin-left:-4px}

/* Les flèches de côté : ordinateur seulement. */
.vis-nav{display:none; background:var(--vis-verre)}
.vis-nav:hover{background:color-mix(in srgb, var(--lb-papier) 24%, transparent)}

/* Le chargement, l'erreur. */
.vis-etat{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none}
.vis-etat:empty{display:none}
.vis-anneau{
  width:44px; height:44px; border-radius:50%;
  border:3px solid color-mix(in srgb, var(--lb-papier) 30%, transparent);
  border-top-color:var(--lb-papier);
  animation:vis-tour .9s linear infinite;
}
.vis-attente-texte{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.vis-etat--erreur{
  inset:auto 16px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:20px 18px; border-radius:var(--lb-radius);
  background:var(--vis-voile); text-align:center;
}
.vis-erreur-texte{margin:0; max-width:30ch; font-size:16px; font-weight:600; line-height:1.4}
.vis-reessayer, .vis-lien, .vis-action-btn{
  pointer-events:auto; min-height:44px; padding:0 18px; border-radius:var(--lb-radius);
  font-family:var(--corps); font-weight:700; font-size:15px; cursor:pointer;
  display:inline-flex; align-items:center; text-decoration:none;
}
.vis-reessayer{border:0; background:var(--lb-papier); color:var(--lb-bleu)}

/* Lecture refusée par le navigateur : un gros bouton au centre. */
.vis-lecture{
  position:absolute; top:50%; left:50%; width:76px; height:76px; margin:-38px 0 0 -38px;
  background:var(--vis-voile);
}
.vis-lecture .vis-icone{width:36px; height:36px; margin-left:4px}

/* Le bas : le lien de la fête à gauche, l'action à droite. */
.vis-bas{
  position:absolute; left:0; right:0; bottom:0;
  padding:0 12px calc(env(safe-area-inset-bottom, 0px) + 14px);
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  transition:opacity .2s ease;
}
.vis-lien{
  color:var(--lb-papier); background:transparent;
  border:1.5px solid color-mix(in srgb, var(--lb-papier) 60%, transparent);
}
.vis-lien:hover{background:var(--vis-verre)}
.vis-action{margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:6px; max-width:60%}
.vis-action-btn{border:0; background:transparent; color:var(--lb-papier); padding:0 6px;
  text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1.5px}
.vis-action-btn[aria-busy="true"]{opacity:.6; cursor:progress}
.vis-action-msg{margin:0; font-size:13px; font-weight:600; line-height:1.35; text-align:right}

/* Le maintien : l'interface disparaît pour laisser voir le média, comme
   sur Instagram (elle revient au lâcher). */
.vis--maintien .vis-haut, .vis--maintien .vis-bas, .vis--maintien .vis-voile, .vis--maintien .vis-toast{opacity:0}
.vis-voile{transition:opacity .2s ease}

.vis-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0}

/* L'avatar et le nom, lien vers le profil (depuis une autre page). */
.vis-qui{flex:1; min-width:0; display:flex; align-items:center; gap:10px; min-height:44px;
  color:inherit; text-decoration:none; border-radius:var(--lb-radius)}
.vis-qui:hover .vis-etiquette{text-decoration:underline; text-underline-offset:3px}

/* « Vu par N » du propriétaire. */
.vis-activite{
  pointer-events:auto; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px 0 10px;
  border:0; border-radius:999px; background:var(--vis-verre); color:var(--lb-papier); cursor:pointer;
  font-family:var(--corps); font-weight:700; font-size:14px;
}
.vis-activite .vis-icone{width:22px; height:22px}
.vis-activite:hover{background:color-mix(in srgb, var(--lb-papier) 24%, transparent)}
.vis-outils{display:flex; align-items:center; gap:2px; margin-left:auto}
.vis-outils:not(:has(> :not([hidden]))){display:none}
/* Une action absente ne prend pas la place : le cœur et le partage
   restent collés à droite. */
.vis-action:not(:has(> :not([hidden]))){display:none}
.vis-aime--oui{color:var(--lb-jaune)}
.vis-aime--bat .vis-icone{animation:vis-bat .32s ease-out}
@keyframes vis-bat{40%{transform:scale(1.28)}}

/* Le court message (« Lien copié. »). */
.vis-toast{
  position:absolute; left:50%; bottom:calc(env(safe-area-inset-bottom, 0px) + 84px); transform:translateX(-50%);
  margin:0; max-width:calc(100% - 32px); padding:10px 16px; border-radius:999px;
  background:var(--lb-papier); color:var(--lb-bleu); font-weight:700; font-size:14px; line-height:1.3;
  text-align:center; overflow-wrap:anywhere; pointer-events:none; opacity:0; transition:opacity .2s ease;
}
.vis-toast:empty{visibility:hidden}
.vis-toast--la{opacity:1}

/* La feuille : monte du bas, dans la visionneuse. */
.vis-feuille-fond{position:absolute; inset:0; z-index:5; background:color-mix(in srgb, #000 45%, transparent)}
.vis-feuille{
  position:absolute; z-index:6; left:0; right:0; bottom:0; max-height:78%; overflow:auto;
  padding:8px 16px calc(env(safe-area-inset-bottom, 0px) + 18px);
  background:var(--lb-papier); color:var(--lb-bleu); border-radius:16px 16px 0 0;
  animation:vis-monte .2s ease-out;
}
.vis-feuille :focus-visible{outline:3px solid var(--lb-bleu); outline-offset:2px}
.vis-feuille-haut{display:flex; align-items:center; justify-content:space-between; gap:12px;
  position:sticky; top:-8px; padding-top:8px; background:var(--lb-papier)}
.vis-feuille-haut::before{content:""; position:absolute; top:6px; left:50%; width:40px; height:4px; margin-left:-20px;
  border-radius:2px; background:color-mix(in srgb, var(--lb-bleu) 25%, transparent)}
.vis-feuille-titre{margin:14px 0 6px; font-family:var(--corps); font-weight:800; font-size:17px; line-height:1.3; text-transform:none}
.vis-feuille .vis-btn{color:var(--lb-bleu)}
.vis-feuille .vis-btn:hover{background:color-mix(in srgb, var(--lb-bleu) 10%, transparent)}
.vis-feuille-msg{margin:10px 0 0; font-weight:700; font-size:14.5px}
.vis-feuille-msg:empty{display:none}
.vis-menu{display:grid; margin:4px -16px 0}
.vis-menu-choix{
  min-height:52px; padding:0 20px; border:0; border-top:1px solid color-mix(in srgb, var(--lb-bleu) 14%, transparent);
  background:none; color:var(--lb-bleu); font:inherit; font-weight:700; font-size:16px; text-align:left; cursor:pointer;
}
.vis-menu-choix:hover{background:color-mix(in srgb, var(--lb-bleu) 7%, transparent)}
.vis-menu-choix--danger{font-weight:800}  /* le rouge ne porte aucun texte (marque) */
.vis-menu-choix[aria-busy="true"]{opacity:.6; cursor:progress}

/* L'entrée depuis le rond voisin : la scène arrive du côté du geste. */
.vis-scene--de-droite{animation:vis-de-droite .24s ease-out}
.vis-scene--de-gauche{animation:vis-de-gauche .24s ease-out}
@keyframes vis-de-droite{from{transform:translateX(40%); opacity:.4}}
@keyframes vis-de-gauche{from{transform:translateX(-40%); opacity:.4}}
@keyframes vis-monte{from{transform:translateY(100%)}}

/* L'appui long d'un bouton (DK.visionneuse.appui) : il se resserre
   pendant l'attente, comme une photo d'Instagram sous le doigt. */
.vis-appui--presse{transform:scale(.94); transition:transform .45s ease-out}

@keyframes vis-tour{to{transform:rotate(360deg)}}
@keyframes vis-entree{from{opacity:0; transform:scale(.97)}}

@media (min-width:641px){
  .vis-feuille{margin-inline:auto; width:min(440px, 100%)}
  .vis-scene{
    height:min(92vh, 860px); height:min(92dvh, 860px); width:auto; aspect-ratio:9 / 16;
    border-radius:var(--lb-radius);
    /* Une nuit plus profonde que la page : la colonne garde ses bords
       autour d'une photo qui ne la remplit pas. */
    background:color-mix(in oklab, var(--vis-nuit), #000 45%);
  }
  .vis-media video, .vis-media img{background:transparent}
  .vis-nav{display:grid}
}

@media (prefers-reduced-motion:reduce){
  .vis-scene, .vis-scene:not(.vis-scene--suit), .vis-haut, .vis-bas, .vis-voile{animation:none; transition:none}
  .vis--maintien .vis-haut, .vis--maintien .vis-bas, .vis--maintien .vis-voile, .vis--maintien .vis-toast{opacity:1}
  .vis-feuille, .vis-scene--de-droite, .vis-scene--de-gauche, .vis-aime--bat .vis-icone{animation:none}
  .vis-toast{transition:none}
  .vis-appui--presse{transform:none; transition:none}
  .vis-anneau{display:none}
  .vis-attente-texte{position:static; width:auto; height:auto; clip:auto;
    padding:10px 16px; border-radius:var(--lb-radius); background:var(--vis-voile);
    font-size:15px; font-weight:600}
}