/* ==========================================================================
   AudiVid Theme — Galerie photo (façon Instagram)
   Vues : resources/views/gallery/*  ·  Script : js/audivid.gallery.js
   ========================================================================== */

/* ---------- Avatar avec anneau dégradé ---------- */
.av-gavatar {
  --_size: 40px;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--_size);
  height: var(--_size);
  padding: 2px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, #ff3b3b, #f5b014, #ee1c25, #990000, #ff3b3b);
  text-decoration: none;
}
.av-gavatar > span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--av-surface);
  background: var(--av-surface-3);
  color: var(--av-text);
  font: 700 calc(var(--_size) * .38) / 1 var(--av-font-display);
}
.av-gavatar:hover { text-decoration: none; }
.av-gavatar--sm { --_size: 32px; }
.av-gavatar--plain { background: var(--av-border); }
.av-gavatar--xl { --_size: clamp(88px, 18vw, 150px); padding: 3px; }
.av-gavatar--xl > span { border-width: 4px; border-color: var(--av-bg); }
.av-gverified { color: #3897f0; font-size: .85em; margin-left: .2rem; }

/* ---------- Grille carrée ---------- */
.av-ggrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: var(--av-space-6);
}
@media (min-width: 1100px) { .av-ggrid:not(.av-ggrid--compact) { gap: 10px; } }
@media (max-width: 575px)  { .av-ggrid { gap: 3px; margin-inline: -12px; } }

.av-gtile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  background: var(--av-surface-2);
}
@media (max-width: 575px) { .av-gtile { border-radius: 2px; } }
.av-gtile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--av-ease);
}
.av-gtile__multi {
  position: absolute;
  top: 8px;
  right: 8px;
  color: #fff;
  font-size: 1rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
}
.av-gtile__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  background: rgba(0, 0, 0, .42);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  opacity: 0;
  transition: opacity var(--av-dur) var(--av-ease);
}
.av-gtile__overlay i { margin-right: .35rem; }
.av-gtile:hover .av-gtile__overlay,
.av-gtile:focus-visible .av-gtile__overlay { opacity: 1; }
.av-gtile:hover img { transform: scale(1.03); }
.av-gtile:focus-visible { outline: 2px solid var(--av-primary); outline-offset: 2px; }
@media (hover: none) { .av-gtile__overlay { display: none; } }

/* ---------- État vide ---------- */
.av-gempty {
  display: grid;
  justify-items: center;
  gap: .6rem;
  padding: 4rem 1rem;
  text-align: center;
  border: 1px dashed var(--av-border);
  border-radius: 16px;
  margin-bottom: var(--av-space-6);
}
.av-gempty__icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: .5rem;
  border: 2px solid var(--av-text);
  border-radius: 50%;
  font-size: 1.8rem;
  color: var(--av-text);
}
.av-gempty h2 { font-size: 1.35rem; margin: 0; }
.av-gempty p { color: var(--av-text-muted); margin: 0 0 .75rem; }

/* ---------- Publication ---------- */
.av-gpost-crumbs { margin: var(--av-space-5) 0 var(--av-space-4); }

.av-gpost {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  margin-bottom: var(--av-space-6);
  background: var(--av-surface);
  border: 1px solid var(--av-border);
  border-radius: 14px;
}

.av-gpost__media {
  position: relative;
  overflow: hidden;
  background: #000;
  aspect-ratio: var(--av-ratio, 1);
  user-select: none;
  -webkit-user-select: none;
}
.av-gpost__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  outline: none;
}
.av-gpost__track::-webkit-scrollbar { display: none; }
.av-gpost__slide {
  flex: 0 0 100%;
  margin: 0;
  display: grid;
  place-items: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.av-gpost__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
}

.av-gpost__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  color: #111;
  font-size: .8rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  cursor: pointer;
  transition: background var(--av-dur-fast);
}
.av-gpost__nav:hover { background: #fff; }
.av-gpost__nav[hidden] { display: none; }
.av-gpost__nav--prev { left: 12px; }
.av-gpost__nav--next { right: 12px; }
@media (hover: none) { .av-gpost__nav { display: none; } }

.av-gpost__count {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
}
.av-gpost__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 4px;
  pointer-events: none;
}
.av-gpost__dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .45); transition: background var(--av-dur); }
.av-gpost__dots span.is-active { background: #fff; }

.av-gpost__burst {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  color: #fff;
  font-size: 6rem;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .35));
  pointer-events: none;
}
.av-gpost__burst.is-on { animation: av-gburst .9s var(--av-ease-out) forwards; }
@keyframes av-gburst {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  15%  { opacity: .95; transform: translate(-50%, -50%) scale(1.2); }
  30%  { transform: translate(-50%, -50%) scale(.95); }
  45%  { transform: translate(-50%, -50%) scale(1); }
  80%  { opacity: .95; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

/* Colonne de droite */
.av-gpost__side { display: flex; flex-direction: column; min-width: 0; }
.av-gpost__head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--av-border-soft);
}
.av-gpost__who { display: grid; min-width: 0; line-height: 1.25; }
.av-gpost__user { font-weight: 700; color: var(--av-text); }
.av-gpost__user:hover { color: var(--av-text); }
.av-gpost__loc { font-size: .78rem; color: var(--av-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-gpost__menu { margin-left: auto; }
.av-gdanger { color: var(--av-danger) !important; width: 100%; border: 0; background: none; text-align: left; cursor: pointer; }

.av-gpost__thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
  display: grid;
  align-content: start;
  gap: 1.1rem;
}
.av-gcomment { display: flex; gap: .75rem; align-items: flex-start; }
.av-gcomment p { margin: 0; font-size: .93rem; line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere; }
.av-gcomment__user { font-weight: 700; color: var(--av-text); margin-right: .3rem; }
.av-gcomment__user:hover { color: var(--av-text); }
.av-gcomment time { display: inline-block; margin-top: .3rem; font-size: .75rem; color: var(--av-text-muted); }
.av-gcomment__del { display: inline; margin-left: .75rem; }
.av-gcomment__del button { padding: 0; border: 0; background: none; font-size: .75rem; color: var(--av-text-muted); cursor: pointer; }
.av-gcomment__del button:hover { color: var(--av-danger); }
.av-gcomment--caption { padding-bottom: 1rem; border-bottom: 1px solid var(--av-border-soft); }
.av-gpost__nocomment { display: grid; place-items: center; gap: .25rem; padding: 2.5rem 0; text-align: center; }
.av-gpost__nocomment strong { font-size: 1.1rem; }
.av-gpost__nocomment span { color: var(--av-text-muted); font-size: .9rem; }

.av-gpost__bar { padding: .5rem 1rem .75rem; border-top: 1px solid var(--av-border-soft); }
.av-gpost__actions { display: flex; align-items: center; gap: .15rem; margin-left: -.5rem; }
.av-gpost__actions form { margin: 0; }
.av-gaction {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--av-text);
  font-size: 1.45rem;
  cursor: pointer;
  transition: color var(--av-dur-fast), transform var(--av-dur-fast);
}
.av-gaction:hover { color: var(--av-text-muted); text-decoration: none; }
.av-gaction:active { transform: scale(.88); }
.av-gaction:focus-visible { outline: none; box-shadow: var(--av-ring); }
.av-gaction--like.is-liked,
.av-gaction--like.is-liked:hover { color: #ff3040; }
.av-gaction.is-pop { animation: av-gpop .45s var(--av-ease-out); }
@keyframes av-gpop { 0% { transform: scale(1); } 35% { transform: scale(1.3); } 100% { transform: scale(1); } }
.av-gpost__views { margin-left: auto; font-size: .85rem; color: var(--av-text-muted); }
.av-gpost__likes { margin: .15rem 0 .1rem; font-size: .95rem; }
.av-gpost__likes strong { font-weight: 700; }
.av-gpost__date { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--av-text-muted); }

.av-gpost__form {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .5rem .35rem 1rem;
  border-top: 1px solid var(--av-border-soft);
}
.av-gpost__form input {
  flex: 1;
  min-width: 0;
  height: 46px;
  border: 0;
  background: transparent;
  color: var(--av-text);
  font: inherit;
  outline: none;
}
.av-gpost__form input::placeholder { color: var(--av-text-muted); }
.av-gpost__form button {
  padding: .5rem .75rem;
  border: 0;
  background: none;
  color: var(--av-primary);
  font-weight: 700;
  cursor: pointer;
}
.av-gpost__form input:placeholder-shown + button { opacity: .45; }
.av-gpost__err { display: block; padding: 0 1rem .75rem; }
.av-gpost__login { margin: 0; padding: 1rem; border-top: 1px solid var(--av-border-soft); font-size: .9rem; color: var(--av-text-muted); }
.av-gpost__login a { font-weight: 700; }

/* Ordinateur : photo à gauche, discussion à droite */
@media (min-width: 900px) {
  .av-gpost {
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-rows: auto;
    max-width: 1120px;
    margin-inline: auto;
  }
  .av-gpost__media { aspect-ratio: var(--av-ratio, 1); max-height: calc(100vh - 140px); min-height: 480px; }
  .av-gpost__media .av-gpost__track { position: absolute; inset: 0; }
  .av-gpost__side { contain: size; border-left: 1px solid var(--av-border-soft); }
}

/* Mobile : ordre Instagram (auteur, photo, actions, légende, commentaires) */
@media (max-width: 899px) {
  .av-gpost { margin-inline: -18px; border-radius: 0; border-left: 0; border-right: 0; }
  .av-gpost__media { max-height: 80vh; }
  .av-gpost__side { display: contents; }
  .av-gpost__head    { order: 1; }
  .av-gpost__media   { order: 2; }
  .av-gpost__bar     { order: 3; border-top: 0; }
  .av-gpost__thread  { order: 4; padding-top: .25rem; max-height: none; overflow: visible; }
  .av-gpost__form    { order: 5; }
  .av-gpost__err     { order: 6; }
  .av-gpost__login   { order: 5; }
}

/* Plus de publications */
.av-gmore { max-width: 1120px; margin: 0 auto var(--av-space-7); padding-top: var(--av-space-5); border-top: 1px solid var(--av-border-soft); }
.av-gmore__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: var(--av-space-4); }
.av-gmore__head h2 { margin: 0; font-family: var(--av-font-body); font-size: .95rem; font-weight: 600; color: var(--av-text-muted); }
.av-gmore__head h2 a { color: var(--av-text); }
.av-gmore__all { font-size: .875rem; font-weight: 600; white-space: nowrap; }
.av-ggrid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 900px) { .av-ggrid--compact { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ---------- Profil d'un membre ---------- */
.av-gprofile {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(1.25rem, 6vw, 5rem);
  max-width: 935px;
  margin: 0 auto var(--av-space-6);
  padding: var(--av-space-4) clamp(0rem, 4vw, 3rem);
}
.av-gprofile__info { display: grid; gap: 1rem; min-width: 0; }
.av-gprofile__top { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.av-gprofile__top h1 { margin: 0; font-family: var(--av-font-body); font-size: 1.4rem; font-weight: 600; overflow-wrap: anywhere; }
.av-gprofile__stats { display: flex; gap: 2rem; margin: 0; padding: 0; list-style: none; }
.av-gprofile__stats strong { font-weight: 700; }
.av-gprofile__bio { display: grid; justify-items: start; gap: .4rem; font-size: .95rem; }
.av-gprofile__links { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .9rem; }
.av-gprofile__links a { font-weight: 600; }
@media (max-width: 575px) {
  .av-gprofile { gap: 1.25rem; padding: var(--av-space-3) 0; }
  .av-gprofile__top h1 { font-size: 1.15rem; }
  .av-gprofile__stats { gap: 1.25rem; font-size: .9rem; }
}

.av-gtabs {
  display: flex;
  justify-content: center;
  max-width: 935px;
  margin: 0 auto 2px;
  border-top: 1px solid var(--av-border);
}
.av-gtabs__tab {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: -1px;
  padding: .9rem 0;
  border-top: 1px solid var(--av-text);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.av-gprofile ~ .av-ggrid,
.av-gprofile ~ .av-gempty { max-width: 935px; margin-inline: auto; }

/* ---------- Page d'envoi ---------- */
.av-gnew__alert { margin-bottom: var(--av-space-4); }
.av-gnew__grid { display: grid; gap: var(--av-space-4); align-items: start; }
@media (min-width: 992px) { .av-gnew__grid { grid-template-columns: minmax(0, 1fr) 380px; } }

.av-gdrop {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: .6rem;
  min-height: 420px;
  margin: 0;
  padding: 2rem 1rem;
  border: 2px dashed var(--av-border);
  border-radius: 14px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--av-dur), background var(--av-dur);
}
.av-gdrop:hover,
.av-gdrop.is-over { border-color: var(--av-primary); background: var(--av-primary-soft); }
.av-gdrop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.av-gdrop__icon { font-size: 3.2rem; color: var(--av-text-soft); line-height: 1; margin-bottom: .5rem; }
.av-gdrop strong { font-size: 1.2rem; font-weight: 600; }
.av-gdrop > span:not(.av-btn):not(.av-gdrop__icon) { color: var(--av-text-muted); font-size: .9rem; }
.av-gdrop small { margin-top: .5rem; color: var(--av-text-muted); }
.av-gdrop.is-compact { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 575px) { .av-gdrop { min-height: 300px; } }

.av-gpreview { display: grid; gap: .85rem; }
.av-gpreview[hidden] { display: none; }
.av-gpreview__main {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
}
.av-gpreview__main img { width: 100%; height: 100%; object-fit: contain; }
.av-gpreview__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: .25rem .65rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
}
.av-gpreview__badge[hidden] { display: none; }
.av-gpreview__strip { display: flex; flex-wrap: wrap; gap: .6rem; }
.av-gpreview__thumb { position: relative; width: 76px; height: 76px; }
.av-gpreview__pick {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 10px;
  background: var(--av-surface-2);
  cursor: pointer;
}
.av-gpreview__pick img { width: 100%; height: 100%; object-fit: cover; }
.av-gpreview__thumb.is-active .av-gpreview__pick { border-color: var(--av-primary); }
.av-gpreview__remove,
.av-gpreview__cover {
  position: absolute;
  top: -7px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 2px solid var(--av-surface);
  border-radius: 50%;
  font-size: .65rem;
  cursor: pointer;
}
.av-gpreview__remove { right: -7px; background: #111; color: #fff; }
.av-gpreview__remove:hover { background: var(--av-danger); }
.av-gpreview__cover { left: -7px; background: var(--av-surface-3); color: var(--av-text-muted); }
.av-gpreview__cover:hover { color: var(--av-warning); }
.av-gpreview__tag {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  padding: .1rem 0;
  border-radius: 6px;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .05em;
  pointer-events: none;
}
.av-gpreview__add {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 2px dashed var(--av-border);
  border-radius: 10px;
  background: none;
  color: var(--av-text-muted);
  font-size: 1.2rem;
  cursor: pointer;
}
.av-gpreview__add:hover { border-color: var(--av-primary); color: var(--av-primary); }
.av-gpreview__add[hidden] { display: none; }

.av-gnew__author { display: flex; align-items: center; gap: .65rem; margin-bottom: 1.1rem; }
.av-gnew__counter { justify-self: end; }
.av-gnew__progress { display: grid; gap: .4rem; margin-bottom: 1rem; }
.av-gnew__progress[hidden] { display: none; }
.av-gnew__progress-bar { height: 6px; overflow: hidden; border-radius: 999px; background: var(--av-surface-3); }
.av-gnew__progress-bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--av-primary); transition: width .2s linear; }
.av-gnew__note { display: flex; gap: .5rem; align-items: flex-start; margin: .9rem 0 0; line-height: 1.45; }
.av-gnew__note i { margin-top: .15rem; color: var(--av-success); }
.av-gnew__details .av-authx__control .av-input { background: var(--av-bg); }

/* Ajustements */
@media (min-width: 900px) {
  .av-gpost__media { width: 100%; }               /* la photo occupe toute la colonne, bandes noires si besoin */
}
@media (min-width: 992px) {
  .av-ggrid--explore { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.av-gnew__grid .av-panel + .av-panel { margin-top: 0; }

/* La photo est toujours affichée en entier dans le cadre (jamais rognée) */
.av-gpost__slide { position: relative; height: 100%; }
.av-gpost__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }