.site-header{background:var(--color-header);position:sticky;top:0;z-index:1000}
.site-header .header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:.75rem 2rem}
.site-header .logo img{height:60px;width:auto;display:block}

:root{--color-header:#161B2F;--color-bg:#0d1117;--color-surface:#2f2f4f;--color-primary:#5A7184;--color-secondary:#C4A35A;--color-accent:#F0F0F0;--color-text:#ececec;--color-muted:#999;--trans-dur:.6s;--blur-max:20px;--anim-ease:cubic-bezier(.55,.085,.68,.53)}

*{margin:0;padding:0;box-sizing:border-box}
body{position:relative;background:var(--color-bg);color:var(--color-text);overflow-x:hidden;font-family:'Geomanist',sans-serif}
body::before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,.05);pointer-events:none;z-index:0}
a{text-decoration:none;color:var(--color-primary);transition:color .3s}
a:hover{color:var(--color-secondary)}
ul{list-style:none}

header{display:flex;align-items:center;justify-content:space-between;background:var(--color-header);padding:.75rem 2rem;position:sticky;top:0;z-index:100;backdrop-filter:blur(10px)}
.header-left{display:flex;align-items:center;gap:1.5rem}
.site-logo img{height:60px;width:auto;display:block}
.member-bar{display:flex;align-items:center;font-size:.9rem}
.member-bar a{margin-left:1rem;color:var(--color-text);transition:color .3s}
.member-bar a:hover{color:var(--color-primary)}
nav{flex:1;text-align:center}
nav ul{display:inline-flex;gap:2rem}
nav a{color:var(--color-text);font-weight:600}
nav a:hover{color:var(--color-primary)}

.hamburger-btn{display:none;flex-direction:column;justify-content:space-between;width:30px;height:24px;background:none;border:none;cursor:pointer;padding:0;z-index:2000}
.hamburger-btn .bar{display:block;width:100%;height:3px;background-color:#fff;border-radius:1px;margin-bottom:4px}
.hamburger-btn .bar:last-child{margin-bottom:0}

footer{text-align:center;padding:1rem;background:#fff;color:#666;font-size:.9rem}
footer .footer-links{display:flex;justify-content:center;gap:1.5rem}
footer .footer-links a{color:var(--color-primary)}
@media(max-width:480px){
  footer{padding:.5rem;font-size:.75rem}
  footer .footer-links{display:block}
  footer .footer-links a{display:block;margin:.25rem 0}
}

main{padding:2rem 1rem;max-width:1200px;margin:auto;padding-top:80px}

.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem}
.gallery-item,.video-item{position:relative;overflow:visible;background:var(--color-surface)}
.gallery-item img,.gallery-item:hover img{transform:scale(1.05)}
.video-item video,#latest-slider .swiper-slide .slide-video{width:100%;height:auto;object-fit:cover}

#annonces{max-width:800px;margin:2rem auto;padding:1rem;background:rgba(255,255,255,.85);backdrop-filter:blur(4px);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.08);color:#222}
#annonces h2{margin-bottom:.75rem}
.message-list li{display:none;padding:1rem;background:#fff;margin:.5rem 0;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.1)}

.comments-panel{position:absolute;top:0;left:0;width:100%;max-width:400px;margin:auto;background:rgba(255,255,255,.95);border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.2);padding:1.5rem;z-index:20;transform:translateY(-10px);opacity:0;transition:transform .3s ease-out,opacity .3s ease-out;color:#000!important}
.comments-panel.show{transform:translateY(0);opacity:1}
.comments-panel .close-comments{position:absolute;top:.75rem;right:.75rem;background:none;border:none;font-size:1.2rem;color:var(--color-muted);cursor:pointer;transition:color .2s}
.comments-panel .close-comments:hover{color:var(--color-primary)}
.comments-panel .comments-list{max-height:180px;overflow-y:auto;margin-bottom:1rem}
.comments-panel .comment{margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid #eee}
.comments-panel .comment strong{color:var(--color-primary)}
.comments-panel .comment p{margin:.25rem 0 0;color:#000}
.comments-panel .comment-form input,.comments-panel .comment-form textarea{width:100%;padding:.6rem;margin-bottom:.75rem;border:1px solid #ddd;border-radius:4px;font-family:inherit}
.comments-panel .comment-form button{padding:.6rem 1.2rem;background:var(--color-primary);color:#fff;border:none;border-radius:4px;cursor:pointer;transition:filter .2s,transform .2s}
.comments-panel .comment-form button:hover{transform:translateY(-1px);filter:brightness(1.1)}

.view-all-comments{background:none;border:none;color:var(--color-primary);cursor:pointer;font-size:.9rem}
.view-all-comments:hover{text-decoration:underline}

#send-msg{max-width:800px;margin:2rem auto;padding:1.5rem;background:#fff;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.05)}
#send-msg h2{margin-bottom:1rem;font-size:1.4rem}
#send-msg textarea{width:100%;padding:.75rem;border:1px solid #ccc;border-radius:4px;font-family:inherit;font-size:1rem;resize:vertical;min-height:120px;margin-bottom:1rem}
#send-msg button{display:inline-block;padding:.6rem 1.2rem;background:var(--color-primary);color:#fff;border:none;border-radius:4px;font-size:1rem;cursor:pointer;transition:background-color .3s}
#send-msg button:hover{background:var(--color-secondary)}

.slide-link{display:block;color:inherit}
.slide-title{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.1);color:#222;padding:.4rem;font-size:.9rem;text-align:center}

.map-container{background:rgba(255,255,255,.85);backdrop-filter:blur(4px);padding:1rem;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.08);display:flex;flex-direction:column;flex:1 1 300px}
.map-container h2{margin-bottom:.75rem;font-size:1.4rem;color:var(--color-text);text-align:center}
#map-vietnam{flex:1;height:300px;width:100%;border-radius:6px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.2);position:relative;z-index:1}
.blink-marker .pulse{width:12px;height:12px;background:#e63946;border-radius:50%;animation:pulse 1.5s infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.9}50%{transform:scale(2);opacity:.3}100%{transform:scale(1);opacity:.9}}

.home-widgets{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;margin:2rem auto;max-width:1200px;padding:0 1rem}

.auth-container{max-width:400px;margin:4rem auto;padding:2rem;background:rgba(255,255,255,.95);border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.15);color:#222}
.auth-container h2{margin-bottom:1.5rem;font-size:1.8rem;text-align:center}
.auth-container .error{background:#ffe6e6;color:#c00;padding:.75rem 1rem;border-radius:4px;margin-bottom:1rem;font-weight:700}
.auth-container form label{display:block;margin-bottom:1rem;font-size:.95rem}
.auth-container form input{width:100%;padding:.6rem;margin-top:.25rem;border:1px solid #ccc;border-radius:4px;font-size:1rem;font-family:inherit}
.auth-container form button{width:100%;padding:.75rem;background:var(--color-primary);color:#fff;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:filter .2s,transform .1s;margin-top:1rem}
.auth-container form button:hover{filter:brightness(1.1);transform:translateY(-1px)}
.auth-container .alt-link{text-align:center;margin-top:1rem;font-size:.9rem}
.auth-container .alt-link a{color:var(--color-primary);font-weight:600}
.auth-container .alt-link a:hover{color:var(--color-secondary)}

@media(max-width:768px){
  header{flex-direction:column;align-items:flex-start;padding:1rem}
  .header-left{width:100%;justify-content:space-between}
  nav{width:100%;margin-top:.75rem;text-align:left}
  nav ul{flex-direction:column;gap:.5rem}
  .hamburger-btn{display:flex}
  .home-widgets{display:flex;flex-direction:column;gap:2rem}
  #latest-slider,.map-container{width:100%!important;max-width:100%!important;margin:1rem 0!important;padding:1rem!important}
  #map-vietnam{width:100%!important;height:250px}
  .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
  .video-grid{grid-template-columns:1fr}
  .gallery-item,.video-item{margin:auto;max-width:90%}
  .comments-panel{width:100%!important;left:0!important;max-width:none;border-radius:0}
  footer{padding:.5rem;font-size:.75rem;margin-top:1rem}
}

@media(max-width:480px){
  footer .footer-links,footer .footer-legal{display:none}
  .home-widgets{margin:1rem auto;gap:1rem}
  #latest-slider{padding:.5rem}
  .map-container #map-vietnam{height:180px}
}

@media(min-width:481px) and (max-width:767px){
  .home-widgets{gap:1.5rem}
  #latest-slider{padding:.75rem}
  .map-container #map-vietnam{height:220px}
}

@media(min-width:768px) and (max-width:1023px){
  .home-widgets{gap:2rem;padding:0 1rem}
  .map-container #map-vietnam{height:250px}
}

#latest-slider h2,.map-container h2,#annonces h2{color:#222!important}
.home-widgets{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;margin:2rem auto 0;padding:0 1rem;max-width:1200px}
#latest-slider,.map-container{width:100%;box-sizing:border-box;margin:0}
#latest-slider{margin-top:1rem}
#latest-slider .slide-title{bottom:25px}
@media(max-width:768px){
  .map-container{display:block!important}
  #map-vietnam{width:100%!important;height:250px!important;margin:1rem 0!important}
}
#latest-slider .swiper-slide img{height:240px;object-fit:cover;display:block;width:100%}
.time-zone{display:inline-flex;align-items:center;gap:.5rem;color:var(--color-text);font-size:.9rem;margin-left:1rem}
.member-bar{display:inline-flex;align-items:center;gap:.5rem;color:var(--color-text);font-size:.9rem}
.member-bar strong{color:var(--color-secondary)}
.member-bar .logout{margin-left:1rem;font-size:.8rem;text-decoration:underline;cursor:pointer}
.time-zone{display:inline-flex;align-items:center;gap:1rem;margin-left:2rem;font-size:.9rem;color:var(--color-text)}
.time-zone .tz{display:inline-flex;align-items:center;gap:.25rem}
.time-zone .flag{display:inline-block;font-size:1.2rem;line-height:1}
.header-extras{margin-left:auto;display:inline-flex;align-items:center;gap:1.5rem}
.member-bar{font-size:.9rem;color:var(--color-text)}
.member-bar strong{color:var(--color-secondary)}
.member-bar .logout{margin-left:.5rem;text-decoration:underline;font-size:.8rem}
.time-zone{display:inline-flex;align-items:center;gap:.75rem;font-size:.9rem;color:var(--color-text)}
.time-zone .tz{display:inline-flex;align-items:center;gap:.25rem}
.time-zone .flag{width:20px;height:auto;display:inline-block}
.header-extras{flex-wrap:nowrap!important;justify-content:space-between}
@media(max-width:768px){
  .site-header .header-inner{flex-direction:column;align-items:flex-start;padding:.75rem 1rem}
  .site-header .logo{margin-bottom:.5rem}
  .header-extras{margin-top:.75rem;width:100%;display:flex;justify-content:space-between}
  .member-bar{margin:0;white-space:nowrap;font-size:.85rem}
  .member-bar .logout{font-size:.8rem}
  .time-zone{font-size:.85rem;gap:.5rem}
  #latest-slider{width:100%!important;padding:.5rem!important;margin:1rem 0!important}
  .map-container{width:100%!important;margin:1rem 0!important}
  #map-vietnam{height:250px!important}
  .gallery-grid,.video-grid{grid-template-columns:1fr!important}
}

@media(max-width:480px){
  .time-zone .flag{width:16px}
  .time-zone,.member-bar{font-size:.8rem}
  .time-zone{margin:0;white-space:nowrap;font-size:.85rem}
  .site-header .header-inner{padding:.5rem!important}
}
@media(max-width:768px){
  .site-header .header-inner{flex-direction:column;align-items:flex-start}
  .header-extras{display:flex!important;flex-direction:column;align-items:flex-start;gap:.5rem;margin-top:.5rem;width:100%}
  .member-bar{order:1;margin:0}
  .time-zone{order:2;display:flex;flex-direction:column;gap:.25rem}
  .time-zone .tz{display:inline-flex;align-items:center;gap:.25rem}
}
@media(max-width:768px){
  .site-header .header-inner{flex-direction:row!important;justify-content:space-between;align-items:center}
  .time-zone{order:2;margin-left:auto}
  .member-bar{order:1;margin-right:1rem}
}
@media(max-width:768px){
  .hamburger-btn{position:relative;z-index:9999}
  .time-zone{pointer-events:none}
}
@media(max-width:768px){
  .site-header .header-inner{flex-direction:row!important;align-items:center}
  .header-extras{order:2;display:flex;flex-direction:column;gap:.5rem;margin-left:1rem}
  .hamburger-btn{order:3;margin-left:auto;position:relative;z-index:1000}
}
#latest-slider{max-width:1200px;margin:2rem auto;padding:1.5rem;background:var(--color-surface);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.1)}
#latest-slider h2{font-size:1.6rem;margin-bottom:1rem;color:var(--color-text);text-align:center}
.swiper-container,.swiper-wrapper{width:100%}
.swiper-slide{position:relative;border-radius:6px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.swiper-slide img{display:block;width:100%;height:auto;object-fit:cover}
.slide-link{display:block;color:inherit;text-decoration:none}
.slide-title{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.6);color:#fff;padding:.5rem;font-size:.9rem;text-align:center}
.swiper-button-prev,.swiper-button-next{color:var(--color-text);opacity:.7}
.swiper-button-prev:hover,.swiper-button-next:hover{opacity:1}
@media(max-width:768px){
  #latest-slider{padding:1rem}
  .swiper-slide{flex:0 0 100%!important;width:100%!important}
}

.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin:2rem auto;max-width:1200px;padding:0 1rem}
.gallery-item{position:relative;overflow:hidden;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.08);background:var(--color-surface)}
.gallery-item img{width:100%;height:auto;display:block;object-fit:cover;transition:transform .4s ease}
.gallery-item:hover img{transform:scale(1.05)}
.gallery-item .item-title{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.6);color:#fff;padding:.4rem;font-size:.9rem;text-align:center}
@media(max-width:768px){
  .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem}
}

.home-widgets{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
@media(max-width:768px){.home-widgets{grid-template-columns:1fr}}

@media(max-width:768px){
  .header-top,.header-extras{display:none!important}
  .site-header .header-bottom{display:flex!important;position:relative;z-index:9999!important}
  .hamburger-btn{z-index:10000!important;background:rgba(255,0,0,.2)!important;pointer-events:auto!important}
}
@media(max-width:768px){
  #mainNav{all:unset;display:none}
  #mainNav.open{display:flex!important;flex-direction:column!important;position:fixed!important;top:0!important;left:0!important;width:100vw!important;height:100vh!important;background:var(--color-surface)!important;padding-top:4rem!important;overflow-y:auto!important;z-index:2000!important}
  #mainNav.open ul{list-style:none;margin:0;padding:0}
  #mainNav.open li{margin:1rem 0!important;text-align:center}
  #mainNav.open a{display:block!important;padding:.75rem 1rem!important;font-size:1.1rem!important;color:var(--color-text)!important;text-decoration:none!important}
  #mainNav.open a:hover{background:rgba(255,255,255,.05)!important}
  #hamburgerToggle{position:relative!important;z-index:2100!important}
}

body[data-barba-namespace="galerie"] .albums-grid,body[data-barba-namespace="videos"] .albums-grid{list-style:none;padding:0;margin:1.25rem auto;max-width:1200px;display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
body[data-barba-namespace="galerie"] .album-card,body[data-barba-namespace="videos"] .album-card{background:#1f2030;border:1px solid #2b2b3d;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.18);overflow:hidden;transition:transform .15s ease,box-shadow .15s ease,border-color .15s}
body[data-barba-namespace="galerie"] .album-card:hover,body[data-barba-namespace="videos"] .album-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.28);border-color:#3a3a55}
body[data-barba-namespace="galerie"] .album-card a,body[data-barba-namespace="videos"] .album-card a{display:block;text-decoration:none;color:#f3f3f3;padding:1rem 1rem 1.1rem}
body[data-barba-namespace="galerie"] .album-card .title,body[data-barba-namespace="videos"] .album-card .title{font-weight:700;font-size:1.05rem;line-height:1.25;margin-bottom:.35rem}
body[data-barba-namespace="galerie"] .album-card .meta,body[data-barba-namespace="videos"] .album-card .meta{font-size:.9rem;color:#b8b8c9}
@media(max-width:480px){
  body[data-barba-namespace="galerie"] .album-card a,body[data-barba-namespace="videos"] .album-card a{padding:.9rem .85rem}
  body[data-barba-namespace="galerie"] .album-card .title,body[data-barba-namespace="videos"] .album-card .title{font-size:1rem}
}

#lb-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center}
#lb-overlay.show{display:flex}
#lb-img{max-width:92vw;max-height:88vh;box-shadow:0 10px 30px rgba(0,0,0,.5);border-radius:10px;object-fit:contain}
#lb-close,#lb-prev,#lb-next{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:none;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:26px;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
#lb-close{top:18px;right:18px;font-size:30px}
#lb-prev{left:18px;top:50%;transform:translateY(-50%)}
#lb-next{right:18px;top:50%;transform:translateY(-50%)}
#lb-counter{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#ddd;font-size:14px;background:rgba(0,0,0,.35);padding:6px 10px;border-radius:999px}

#av-overlay{position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:9999;display:none;color:#fff}
#av-stage{position:absolute;top:90px;left:60px;right:60px;bottom:120px;display:flex;align-items:center;justify-content:center}
#av-stage img,#av-stage iframe,#av-stage video{max-width:90vw;max-height:72vh;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.av-top{position:absolute;left:30px;right:30px;top:20px;display:flex;align-items:center;gap:12px}
#av-title{margin:0;font-size:1.4rem;font-weight:800}
#av-counter{margin-left:auto;background:rgba(0,0,0,.35);padding:.35rem .6rem;border-radius:999px}
#av-close{margin-left:10px;background:rgba(255,255,255,.12);border:0;color:#fff;width:40px;height:40px;border-radius:50%;cursor:pointer}
#av-prev,#av-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);border:0;color:#fff;width:48px;height:48px;border-radius:50%;cursor:pointer}
#av-prev{left:12px}#av-next{right:12px}
#av-thumbs{position:absolute;left:0;right:0;bottom:0;padding:14px;display:flex;gap:10px;overflow:auto;background:rgba(255,255,255,.06)}
#av-thumbs .av-thumb{border:2px solid transparent;border-radius:8px;padding:0;background:transparent;cursor:pointer}
#av-thumbs .av-thumb img{display:block;width:120px;height:72px;object-fit:cover;border-radius:6px;opacity:.9}
#av-thumbs .av-thumb.is-active{border-color:#e4425f}
.album-card-cover{position:relative;height:180px;background:#1d1f2a;overflow:hidden;border-radius:8px}
.album-card-cover img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.95)}
.album-badge{position:absolute;right:10px;top:10px;font-size:.85rem;padding:.25rem .6rem;background:#d81f36;color:#fff;border-radius:999px}
.album-card-body{padding:.8rem 1rem}
.album-cta{display:inline-block;margin-top:.4rem;padding:.45rem .8rem;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(255,255,255,.06)}

#av-shell{position:absolute;top:80px;left:24px;right:24px;bottom:100px;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;min-height:0}
#av-stage{display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);border-radius:10px;min-height:0;overflow:hidden}
#av-stage img,#av-stage iframe,#av-stage video{max-width:100%;max-height:100%;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
#av-comments{display:flex;flex-direction:column;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px;overflow:hidden}
#av-comments h3{margin:0 0 8px;font-size:1rem;font-weight:700}
#av-comments-list{flex:1 1 auto;overflow-y:auto;margin-bottom:10px}
.av-comment{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px}
.av-comment .meta{font-size:.8rem;opacity:.75;margin-bottom:4px}
#av-comments-form{margin-top:10px;display:flex;flex-direction:column;gap:8px}
#av-comments-form input,#av-comments-form textarea{width:100%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;border-radius:10px;padding:9px 10px;outline:none}
#av-comments-form textarea{min-height:90px;resize:vertical}
#av-comments-form button{align-self:flex-end;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.14);color:#fff;border-radius:10px;padding:.5rem .9rem;cursor:pointer}
@media(max-width:980px){
  #av-shell{grid-template-columns:1fr;gap:12px}
  #av-stage{min-height:40vh}
  #av-comments{height:260px}
}
/* --- FIX layout album viewer : média gauche / commentaires droite --- */
:root { --av-thumbs-h: 108px; } /* hauteur bande de vignettes en bas */

#av-overlay { display: none; } /* reste géré par ton JS */
#av-shell{
  position: absolute;
  top: 80px;                 /* espace sous le header du viewer */
  left: 24px; right: 24px;
  bottom: calc(var(--av-thumbs-h) + 20px); /* laisse la place aux vignettes */
  display: grid;
  grid-template-columns: minmax(0,1fr) 360px; /* média prend la place, sidebar 360px */
  gap: 20px;
  min-height: 0;             /* évite les débordements */
}

#av-stage{
  background: rgba(255,255,255,.04);
  border-radius: 10px;
  overflow: hidden;          /* empêche tout débordement du média */
  display: flex; align-items: center; justify-content: center;
  min-height: 0;             /* indispensable avec grid */
}
#av-stage img,
#av-stage iframe,
#av-stage video{
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
}

#av-comments{
  position: relative;        /* pas d'absolu → pas de chevauchement */
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 12px;
  overflow: hidden;          /* le contenu scrolle à l’intérieur */
  min-width: 320px;          /* évite que la sidebar s’écrase */
}
#av-comments-list{
  flex: 1 1 auto;
  overflow-y: auto;
  max-height: none;
  margin-bottom: 10px;
}

/* bande de vignettes toujours séparée en bas */
#av-thumbs{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--av-thumbs-h);
  padding: 12px 14px;
  display: flex; gap: 10px; overflow: auto;
  background: rgba(255,255,255,.06);
}

/* responsive : sidebar passe dessous */
@media (max-width: 980px){
  #av-shell{ grid-template-columns: 1fr; gap: 12px; }
  #av-comments{ height: 260px; min-width: 0; }
}
/* Fix layout : commentaires bien à droite, distincts du média */
#av-shell {
  position: absolute;
  top: 80px;
  left: 24px;
  right: 24px;
  bottom: calc(var(--av-thumbs-h,108px) + 20px);

  display: grid;
  grid-template-columns: 1fr 380px; /* média à gauche, sidebar fixe à droite */
  gap: 24px;
}

#av-stage {
  background: rgba(255,255,255,.04);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#av-stage img,
#av-stage iframe,
#av-stage video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
}

#av-comments {
  display: flex;
  flex-direction: column;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  padding: 14px;
  overflow: hidden;   /* la liste scrolle à l’intérieur */
}

#av-comments h3 {
  margin: 0 0 10px;
}

#av-comments-list {
  flex: 1 1 auto;
  overflow-y: auto;
  margin-bottom: 10px;
}

/* Responsive : en-dessous sur mobile */
@media (max-width: 980px) {
  #av-shell {
    grid-template-columns: 1fr;
  }
  #av-comments {
    height: 240px;
  }
}
/* —— FORCE layout album viewer : média gauche / commentaires droite —— */
#av-shell{
  position:absolute !important;
  top:80px; left:24px; right:24px;
  bottom:calc(var(--av-thumbs-h,108px) + 20px);
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 380px !important;
  gap:24px !important;
  min-height:0 !important;
}

#av-stage{
  order:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(255,255,255,.04);
  border-radius:10px;
  overflow:hidden !important;
  min-height:0 !important;
}
#av-stage img,#av-stage iframe,#av-stage video{
  max-width:100% !important;
  max-height:100% !important;
  border-radius:8px;
}

#av-comments{
  order:2 !important;
  position:static !important;   /* surtout pas absolute */
  display:flex !important;
  flex-direction:column !important;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
  padding:14px;
  overflow:hidden !important;
  min-width:340px;
}
#av-comments-list{
  flex:1 1 auto !important;
  overflow-y:auto !important;
  margin-bottom:10px;
}

/* barre de vignettes en bas */
#av-thumbs{
  position:absolute !important;
  left:0; right:0; bottom:0;
  height:var(--av-thumbs-h,108px);
  padding:12px 14px;
  display:flex; gap:10px; overflow:auto;
  background:rgba(255,255,255,.06);
}

/* Mobile : une seule colonne */
@media (max-width: 700px){
  #av-shell{ grid-template-columns:1fr !important; }
  #av-comments{ height:260px; min-width:0; }
}
/* === Correction finale : sidebar commentaires à droite du média === */
#av-shell {
  display: grid !important;
  grid-template-columns: 1fr 360px !important; /* média à gauche, coms à droite */
  gap: 24px !important;
  align-items: stretch !important;
  position: absolute !important;
  top: 80px; left: 24px; right: 24px; bottom: 120px;
}

#av-stage {
  background: rgba(255,255,255,.04);
  border-radius: 10px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#av-stage img,
#av-stage iframe,
#av-stage video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
}

/* Sidebar coms toujours collée à droite */
#av-comments {
  position: relative !important;
  order: 2 !important;
  display: flex !important;
  flex-direction: column;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  padding: 14px;
  overflow: hidden;
  min-width: 340px;
}
#av-comments-list {
  flex: 1 1 auto;
  overflow-y: auto;
  margin-bottom: 10px;
}

/* Mobile = en dessous */
@media (max-width: 768px) {
  #av-shell {
    grid-template-columns: 1fr !important;
  }
  #av-comments {
    min-width: auto;
    height: 260px;
  }
}
/* ===== Forcer la sidebar commentaires à DROITE du média ===== */
#av-overlay #av-shell{
  position: absolute !important;
  top: 80px; left: 24px; right: 24px; bottom: 120px;
  display: grid !important;
  grid-template-columns: 1fr 380px !important; /* média | commentaires */
  gap: 24px !important;
  min-height: 0 !important;
}

#av-overlay #av-shell > #av-stage{
  grid-column: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.04);
  border-radius: 10px;
  overflow: hidden !important;
}
#av-overlay #av-shell > #av-stage img,
#av-overlay #av-shell > #av-stage iframe,
#av-overlay #av-shell > #av-stage video{
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: 8px;
}

/* ⬇️ reset agressif de l'ancien style qui la met en absolute */
#av-overlay #av-shell > #av-comments{
  grid-column: 2 !important;
  position: relative !important;
  top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
  width: auto !important; max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  padding: 14px;
  overflow: hidden !important;
  min-width: 340px;
}

#av-overlay #av-comments-list{
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  margin-bottom: 10px;
}

/* vignettes */
#av-overlay #av-thumbs{
  position: absolute !important;
  left: 0; right: 0; bottom: 0;
  height: 108px;
  padding: 12px 14px;
  display: flex; gap: 10px; overflow: auto;
  background: rgba(255,255,255,.06);
}

/* mobile */
@media (max-width: 768px){
  #av-overlay #av-shell{ grid-template-columns: 1fr !important; }
  #av-overlay #av-comments{ min-width: 0; height: 260px; }
}
/* ===== Album Viewer — agrandir le média & éviter les bandes ===== */
#av-shell{
  /* plus d’espace pour le média */
  top: 70px; bottom: 96px; left: 24px; right: 24px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 340px; /* média large + sidebar 340px */
  gap: 16px;
  min-height: 0;
}
@media (min-width: 1400px){
  #av-shell{ grid-template-columns: minmax(0,1fr) 380px; }
}

/* zone du média : fond transparent pour ne pas voir de “bandes” */
#av-stage{
  background: transparent;     /* <= évite les bandes visibles */
  border-radius: 10px;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* base commune des médias dans le stage */
#av-stage .av-media{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;         /* pas de crop, jamais étiré */
  display: block;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* règle “orientation-aware” pour vraiment remplir sans bandes */
#av-stage .av-media.is-landscape{
  width: 100%;
  height: auto;
}
#av-stage .av-media.is-portrait{
  width: auto;
  height: 100%;
}

/* iframes (YouTube) : occuper le stage au max, sans couper */
#av-stage .av-frame{
  width: 100%;
  height: 100%;
  border: 0;
}

/* sidebar commentaires inchangée (tu peux laisser ta version actuelle) */
/* ==== FIX viewer : grand, sans crop, sans bandes visibles ==== */

/* plus de place pour le média */
#av-shell {
  grid-template-columns: minmax(0, 1fr) 320px; /* média large + sidebar 320px */
  gap: 16px;
}

/* stage : fond transparent = pas de bandes noires visibles */
#av-stage {
  background: transparent !important;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}

/* images : jamais de crop, on privilégie la hauteur */
#av-stage img {
  max-height: 82vh;
  max-width: 100%;
  height: auto;
  width: auto;           /* <- pas de width forcée */
  object-fit: contain;   /* sécurité, ne coupe pas */
  border-radius: 8px;
}

/* vidéos locales : même logique */
#av-stage video {
  max-height: 82vh;
  max-width: 100%;
  height: auto;
  width: auto;
  object-fit: contain;
  border-radius: 8px;
}

/* YouTube : prendre la place sans déformer */
#av-stage iframe {
  width: min(100%, 1200px);
  height: min(82vh, 68vw); /* garde de la hauteur sans dépasser */
  border: 0;
  border-radius: 8px;
}

@media (max-width: 980px){
  #av-shell { grid-template-columns: 1fr; }
}
/* ===== Album Viewer — médias plus grands, sans bandes noires ===== */

/* Espace utile plus large dans l’overlay */
#av-shell{
  position:absolute;
  /* on resserre les marges pour gagner de la place */
  top:64px; left:16px; right:16px; bottom:98px;

  /* média à gauche (flexible) + sidebar 360px à droite */
  display:grid;
  grid-template-columns:minmax(0, 1fr) 360px;
  gap:18px;
  min-height:0;
}

/* zone du média : fond quasi transparent, pas de “boîte” visible */
#av-stage{
  background: rgba(255,255,255,.02);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;   /* évite tout débordement */
  min-height:0;
}

/* Élément média générique (img / video / iframe) */
#av-stage .av-media{
  /* occupe au max l’espace disponible sans déformer */
  max-width: calc(100vw - 420px);     /* 360 sidebar + marges/boutons */
  max-height: calc(100vh - 180px);    /* barre du haut + vignettes */
  object-fit: contain;                /* évite les bandes noires par défaut */
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* Meilleure utilisation de l’espace selon l’orientation détectée par le JS */
#av-stage .av-media.is-landscape{
  width: 100%;
  height: auto;
}
#av-stage .av-media.is-portrait{
  height: 100%;
  width: auto;
}

/* Sidebar commentaires inchangée mais sans chevauchement */
#av-comments{
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  padding:12px;
  min-height:0;
  display:flex;
  flex-direction:column;
}

/* Bande de vignettes : fine hauteur pour laisser plus de place au média */
#av-thumbs{
  padding:10px 12px;
  background: rgba(255,255,255,.06);
}

/* --- Mobile / petit écran : la sidebar passe dessous et on garde un média haut --- */
@media (max-width: 980px){
  #av-shell{
    grid-template-columns: 1fr;
    top:64px; left:10px; right:10px; bottom:110px;
    gap:12px;
  }
  #av-stage .av-media{
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 230px); /* un peu plus haut sur mobile */
  }
}
/* ===== Overrides forts pour AGRANDIR les PHOTOS dans l'album viewer ===== */
#av-stage img.av-media,
#av-stage video.av-media,
#av-stage iframe.av-media{
  max-width: calc(100vw - 420px) !important;  /* média + sidebar 360px */
  max-height: calc(100vh - 180px) !important; /* barre du haut + thumbs */
  object-fit: contain !important;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Orientation détectée par le JS */
#av-stage img.av-media.is-landscape{
  width: 100% !important;
  height: auto !important;
}
#av-stage img.av-media.is-portrait{
  height: 100% !important;
  width: auto !important;
}

/* Mobile : sidebar en dessous, un peu plus de hauteur utile */
@media (max-width: 980px){
  #av-stage img.av-media,
  #av-stage video.av-media,
  #av-stage iframe.av-media{
    max-width: calc(100vw - 40px) !important;
    max-height: calc(100vh - 230px) !important;
  }
}
/* Force les médias à ne jamais être cropés dans l'album viewer */
#av-overlay #av-stage > .av-media {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;   /* affiche toujours l’image entière */
  background: #000;                 /* bandes noires si besoin */
}
/* === Fix affichage médias dans l'album viewer === */
#av-stage img.av-media,
#av-stage video.av-media,
#av-stage iframe.av-media {
  max-width: calc(100vw - 420px);  /* laisse la place pour la sidebar */
  max-height: calc(100vh - 160px); /* garde la place pour top + thumbs */
  width: auto;
  height: auto;
  object-fit: contain !important;  /* pas de crop, bandes noires si besoin */
  background: #000;                /* fond noir derrière */
  border-radius: 10px;
}
/* === MOBILE GALLERY FIX (drop-in) === */
@media (max-width: 768px) {
  /* 1) Grille claire: 2 colonnes (≥560px => 3 colonnes) */
  body[data-barba-namespace="galerie"] .gallery-grid,
  .gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .75rem !important;
    margin: 1rem auto !important;
    max-width: 100% !important;
    padding: 0 .5rem !important;
  }
  @media (min-width:560px) and (max-width:768px) {
    body[data-barba-namespace="galerie"] .gallery-grid,
    .gallery-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
  }

  /* 2) Neutraliser la règle qui force 1 colonne */
  .gallery-grid, .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* 3) Tuiles: largeur pleine, ratio stable, pas de centrage */
  .gallery-item, .video-item {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    position: relative;
    overflow: hidden !important;
    border-radius: 10px;
    background: var(--color-surface);
    /* ratio propre; change en 4/3, 1/1, 9/16 si tu préfères */
    aspect-ratio: 3 / 2;
  }

  /* 4) Images: couvrent la tuile sans “saut” de layout */
  .gallery-item img,
  .video-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    transform: none !important;   /* désactive le zoom au hover sur touch */
  }

  /* 5) Légendes lisibles en overlay (si présentes) */
  .gallery-item .item-title,
  .gallery-item figcaption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 8px 10px;
    font-size: 12px;
    color: #fff;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
  }

  /* 6) Slider/Swiper: pas de crop étrange */
  #latest-slider .swiper-slide img {
    width: 100% !important;
    height: 220px !important;   /* fixe une hauteur raisonnable mobile */
    object-fit: cover !important;
  }

  /* 7) Header/hamburger: clic prioritaire au-dessus de la galerie */
  .site-header { z-index: 1000 !important; }
  .hamburger-btn { z-index: 1001 !important; }
  #mainNav.open { z-index: 1000 !important; }

  /* 8) Annulations de styles qui recentrent/cassent la grille */
  .gallery-item:hover img { transform: none !important; }
}
/* ==== PATCH ANTI-CHEVAUCHEMENT COMMENTAIRES ==== */

/* --- 1) ALBUM VIEWER (overlay) : média à gauche | commentaires à droite --- */
:root { --av-thumbs-h: 96px; } /* hauteur bande de vignettes */

#av-overlay #av-shell{
  position: absolute !important;
  top: 70px; left: 16px; right: 16px; bottom: calc(var(--av-thumbs-h) + 16px);
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 360px !important;  /* média | coms */
  gap: 18px !important;
  min-height: 0 !important;
  align-items: stretch !important;
}
#av-overlay #av-stage{
  grid-column: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  min-height: 0 !important;
  background: rgba(255,255,255,.02);
  border-radius: 10px;
}
#av-overlay #av-stage img,
#av-overlay #av-stage video,
#av-overlay #av-stage iframe{
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  border-radius: 8px;
}

#av-overlay #av-comments{
  grid-column: 2 !important;
  position: relative !important;     /* ⬅️ plus d'absolu */
  inset: auto !important;            /* reset top/right/bottom/left */
  width: auto !important;
  max-width: none !important;
  min-width: 320px;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;       /* la liste scrolle dedans */
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  padding: 14px;
  z-index: 1;                        /* sous les boutons overlay si besoin */
}
#av-overlay #av-comments-list{
  flex: 1 1 auto !important;
  overflow-y: auto !important;
}

/* bande de vignettes toujours séparée en bas */
#av-overlay #av-thumbs{
  position: absolute !important;
  left: 0; right: 0; bottom: 0;
  height: var(--av-thumbs-h);
  padding: 12px 14px;
  display: flex; gap: 10px; overflow: auto;
  background: rgba(255,255,255,.06);
}

/* --- Responsive : sur mobile la sidebar passe DESSOUS --- */
@media (max-width: 768px){
  #av-overlay #av-shell{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  #av-overlay #av-comments{
    min-width: 0 !important;
    height: 240px;                  /* hauteur fixe confortable */
    overflow: hidden !important;
  }
  #av-overlay #av-comments-list{ overflow-y: auto !important; }
}

/* --- 2) GALERIE (liste) : le petit panneau .comments-panel devient MODAL en mobile --- */
@media (max-width: 768px){
  .comments-panel{
    position: fixed !important;     /* ⬅️ ne chevauche plus les vignettes voisines */
    top: 0; left: 0; right: 0;
    width: auto !important; max-width: none !important;
    height: 70vh;                    /* assez haut mais pas tout l'écran */
    margin: 0 !important;
    border-radius: 12px 12px 0 0;
    z-index: 2000;                   /* au-dessus du contenu */
  }
  /* petit backdrop pour l’accessibilité tactile */
  .comments-panel::before{
    content:""; position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    z-index: -1;
  }
  .comments-panel .comments-list{ max-height: calc(70vh - 120px); }
}

/* --- 3) Sécurité : on neutralise tout transform/absolute résiduel qui recouvre le média --- */
#av-comments, .comments-panel{
  transform: none !important;
}
/* === ANTI-CHEVAUCHEMENT — FORCE LAYOUT PROPRE (mobile) === */

/* 1) ALBUM VIEWER (overlay) : grid stricte => média | commentaires */
@media (max-width: 768px){
  #av-overlay #av-shell{
    position: absolute !important;
    top: 70px; left: 16px; right: 16px; bottom: 108px; /* garde la rangée de vignettes */
    display: grid !important;
    grid-template-columns: 1fr !important;   /* sur mobile = 1 colonne */
    grid-auto-rows: minmax(0, auto) !important;
    gap: 12px !important;
    min-height: 0 !important;
  }
  #av-overlay #av-stage{
    grid-column: 1 !important; grid-row: 1 !important;
    position: static !important; inset: auto !important; z-index: auto !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    overflow: hidden !important; min-height: 40vh;
    background: rgba(255,255,255,.02);
    border-radius: 10px;
  }
  #av-overlay #av-stage img,
  #av-overlay #av-stage video,
  #av-overlay #av-stage iframe{
    max-width: 100% !important; max-height: 100% !important; object-fit: contain !important;
  }

  /* ⬅️ le cœur du fix : commentaires EN FLUX, pas en overlay */
  #av-overlay #av-comments{
    grid-column: 1 !important; grid-row: 2 !important;
    position: static !important; inset: auto !important; z-index: auto !important;
    width: auto !important; max-width: none !important; min-width: 0 !important;
    display: flex !important; flex-direction: column !important; overflow: hidden !important;
    background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.15); border-radius: 12px; padding: 12px;
  }
  #av-overlay #av-comments-list{ flex: 1 1 auto !important; overflow-y: auto !important; }

  /* vignettes en bas, séparées du contenu */
  #av-overlay #av-thumbs{
    position: absolute !important; left: 0; right: 0; bottom: 0;
    height: 108px; padding: 10px 12px; display: flex; gap: 10px; overflow: auto;
    background: rgba(255,255,255,.06);
  }
}

/* 2) GALERIE (liste) : panneau de commentaires en FLUX sous la tuile */
@media (max-width: 768px){
  /* chaque carte laisse sortir son contenu */
  .gallery-item{ overflow: visible !important; }

  /* le panneau n'est plus en absolute : il pousse la mise en page, donc plus de chevauchement */
  .comments-panel{
    position: static !important;
    inset: auto !important; z-index: auto !important;
    width: auto !important; max-width: none !important; margin-top: .5rem !important;
    transform: none !important; opacity: 1 !important;
  }

  /* si un style .show ajoutait translate/opacity, on neutralise */
  .comments-panel.show{ transform: none !important; opacity: 1 !important; }

  /* le bouton de fermeture reste visible et cliquable */
  .comments-panel .close-comments{ position: absolute; top: .5rem; right: .5rem; }
}

/* 3) Ceinture et bretelles : on annule toute couche flottante résiduelle */
#av-comments, .comments-panel{
  top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
  pointer-events: auto !important;
}
/* === FIX chevauchement #av-comments sur mobile === */
@media (max-width: 980px){
  #av-overlay #av-shell{
    display: grid !important;
    grid-template-columns: 1fr !important; /* une seule colonne */
    grid-auto-rows: auto;
    gap: 12px;
    position: absolute !important;
    top: 64px; left: 16px; right: 16px; bottom: 108px; /* garde la place pour les vignettes */
    min-height: 0;
  }

  /* le média en premier */
  #av-overlay #av-stage{
    grid-column: 1; grid-row: 1;
    position: static !important;
    inset: auto !important;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  #av-overlay #av-stage img,
  #av-overlay #av-stage video,
  #av-overlay #av-stage iframe{
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  /* les commentaires en dessous */
  #av-overlay #av-comments{
    grid-column: 1; grid-row: 2;
    position: static !important; /* ⬅️ plus d'absolu */
    inset: auto !important;
    width: auto !important; max-width: none !important;
    min-width: 0 !important;
    display: flex !important; flex-direction: column !important;
    height: 240px; /* fixe mais scrollable */
    overflow: hidden;
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 12px;
    padding: 12px;
    z-index: 1;
  }
  #av-overlay #av-comments-list{
    flex: 1 1 auto;
    overflow-y: auto;
  }
}
/* === SAFE PATCH MOBILE — médias visibles + coms dessous === */
@media (max-width: 768px){

  /* 1) Le panneau commentaires NE FLOTTE PLUS */
  #av-overlay #av-comments{
    position: static !important;      /* sort de l'overlay */
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 240px;                    /* zone fixe, scrollable */
    overflow: hidden;
  }
  #av-overlay #av-comments-list{ overflow-y: auto; max-height: 100%; }

  /* 2) Le stage a TOUJOURS une hauteur -> évite les médias "invisibles" */
  #av-overlay #av-stage{
    min-height: 60vh !important;      /* garantie de hauteur */
    display: flex !important;
    align-items: center; justify-content: center;
    overflow: hidden;
    z-index: 1;                        /* sous les boutons si besoin */
  }

  /* 3) Les médias s'adaptent à l'espace sans disparaître */
  #av-overlay #av-stage img,
  #av-overlay #av-stage video,
  #av-overlay #av-stage iframe{
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;      /* <= s'appuie sur min-height du stage */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;    /* pas de crop */
    opacity: 1 !important;             /* au cas où un style inline la baisse */
  }

  /* 4) Thumbs : conservent leur place en bas si tu as une bande de vignettes */
  #av-overlay #av-thumbs{
    position: absolute !important;
    left: 0; right: 0; bottom: 0;
    height: 108px;
  }
}
/* === FIX affichage YouTube dans #av-stage sur mobile === */
@media (max-width: 768px){
  #av-overlay #av-stage iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0;
    border-radius: 8px;
  }

  /* Astuce : garder un ratio vidéo correct */
  #av-overlay #av-stage {
    aspect-ratio: 16/9;
    max-height: 60vh;   /* occupe bien l’écran sans dépasser */
  }
}
/* === ALBUM MOBILE — layout verrouillé, anti-overlay === */
@media (max-width: 768px){
  :root{ --thumbs-h:108px; --comments-h:240px; }

  /* Zone utile entre la barre du haut et la rangée de vignettes */
  #av-overlay #av-shell{
    position:absolute !important;
    top:64px; left:12px; right:12px; bottom:var(--thumbs-h);
    display:flex !important; flex-direction:column !important;
    gap:12px; min-height:0;
  }

  /* 1) MEDIA : occupe tout l'espace restant */
  #av-overlay #av-stage{
    position:static !important; inset:auto !important; z-index:auto !important;
    flex:1 1 auto !important; min-height:0 !important;
    display:flex !important; align-items:center; justify-content:center;
    overflow:hidden; border-radius:12px;
    background: rgba(255,255,255,.02);
    transform:none !important; /* tue un éventuel transform inline */
  }
  #av-overlay #av-stage img,
  #av-overlay #av-stage video{
    max-width:100% !important; max-height:100% !important;
    width:auto !important; height:auto !important; object-fit:contain !important;
    opacity:1 !important;
  }
  #av-overlay #av-stage iframe{
    width:100% !important; height:100% !important; border:0; border-radius:8px;
  }

  /* 2) COMMENTS : TOUJOURS dans le flux, en dessous */
  #av-overlay #av-comments,
  #av-overlay #av-comments[style]{            /* override styles inline */
    position:static !important;
    inset:auto !important; z-index:auto !important;
    width:auto !important; max-width:none !important; min-width:0 !important;
    transform:none !important; opacity:1 !important;
    flex:0 0 var(--comments-h) !important;   /* hauteur fixe et scroll interne */
    display:flex !important; flex-direction:column !important;
    overflow:hidden !important;
    background: rgba(0,0,0,.25);
    border:1px solid rgba(255,255,255,.15); border-radius:12px; padding:12px;
  }
  #av-overlay #av-comments-list{ flex:1 1 auto; overflow-y:auto; }

  /* 3) THUMBS : bandeau séparé en bas */
  #av-overlay #av-thumbs{
    position:absolute !important; left:0; right:0; bottom:0;
    height:var(--thumbs-h); padding:10px 12px;
    display:flex; gap:10px; overflow:auto;
    background: rgba(255,255,255,.06);
  }
}
/* === NAV ARROWS DESKTOP FIX — priorité clic + au-dessus des calques === */
@media (min-width: 769px){

  /* hiérarchie claire : stage < comments < arrows */
  #av-stage{ z-index: 1 !important; }
  #av-comments{ z-index: 2 !important; }

  /* flèches toujours au-dessus et cliquables */
  #av-prev, #av-next{
    position: fixed !important;              /* sort du conteneur qui overflow */
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 3000 !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }

  /* positions : gauche de l'écran et avant la sidebar (à droite) */
  #av-prev{ left: 16px !important; }
  /* si ta sidebar coms fait ~360px, on garde un offset à droite */
  #av-next{ right: calc(360px + 16px) !important; }

  /* rien d'autre ne doit “manger” les clics */
  #av-overlay::before,
  #av-overlay::after{ pointer-events: none !important; }
}