@media (max-width: 640px) {

  /* ── Layout global ── */
  .videos-app {
    padding: 10px 6px calc(var(--rv-nav-h) + var(--rv-nav-safe) + 8px) 6px;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  /* ── Header / logo ── */
  .vl-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    gap: 8px;
  }
  .vl-header h1 { font-size: 28pt; letter-spacing: 2px; }

  /* Cacher les boutons desktop inutiles sur mobile */
  .rv-tv-btn,
  .rv-help-panel,
  .rv-meta-btn,
  .rv-select-toggle-wrap,
  .rv-batch-bar,
  .vl-upload {
    display: none !important;
  }

  /* Boutons tri A-Z / Récent visibles sur mobile EN HAUT */
  .rv-sort-wrap {
    display: flex !important;
    justify-content: center !important;
    margin: 10px auto 6px !important;
    width: 100% !important;
    order: -1 !important;
  }
  .rv-sort-btn {
    padding: 7px 22px !important;
    font-size: 15px !important;
  }

  /* ── Onglets desktop → cachés (remplacés par nav bar) ── */
  .vl-tabs {
    display: none !important;
  }

  /* ── Barre de navigation mobile fixe en bas ── */
  .rv-mobile-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: calc(var(--rv-nav-h) + var(--rv-nav-safe));
    padding-bottom: var(--rv-nav-safe);
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid #e8e4de;
    display: flex;
    align-items: stretch;
    z-index: 10000;
    box-shadow: 0 -4px 24px rgba(0,0,0,.06);
  }
  .rv-mobile-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: none;
    background: transparent;
    color: #bbb;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .15s;
    padding-top: 8px;
    -webkit-tap-highlight-color: transparent;
  }
  .rv-mobile-nav-btn svg {
    width: 22px; height: 22px;
    stroke: currentColor; fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    transition: stroke .15s;
  }
  .rv-mobile-nav-btn.active {
    color: var(--rv-red);
  }
  .rv-mobile-nav-btn .rv-nav-dot {
    display: none;
    width: 4px; height: 4px;
    background: var(--rv-red);
    border-radius: 50%;
    margin-top: -1px;
  }
  .rv-mobile-nav-btn.active .rv-nav-dot { display: block; }

  /* ── Grille : 2 colonnes serrées ── */
  .grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .grid > * { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }

  /* ── Cards ── */
  .grid .video { width: 100% !important; box-sizing: border-box; }
  .grid .video img { height: auto; aspect-ratio: 2/3; object-fit: cover; }
  .video-info { padding: 7px 8px 9px; }
  .video-info p {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    margin-bottom: 2px;
  }
  .video-meta { font-size: 11px; }
  .rv-director {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rv-actors {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .vl-arrow { font-size: 18px; }

  /* ── Actions en dessous des cards : masquer pour abonnés ── */
  .video-actions-below { display: none; }

  /* ── Play overlay plus grand ── */
  .rv-play-overlay svg { width: 56px !important; height: 56px !important; }

  /* ── Panel épisodes ── */
  .ep-panel { border-radius: 0; margin: 0 -12px; padding: 0 12px !important; }
  .ep-panel.open { padding: 16px 12px !important; }

  .ep-row {
    padding: 14px 4px;
    min-height: 54px;
    gap: 6px;
  }
  .ep-code { font-size: 13px; min-width: 80px; }
  .ep-name { font-size: 14px; flex: 1; }
  .ep-pos  { font-size: 11px; }

  /* Cacher boutons admin dans épisodes */
  .ep-rename-btn, .ep-repair-btn, .ep-del-btn { display: none !important; }

  /* ── Modales ── */
  .rv-modal-box {
    width: 92vw !important;
    padding: 24px 20px !important;
    border-radius: 12px !important;
    position: fixed;
    bottom: calc(16px + var(--rv-nav-safe));
    left: 4vw;
    top: auto !important;
  }

  /* ── Modal reprise ── */
  #rvResumeModal > div {
    width: 90vw !important;
    padding: 28px 24px !important;
    border-radius: 12px;
  }

  /* ── Loader texte ── */
  .grid-empty {
    padding: 48px 16px;
    text-align: center;
    font-size: 14px;
    color: #bbb;
    letter-spacing: 1px;
  }

  /* ── Badge initiales ── */
  .rv-initial-dot { width: 18px; height: 18px; font-size: 11px; }
  .rv-initials-wrap { gap: 2px; top: 4px; right: 4px; }

  /* ── Badge vu ── */
  .rv-badge { top: 6px; right: 6px; }

  /* ── Login wall ── */
  .rv-login-box { padding: 36px 24px; width: calc(100vw - 40px); max-width: 400px; box-sizing: border-box; }
  .rv-login-field input { font-size: 16px; }
}
@media (max-width: 640px) {
  .rv-mobile-nav { display: flex; }
}
@media (max-width: 640px) {
  .rv-htl-year-pill { width: 44px; height: 44px; font-size: 13px; }
  .rv-htl-month-pill { width: 44px; height: 44px; font-size: 10px; }
  .rv-htl-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  #library.grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media(max-width:600px){.rv-htl-mp{width:48px;height:48px;font-size:10px;border-width:1px;}}
@media(max-width:500px){
  .chro-grid{grid-template-columns:repeat(3,1fr);}
  .chro-circle{width:54px;height:54px;font-size:13px;border-width:2px;}
  .chro-circle-month{width:54px;height:54px;font-size:11px;padding:0;border-width:2px;}
}
@media(max-width:640px){
  /* Famille/creations content grid */
  .rv-crea-grid{ grid-template-columns:repeat(2,1fr)!important; }
  .chro-grid{ grid-template-columns:repeat(3,1fr)!important; }
  .rv-htl-years{ gap:3px!important; margin-bottom:6px!important; }
  .rv-htl-yp{ width:54px!important; height:54px!important; font-size:13px!important; border-width:2px!important; }
  .rv-porga{ margin-bottom:0!important; }
  .rv-pcats{ gap:10px!important; margin-bottom:16px!important; }
  .rv-pcat-wrap{ width:calc(33% - 8px)!important; min-width:90px!important; border-radius:12px!important; }
  .rv-pcat-icon{ padding:18px 0 14px!important; }
  .rv-pcat-icon svg{ width:40px!important; height:36px!important; }
  .rv-pcat{ font-size:11px!important; letter-spacing:1.5px!important; padding:8px 4px 10px!important; }
  .chro-wrap{ padding:0!important; margin:0!important; }
  #chroContainer{ margin-top:0!important; padding-top:0!important; }
  .chro-years-row{ gap:3px!important; padding:0 0 3px!important; justify-content:flex-start!important; margin-top:0!important; }
  .chro-circle{ width:54px!important; height:54px!important; font-size:13px!important; border-width:2px!important; border-radius:50%!important; }
  .chro-circle-month{ width:54px!important; height:54px!important; font-size:11px!important; padding:0!important; border-width:2px!important; border-radius:50%!important; }
  .chro-months-row{ gap:3px!important; padding:0 0 3px!important; }
  .rv-psubs{ margin:0!important; padding:0!important; }
}
@media(max-width:640px){.rv-soundtrack-wrap{display:none!important;}}
@media (max-width: 640px) {
  .rv-pcat-wrap.active-cat {
    background: #1a1a1a !important;
    border-color: #1a1a1a !important;
    border: 1px solid #1a1a1a !important;
    box-shadow: 0 4px 18px rgba(0,0,0,.25) !important;
    border-radius: 12px !important;
  }
  .rv-pcat-wrap.active-cat .rv-pcat-icon {
    color: #fff !important;
  }
  .rv-pcat-wrap.active-cat .rv-pcat-icon svg path,
  .rv-pcat-wrap.active-cat .rv-pcat-icon svg rect,
  .rv-pcat-wrap.active-cat .rv-pcat-icon svg circle,
  .rv-pcat-wrap.active-cat .rv-pcat-icon svg polygon {
    stroke: #fff !important;
    fill: none !important;
  }
  .rv-pcat-wrap.active-cat .rv-pcat {
    color: #fff !important;
  }
}
@media (max-width: 640px) {
  .rv-fam-photos-mode #rvFamFixedSelectBtn,
  #rvFamFixedSelectBtn { display:none !important; }
}
@media (max-width: 640px) {
  #library .rv-pcats-small {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }
}

/* ── rv-pcat-wrap reset (iOS button/span) ── */
#library .rv-pcat-wrap,
#library .rv-pcat-wrap.active-cat,
#library .rv-pcat-wrap:hover {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.rv-pcat-wrap:hover .hexa-bg,
.rv-pcat-wrap.active .hexa-bg { fill: #1a1a1a !important; }

span.rv-pcat {
  display: block;
  border: none;
  background: none;
  color: #555;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
  transition: color .18s;
}
span.rv-pcat.active { color: #1a1a1a; }
.rv-pcat-wrap:active span.rv-pcat { color: #1a1a1a !important; }

@media (max-width: 640px) {
  span.rv-pcat { font-size: 10px !important; letter-spacing: 1px !important; }
  #library .rv-pcat-wrap { padding: 10px 8px 8px !important; gap: 3px !important; border-radius: 12px !important; background: none !important; box-shadow: none !important; width: 100% !important; box-sizing: border-box !important; }
  #library .rv-pcat-icon { display: flex !important; align-items: center !important; justify-content: center !important; }
  #library .rv-pcat-icon svg, #library .rv-pcat-icon > svg { width: 52px !important; height: 52px !important; }
  #library > .rv-porga, #library > #chroContainer { grid-column: 1 / -1 !important; width: 100% !important; }
  #library .rv-porga { touch-action: manipulation !important; padding: 8px 0 0 !important; }
  #library .rv-pcat-wrap { touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; user-select: none !important; -webkit-user-select: none !important; }
  #library .rv-pcats { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important; justify-items: center !important; gap: 6px !important; width: 100% !important; margin-bottom: 12px !important; padding: 0 4px !important; box-sizing: border-box !important; }
  #library .rv-pcats-small { display: flex !important; flex-direction: row !important; justify-content: center !important; flex-wrap: wrap !important; gap: 8px !important; width: 100% !important; margin-bottom: 6px !important; padding: 0 2px !important; }
  #library .rv-pcat-wrap--sm { display: flex !important; flex-direction: column !important; align-items: center !important; padding: 6px 2px 5px !important; gap: 2px !important; border-radius: 10px !important; background: #f5f4f0 !important; flex: 1 1 0 !important; min-width: 0 !important; max-width: 80px !important; align-self: flex-start !important; }
  #library .rv-pcat-wrap--sm .rv-pcat-icon svg, #library .rv-pcat-wrap--sm .rv-pcat-icon > svg { width: 32px !important; height: 32px !important; }
  #library .rv-pcat-wrap--sm.rv-fam-dyncat .rv-pcat-icon svg, #library .rv-pcat-wrap--sm.rv-fam-dyncat .rv-pcat-icon > svg { width: 48px !important; height: 48px !important; }
  #library .rv-pcat-wrap--sm.rv-fam-dyncat, #library .rv-pcat-wrap--sm.rv-fam-sub-hex { padding: 2px 1px 2px !important; gap: 0px !important; }
  #library .rv-pcat-wrap--sm.rv-fam-sub-hex .rv-pcat-icon svg, #library .rv-pcat-wrap--sm.rv-fam-sub-hex .rv-pcat-icon > svg { width: 48px !important; height: 48px !important; }
  #library .rv-pcat-wrap--sm .rv-pcat { font-size: 8px !important; letter-spacing: .5px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; width: 100% !important; margin-top: -16px !important; }
  #library .rv-pcat-wrap--sm.rv-fam-dyncat .rv-pcat, #library .rv-pcat-wrap--sm.rv-fam-sub-hex .rv-pcat, #library .rv-pcat-wrap--sm[data-famcat] .rv-pcat { margin-top: -4px !important; }
  #library .rv-pcat-wrap--sm[data-tab="dessins"] .rv-pcat, #library .rv-pcat-wrap--sm[data-tab="creations"] .rv-pcat, #library .rv-pcat-wrap--sm[data-tab="musique"] .rv-pcat,#library .rv-pcat-wrap--sm[data-tab="famille"] .rv-pcat { margin-top: -8px !important; }
  #library .rv-pcats-divider { border: none !important; border-top: 1px solid #f0eeea !important; width: 100% !important; margin: 0 !important; }
  #library .rv-pcats-active-row { display: flex !important; justify-content: center !important; width: 100% !important; margin-bottom: 0 !important; }
  #library .rv-pcat-wrap--active { padding: 12px 20px 10px !important; gap: 5px !important; border-radius: 14px !important; background: none !important; box-shadow: none !important; width: auto !important; }
  #library .rv-pcat-wrap--active .rv-pcat-icon svg, #library .rv-pcat-wrap--active .rv-pcat-icon > svg { width: 60px !important; height: 60px !important; }
  #library .rv-pcat-wrap--active .rv-pcat { font-size: 12px !important; letter-spacing: 1.5px !important; }
  #rv-music-wrap .rv-alb-grid { grid-template-columns: repeat(2, 1fr) !important; }
  #library .rv-crea-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #library .rv-psubs { display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: flex-end !important; flex-wrap: wrap !important; gap: 16px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
  #library .rv-psubs .rv-psub-hex { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-end !important; gap: 0px !important; cursor: pointer !important; padding: 6px 8px 5px !important; border-radius: 12px !important; background: none !important; border: none !important; flex: 1 1 0 !important; min-width: 100px !important; max-width: 150px !important; }
  #library .rv-psubs .rv-psub-hex:hover { background: rgba(0,0,0,.04) !important; }
  #library .rv-psubs .rv-psub-hex svg { width: 36px !important; height: 36px !important; display: block !important; }
  #library .rv-psubs .rv-psub-hex svg[viewBox="0 0 196.88 225.08"] { width: 70px !important; height: 80px !important; }
  #library .rv-psubs .rv-psub-hex .rv-psub-label { font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: #555 !important; text-align: center !important; white-space: normal !important; word-break: break-word !important; line-height: 1.2 !important; transition: color .18s !important; }
  #library .rv-psubs .rv-psub-hex.active .hexa-bg { fill: #1a1a1a !important; }
  #library .rv-psubs .rv-psub-hex.active .rv-psub-label { color: #1a1a1a !important; }
  #library .rv-htl, #library .chro-wrap { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
  #library #chroContainer { margin-top: 0 !important; padding-top: 0 !important; }
  #library .rv-htl-years, #library .chro-years-row { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; gap: 2px !important; margin-bottom: 4px !important; padding: 0 2px !important; }
  #library .rv-htl-years .rv-htl-yp { min-width: 56px !important; height: 32px !important; padding: 0 12px !important; border-radius: 16px !important; font-size: 13px !important; border-width: 1px !important; }
  #library .rv-htl-months, #library .chro-months-row { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; gap: 6px !important; margin-bottom: 10px !important; }
  #library .rv-htl-months .rv-htl-mp { min-width: 48px !important; height: 32px !important; padding: 0 12px !important; border-radius: 16px !important; background: #f5f4f0 !important; border: 1px solid #e8e5e0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important; text-align: center !important; line-height: 1 !important; cursor: pointer !important; white-space: nowrap !important; }
  #library .rv-htl-months .rv-htl-mp.active { background: #e03030 !important; color: #fff !important; border-color: #e03030 !important; }
  #library .rv-htl-section { display: block !important; width: 100% !important; }
  #library .chro-year-block, #library .chro-month-block { width: 100% !important; }
}

/* ── Tailles labels catégories et sous-dossiers mobile ── */
@media (max-width: 640px) {
  #library .rv-pcat-wrap--active span.rv-pcat {
    font-size: 20px !important;
    font-weight: 400 !important;
    letter-spacing: 1.5px !important;
    margin-top: 0 !important;
  }
  #library .rv-pcat-wrap--sm span.rv-pcat,
  #library [data-tab]:not(.active-cat):not(.rv-pcat-wrap--active) span.rv-pcat {
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 1.5px !important;
    margin-top: -16px !important;
  }
  #library .rv-pcat-wrap--sm[data-tab="dessins"]:not(.active-cat) span.rv-pcat,
  #library .rv-pcat-wrap--sm[data-tab="creations"]:not(.active-cat) span.rv-pcat,
  #library .rv-pcat-wrap--sm[data-tab="musique"]:not(.active-cat) span.rv-pcat,
  #library .rv-pcat-wrap--sm[data-tab="famille"]:not(.active-cat) span.rv-pcat { margin-top: -8px !important; }
  #library .rv-psub-hex .rv-psub-label,
  #library .rv-fam-sub-hex .rv-psub-label {
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 1.5px !important;
    margin-top: -5px !important;
  }
}

/* ── Tailles SVG et espacements catégories mobile ── */
@media (max-width: 640px) {
  #library .rv-pcats .rv-pcat-icon svg,
  #library [data-tab]:not(.active-cat):not(.rv-pcat-wrap--active) .rv-pcat-icon svg {
    width: 48px !important;
    height: 48px !important;
  }
  #library [data-tab].active-cat .rv-pcat-icon svg,
  #library [data-tab].rv-pcat-wrap--active .rv-pcat-icon svg {
    width: 64px !important;
    height: 72px !important;
  }
  #library .rv-pcats [data-tab] .rv-pcat-icon {
    height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #library [data-tab].active-cat,
  #library [data-tab].rv-pcat-wrap--active {
    gap: 0px !important;
    padding: 0px 12px 0px !important;
  }
  #library [data-tab].active-cat .rv-pcat-icon,
  #library [data-tab].rv-pcat-wrap--active .rv-pcat-icon {
    padding: 0 !important;
    margin: 0 !important;
    height: 80px !important;
    overflow: visible !important;
  }
  #library [data-tab]:not(.active-cat):not(.rv-pcat-wrap--active) {
    gap: 0px !important;
    padding: 2px 1px 2px !important;
    min-width: 60px !important;
  }
  #library [data-tab]:not(.active-cat):not(.rv-pcat-wrap--active) span.rv-pcat {
    white-space: nowrap !important;
    overflow: visible !important;
  }
  #library [data-tab]:not(.active-cat):not(.rv-pcat-wrap--active) .rv-pcat-icon {
    padding: 0 !important;
    margin: 0 !important;
    height: 54px !important;
    overflow: hidden !important;
  }
  #library .rv-psub-hex .rv-fam-ico-wrap svg,
  #library .rv-fam-sub-hex svg,
  #library .rv-psubs svg {
    width: 48px !important;
    height: 48px !important;
  }
  #library .rv-psub-hex,
  #library .rv-fam-sub-hex,
  #library .rv-psubs .rv-psub {
    gap: 0px !important;
    padding-bottom: 2px !important;
  }
}