/* ===========================================================================
   Visionneuse de photos — composant UNIQUE du site (04/09/2026)
   ---------------------------------------------------------------------------
   POURQUOI. Demande de btob : « vérifier l'affichage de toutes les photos
   lorsqu'on clique dessus, améliorer le design y compris la petite croix pour
   fermer, mettre une loupe si on veut zoomer ».
   L'inventaire du 04/09 a relevé 227 endroits où une photo est affichée, 97 où
   le clic ne fait rien, et onze implémentations différentes de visionneuse —
   plus du code mort (magnific-popup chargée et jamais utilisée, .fo-lb jamais
   atteinte, imagePopupModal fantôme). Ce fichier les remplace toutes.
   =========================================================================== */

.btb-vis{position:fixed;inset:0;z-index:2000000;display:none;background:rgba(10,12,18,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btb-vis.ouverte{display:block}
.btb-vis *{box-sizing:border-box}

/* La scène : l'image y est centrée et ne dépasse jamais. Les commandes vivent
   AUTOUR d'elle, pas dessus — la croix posée sur la photo était la remarque. */
.btb-vis-scene{position:absolute;inset:64px 12px 84px;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}
.btb-vis-img{max-width:100%;max-height:100%;border-radius:10px;box-shadow:0 30px 80px -30px rgba(0,0,0,.9);transform-origin:center center;transition:transform .18s ease;will-change:transform;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.btb-vis.zoom .btb-vis-img{cursor:grab;transition:none;border-radius:0}
.btb-vis.zoom.tire .btb-vis-img{cursor:grabbing}
.btb-vis-charge{position:absolute;width:34px;height:34px;border:3px solid rgba(255,255,255,.25);border-top-color:#8abf56;border-radius:50%;animation:btb-vis-tourne .8s linear infinite}
@keyframes btb-vis-tourne{to{transform:rotate(360deg)}}

/* Bandeau du haut : compteur à gauche, actions à droite. */
.btb-vis-haut{position:absolute;top:0;left:0;right:0;height:64px;display:flex;align-items:center;gap:8px;padding:0 12px;background:linear-gradient(to bottom,rgba(10,12,18,.85),transparent)}
.btb-vis-compte{font:600 13.5px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#fff;background:rgba(255,255,255,.14);border-radius:999px;padding:8px 14px;letter-spacing:.02em}
.btb-vis-espace{flex:1}
.btb-vis-b{width:44px;height:44px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:16px;cursor:pointer;transition:background .15s ease,transform .15s ease}
.btb-vis-b:hover{background:rgba(255,255,255,.28)}
.btb-vis-b:active{transform:scale(.94)}
.btb-vis-b:focus-visible{outline:2px solid #8abf56;outline-offset:2px}
.btb-vis-b.actif{background:#8abf56;color:#10131b}
.btb-vis-b.x{background:rgba(255,255,255,.2)}
.btb-vis-b.x:hover{background:#d93025;color:#fff}

/* Flèches : de grandes zones, à mi-hauteur, hors de l'image sur grand écran. */
.btb-vis-fleche{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:18px;cursor:pointer}
.btb-vis-fleche:hover{background:rgba(255,255,255,.3)}
.btb-vis-fleche.prec{left:14px}
.btb-vis-fleche.suiv{right:14px}
.btb-vis.seule .btb-vis-fleche,.btb-vis.seule .btb-vis-compte{display:none}

/* Bas : légende, et vignettes quand il y a plusieurs photos. */
.btb-vis-bas{position:absolute;left:0;right:0;bottom:0;padding:10px 12px 14px;background:linear-gradient(to top,rgba(10,12,18,.9),transparent)}
.btb-vis-legende{margin:0 0 8px;text-align:center;font:500 13.5px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:rgba(255,255,255,.86);max-width:900px;margin-left:auto;margin-right:auto}
.btb-vis-legende:empty{display:none}
/* 09/09/2026 : `justify-content:center` sur un conteneur a defilement rend le
   DEBUT du contenu inatteignable des qu'il deborde (le depassement se repartit
   des deux cotes, et on ne peut pas defiler vers une zone negative). Sur
   telephone, une annonce a beaucoup de photos perdait ainsi ses premieres
   vignettes. `flex-start` + marges automatiques sur les vignettes : centre quand
   ca tient, atteignable quand ca deborde. */
.btb-vis-vign{display:flex;gap:8px;justify-content:flex-start;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.btb-vis-vign>*{margin-left:auto;margin-right:auto}
.btb-vis-vign>*+*{margin-left:0}
.btb-vis-vign::-webkit-scrollbar{display:none}
.btb-vis.seule .btb-vis-vign{display:none}
.btb-vis-vign button{flex:none;width:54px;height:42px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:#22262f;cursor:pointer;opacity:.55;transition:opacity .15s ease,border-color .15s ease}
.btb-vis-vign button:hover{opacity:.85}
.btb-vis-vign button.actif{opacity:1;border-color:#8abf56}
.btb-vis-vign img{width:100%;height:100%;object-fit:cover;display:block}

/* Ce qui rend une photo cliquable : une loupe au survol, et le curseur. */
.btb-photo-ouvrable{cursor:zoom-in;position:relative}
@media (hover:none){[data-btb-galerie] img,img[data-btb-photo]{cursor:pointer!important}} /* 24/09 (UX-354) : iPhone */

@media (max-width:640px){
    .btb-vis-scene{inset:56px 0 76px}
    .btb-vis-haut{height:56px;padding:0 8px}
    .btb-vis-img{border-radius:0}
    .btb-vis-fleche{width:44px;height:44px;font-size:16px}
    .btb-vis-fleche.prec{left:6px}
    .btb-vis-fleche.suiv{right:6px}
    .btb-vis-vign button{width:46px;height:36px}
}
@media (prefers-reduced-motion:reduce){
    .btb-vis-img{transition:none}
    .btb-vis-charge{animation-duration:2s}
}