:root {
  color-scheme: dark;
  --vv-bg: #07080b;
  --vv-panel: #111318;
  --vv-panel-2: #171a21;
  --vv-border: rgba(255, 255, 255, 0.1);
  --vv-text: #f4f4f5;
  --vv-muted: #a1a1aa;
  --vv-accent: #e11d48;
  --vv-accent-2: #f59e0b;
  --vv-good: #22c55e;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--vv-bg);
  color: var(--vv-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input {
  font: inherit;
}

[hidden] {
  display: none !important;
}

.vv-app {
  min-height: 100vh;
}

.vv-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px clamp(16px, 4vw, 42px);
  border-bottom: 1px solid var(--vv-border);
  background: rgba(7, 8, 11, 0.92);
  backdrop-filter: blur(16px);
}

.vv-brand,
.vv-header-actions,
.vv-actions,
.vv-tabs {
  display: flex;
  align-items: center;
}

.vv-brand {
  gap: 12px;
  min-width: 0;
}

.vv-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--vv-accent), #7f1d1d);
  color: white;
  font-size: 28px;
  font-weight: 900;
}

.vv-brand h1,
.vv-brand p {
  margin: 0;
}

.vv-brand h1 {
  font-size: 24px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vv-brand p {
  color: var(--vv-muted);
  font-size: 13px;
}

.vv-header-actions {
  gap: 10px;
}

.vv-menu-link,
.vv-primary,
.vv-secondary,
.vv-tab {
  min-height: 38px;
  border: 1px solid var(--vv-border);
  border-radius: 6px;
  padding: 8px 13px;
  color: var(--vv-text);
  text-decoration: none;
  cursor: pointer;
}

.vv-menu-link,
.vv-secondary,
.vv-tab {
  background: var(--vv-panel);
}

.vv-primary {
  border-color: color-mix(in srgb, var(--vv-accent) 70%, white);
  background: var(--vv-accent);
  font-weight: 700;
}

.vv-tab.is-active {
  border-color: var(--vv-accent);
  background: color-mix(in srgb, var(--vv-accent) 22%, var(--vv-panel));
}

.vv-main {
  width: min(1320px, 100%);
  margin: 0 auto;
  padding: 24px clamp(14px, 3vw, 34px) 64px;
}

.vv-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.vv-tabs,
.vv-actions {
  gap: 8px;
  flex-wrap: wrap;
}

.vv-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
}

.vv-crumb {
  margin: 0;
  overflow: hidden;
  max-width: 46vw;
  font-size: 19px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vv-status {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--vv-border);
  border-left: 3px solid var(--vv-accent-2);
  border-radius: 7px;
  background: var(--vv-panel);
  color: var(--vv-muted);
}

.vv-status.is-error {
  border-left-color: var(--vv-accent);
  color: #fecdd3;
}

.vv-add-panel {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}

.vv-drop-zone,
.vv-url-form {
  display: grid;
  gap: 12px;
  align-content: center;
  min-height: 165px;
  padding: 18px;
  border: 1px dashed var(--vv-border);
  border-radius: 8px;
  background: var(--vv-panel);
}

.vv-drop-zone.is-dragging {
  border-color: var(--vv-accent);
  background: color-mix(in srgb, var(--vv-accent) 12%, var(--vv-panel));
}

.vv-drop-zone strong {
  font-size: 20px;
}

.vv-drop-zone span,
.vv-url-form label {
  color: var(--vv-muted);
}

.vv-url-form div {
  display: flex;
  gap: 8px;
}

.vv-url-form input {
  min-width: 0;
  flex: 1;
  border: 1px solid var(--vv-border);
  border-radius: 6px;
  padding: 10px 11px;
  background: #050507;
  color: var(--vv-text);
}

/* ---------------------------------------------------------------- */
/* Ecran d'accueil : les dossiers presentes comme des mini-apps      */
/* ---------------------------------------------------------------- */

.vv-folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 20px 18px;
}

.vv-folder {
  position: relative;
  margin-top: 10px;
}

.vv-folder-main {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--vv-text);
  text-align: left;
  cursor: pointer;
}

.vv-folder-preview {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  aspect-ratio: 1;
  margin-bottom: 10px;
  padding: 3px;
  /* Pas d'overflow:hidden ici : la languette du dossier deborde vers le haut.
     Chaque vignette a deja son propre arrondi. */
  border: 1px solid var(--vv-border);
  border-radius: 16px;
  background: linear-gradient(160deg, var(--vv-panel-2), #0b0d12);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* Languette : c'est ce qui fait lire la vignette comme un dossier. */
.vv-folder-preview::before {
  content: '';
  position: absolute;
  top: -11px;
  left: 14px;
  width: 42%;
  height: 13px;
  border: 1px solid var(--vv-border);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #262a33;
  transition: background 0.15s;
}

.vv-folder-main:hover .vv-folder-preview::before,
.vv-folder-main:focus-visible .vv-folder-preview::before {
  background: var(--vv-accent);
}

.vv-folder-main:hover .vv-folder-preview,
.vv-folder-main:focus-visible .vv-folder-preview {
  border-color: var(--vv-accent);
  box-shadow: 0 14px 30px rgba(225, 29, 72, 0.28);
}

.vv-folder-thumb {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 9px;
  background: #030305;
  color: var(--vv-muted);
  font-size: 18px;
}

/* Un seul média : l'aperçu occupe toute la vignette. */
.vv-folder-thumb:first-child:last-child {
  grid-area: 1 / 1 / 3 / 3;
}

.vv-folder-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vv-folder-empty {
  display: grid;
  grid-area: 1 / 1 / 3 / 3;
  place-items: center;
  color: var(--vv-muted);
  opacity: 0.35;
}

.vv-folder-empty svg {
  width: 46%;
  height: auto;
}

.vv-folder-name {
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vv-folder-count {
  color: var(--vv-muted);
  font-size: 12px;
}

.vv-folder-tools {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 5px;
  opacity: 0;
  transition: opacity 0.15s;
}

.vv-folder:hover .vv-folder-tools,
.vv-folder:focus-within .vv-folder-tools {
  opacity: 1;
}

.vv-folder-tools .vv-icon-button {
  width: 28px;
  height: 28px;
  background: rgba(10, 11, 15, 0.86);
  backdrop-filter: blur(6px);
}

.vv-grid {
  columns: 4 240px;
  column-gap: 16px;
}

.vv-card {
  break-inside: avoid;
  display: grid;
  margin: 0 0 16px;
  overflow: hidden;
  border: 1px solid var(--vv-border);
  border-radius: 8px;
  background: var(--vv-panel);
}

.vv-card-media {
  display: grid;
  place-items: center;
  min-height: 140px;
  background: #030305;
}

.vv-card-media.is-clickable {
  cursor: zoom-in;
}

.vv-card-media.is-clickable:focus-visible {
  outline: 2px solid var(--vv-accent);
  outline-offset: -2px;
}

.vv-card-media img,
.vv-card-media video {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
}

.vv-card-media iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.vv-card-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-top: 1px solid var(--vv-border);
}

.vv-card-title {
  overflow: hidden;
  color: var(--vv-muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vv-card-tools {
  display: flex;
  gap: 6px;
}

.vv-icon-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--vv-border);
  border-radius: 6px;
  background: var(--vv-panel-2);
  color: var(--vv-text);
  cursor: pointer;
}

.vv-icon-button:hover {
  border-color: var(--vv-accent);
}

.vv-icon-button svg {
  width: 17px;
  height: 17px;
}

.vv-empty {
  display: grid;
  place-items: center;
  min-height: 260px;
  padding: 26px;
  border: 1px dashed var(--vv-border);
  border-radius: 8px;
  color: var(--vv-muted);
  text-align: center;
}

.vv-viewer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 56px 18px 18px;
  background: rgba(0, 0, 0, 0.94);
}

.vv-viewer[hidden] {
  display: none;
}

.vv-viewer-close {
  position: fixed;
  top: 14px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--vv-border);
  border-radius: 50%;
  background: var(--vv-panel);
  color: var(--vv-text);
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
}

.vv-viewer-content {
  width: min(1100px, 100%);
  max-height: 86vh;
}

.vv-viewer-content img,
.vv-viewer-content video,
.vv-viewer-content iframe {
  display: block;
  width: 100%;
  max-height: 86vh;
  border: 0;
  object-fit: contain;
}

.vv-viewer-content iframe {
  aspect-ratio: 16 / 9;
  background: black;
}

/* ---------------------------------------------------------------- */
/* Boite de dialogue : deplacer un media vers un autre dossier       */
/* ---------------------------------------------------------------- */

.vv-modal {
  position: fixed;
  inset: 0;
  /* Au-dessus du bouton flottant « Paramètres » du site (z-index 999). */
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.74);
}

.vv-modal[hidden] {
  display: none;
}

.vv-modal-card {
  display: grid;
  gap: 12px;
  width: min(430px, 100%);
  padding: 20px;
  border: 1px solid var(--vv-border);
  border-radius: 12px;
  background: var(--vv-panel);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.vv-modal-card h2 {
  margin: 0;
  font-size: 19px;
}

.vv-modal-target {
  margin: 0;
  overflow: hidden;
  color: var(--vv-muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vv-modal-card label {
  color: var(--vv-muted);
  font-size: 13px;
}

.vv-modal-card select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--vv-border);
  border-radius: 6px;
  padding: 9px 10px;
  background: #050507;
  color: var(--vv-text);
  font: inherit;
}

.vv-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

/* ---------------------------------------------------------------- */
/* Diaporama plein ecran                                             */
/* ---------------------------------------------------------------- */
/* Regle intangible : les images ne se deplacent JAMAIS. Une image    */
/* s'efface en opacite pendant que la suivante apparait. Aucune       */
/* translation, aucun transform sur les calques ni sur leurs images.  */

body.vv-no-scroll {
  overflow: hidden;
}

.vv-show {
  position: fixed;
  inset: 0;
  /* Au-dessus du bouton flottant « Paramètres » du site (z-index 999). */
  z-index: 1200;
  background: #000;
  /* Duree du fondu, pilotee par le JS d'apres l'intervalle choisi :
     min(900 ms, intervalle x 0,4), et 0 sous 250 ms d'intervalle. */
  --vv-show-fade: 900ms;
}

.vv-show[hidden] {
  display: none;
}

.vv-show-stage {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.vv-show-layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 2vmin;
  opacity: 0;
  pointer-events: none;
  /* Seule l'opacite est animee : aucun transform, aucune translation. */
  transition: opacity var(--vv-show-fade, 900ms) ease-in-out;
}

.vv-show-layer.is-active {
  opacity: 1;
}

/* Premiere image, ou intervalle trop court pour un fondu : affichage direct. */
.vv-show-layer.is-instant {
  transition: none;
}

.vv-show-layer img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Voile sombre en bas : garde la legende et la barre lisibles quelle que
   soit l'image affichee. Il apparait et disparait avec les commandes. */
.vv-show::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 160px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.vv-show.is-chrome::after {
  opacity: 1;
}

.vv-show-caption,
.vv-show-bar {
  position: absolute;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.vv-show.is-chrome .vv-show-caption {
  opacity: 1;
}

.vv-show.is-chrome .vv-show-bar {
  opacity: 1;
  pointer-events: auto;
}

/* Legende juste au-dessus de la barre : le haut de l'ecran peut etre occupe
   par le bandeau d'authentification du site. */
.vv-show-caption {
  left: 0;
  right: 0;
  bottom: 78px;
  margin: 0;
  padding: 0 20px;
  color: var(--vv-text);
  font-size: 13px;
  text-align: center;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

.vv-show-bar {
  left: 0;
  right: 0;
  bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 14px;
}

.vv-show-bar > * {
  border: 1px solid var(--vv-border);
  border-radius: 8px;
  background: rgba(17, 19, 24, 0.9);
  backdrop-filter: blur(10px);
}

.vv-show-button {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  color: var(--vv-text);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.vv-show-button svg {
  width: 19px;
  height: 19px;
}

.vv-show-button:hover {
  border-color: var(--vv-accent);
  background: color-mix(in srgb, var(--vv-accent) 26%, rgba(17, 19, 24, 0.9));
}

/* Reglage de la vitesse : saisie precise en millisecondes + raccourcis. */
.vv-show-speed {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 44px;
  padding: 5px 12px;
  color: var(--vv-muted);
  font-size: 13px;
}

.vv-show-speed-field {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vv-show-speed input[type='number'] {
  width: 82px;
  min-height: 30px;
  border: 1px solid var(--vv-border);
  border-radius: 6px;
  padding: 3px 6px;
  background: #050507;
  color: var(--vv-text);
  font: inherit;
  text-align: right;
}

.vv-show-speed input[type='number']:focus {
  outline: none;
  border-color: var(--vv-accent);
}

.vv-show-speed-unit {
  color: var(--vv-muted);
}

/* Rappel de l'unite reelle : « 250 ms » sous la seconde, « 2,5 s » au-dela. */
.vv-show-speed-value {
  min-width: 52px;
  color: var(--vv-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.vv-show-presets {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.vv-show-preset {
  min-height: 28px;
  border: 1px solid var(--vv-border);
  border-radius: 6px;
  padding: 0 8px;
  background: rgba(5, 5, 7, 0.9);
  color: var(--vv-muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.vv-show-preset:hover {
  border-color: var(--vv-accent);
  color: var(--vv-text);
}

.vv-show-preset.is-active {
  border-color: var(--vv-accent);
  background: color-mix(in srgb, var(--vv-accent) 26%, rgba(5, 5, 7, 0.9));
  color: var(--vv-text);
}

@media (max-width: 760px) {
  .vv-header,
  .vv-toolbar,
  .vv-url-form div {
    align-items: stretch;
    flex-direction: column;
  }

  .vv-header-actions {
    justify-content: space-between;
  }

  .vv-add-panel {
    grid-template-columns: 1fr;
  }

  .vv-toolbar-left {
    align-items: center;
  }

  .vv-crumb {
    max-width: 100%;
  }

  .vv-folder-grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  }

  /* Tactile : pas de survol, les outils du dossier restent visibles. */
  .vv-folder-tools {
    opacity: 1;
  }

  .vv-show-bar {
    bottom: 12px;
  }
}

.vv-external-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  min-height: 150px;
  padding: 16px;
  text-align: center;
  text-decoration: none;
  color: var(--vv-text);
  background: linear-gradient(160deg, var(--vv-panel), var(--vv-panel-2));
  transition: background 0.15s;
}

.vv-external-link:hover {
  background: var(--vv-panel-2);
}

.vv-external-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--vv-accent);
  color: #fff;
  font-size: 15px;
}

.vv-external-link small {
  color: var(--vv-muted);
  overflow-wrap: anywhere;
}