/* Galerie d'images des projets (project-gallery.js) — structure commune aux deux bureaux.
   Chaque bureau donne son style avec les variables --pg-* (voir windows-desktop.css et linux-desktop.css).
   Animations : transform et opacity uniquement. */
.pg, .pg-lightbox { --_a: var(--pg-accent, #2871b6); --_r: var(--pg-radius, 10px) }
.pg { display: grid; gap: 12px; width: 100%; min-width: 0 }

/* Grande image : la zone garde sa taille, l'image s'y inscrit en entier (jamais rognée ni déformée) */
.pg-stage { position: relative; margin: 0; aspect-ratio: 16/10; display: grid; place-items: center; overflow: hidden; border-radius: var(--_r) }
.pg-stage.has-image { border: 0; background: none; overflow: visible }
.pg-zoom { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: zoom-in; container-type: size }
/* --pg-ar (largeur/hauteur) et --pg-w viennent du script : la place est réservée avant le chargement,
   avec un fond doux, et l'image n'est pas étirée au-delà d'une fois et demie sa taille réelle. */
.pg-stage .pg-main { position: static; inset: auto; display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; aspect-ratio: var(--pg-ar, 16/10); object-fit: contain; border-radius: var(--pg-img-radius, 8px); background: var(--pg-load, #ffffff66); box-shadow: var(--pg-img-shadow, 0 8px 24px #0000002e) }
@supports (width: 1cqw) { .pg-stage .pg-main { width: min(100cqw, calc(100cqh * var(--pg-ar, 16/10)), calc(var(--pg-w, 1600) * 1.5px)) } }
.pg-in { animation: pgIn .28s cubic-bezier(.2, .7, .2, 1) }
@keyframes pgIn { from { opacity: 0; transform: translateX(var(--pg-dx, 0px)) scale(.985) } to { opacity: 1; transform: none } }

/* Flèches : visibles au survol de l'image ou au clavier (toujours visibles sur écran tactile) */
.pg-nav { position: absolute; z-index: 2; top: 50%; width: 36px; height: 36px; margin-top: -18px; display: grid; place-items: center; padding: 0 0 3px; border: var(--pg-nav-border, 0); border-radius: var(--pg-nav-radius, 50%); background: var(--pg-nav-bg, #000000a6); color: var(--pg-nav-fg, #fff); font: 22px/1 system-ui, sans-serif; cursor: pointer; opacity: 0; transition: opacity .15s ease, transform .15s ease }
.pg-nav[hidden] { display: none }
.pg-stage:hover .pg-nav, .pg-nav:focus-visible, .pg-lightbox .pg-nav { opacity: 1 }
@media (hover: none) { .pg-nav { opacity: 1 } }
.pg-nav:hover { transform: scale(1.08) }
.pg-prev { inset-inline-start: 8px }
.pg-next { inset-inline-end: 8px }
.pg-count { position: absolute; z-index: 2; inset-block-end: 8px; inset-inline-end: 8px; padding: 2px 9px; border-radius: 999px; background: #000000a6; color: #fff; font: 600 11px/1.5 system-ui, sans-serif; pointer-events: none }

/* Miniatures : défilement horizontal si elles sont nombreuses */
.pg-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 3px 3px 8px; scrollbar-width: thin; scrollbar-color: var(--pg-scroll, #00000040) transparent }
.pg-thumb { flex: 0 0 auto; width: var(--pg-thumb-w, 96px); height: var(--pg-thumb-h, 64px); padding: 0; border: 0; border-radius: var(--pg-thumb-radius, 6px); overflow: hidden; background: var(--pg-load, #ffffff66); cursor: pointer; opacity: .7; outline: 2px solid transparent; outline-offset: 1px; transition: opacity .15s ease, outline-color .15s ease }
.pg-thumb img { width: 100%; height: 100%; min-height: 0; object-fit: cover; display: block; transition: transform .2s ease }
.pg-thumb:hover, .pg-thumb.on { opacity: 1 }
.pg-thumb:hover img { transform: scale(1.08) }
.pg-thumb.on { outline-color: var(--_a) }
.pg-zoom:focus-visible, .pg-nav:focus-visible, .pg-thumb:focus-visible, .pg-lightbox :focus-visible { outline: 2px solid var(--_a); outline-offset: 2px }

/* Image agrandie : fond sombre flou, image la plus grande possible */
.pg-lightbox { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 48px 68px 16px; background: var(--pg-lb-bg, #060d18d9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); cursor: zoom-out; animation: pgLightbox .2s ease }
.pg-lightbox[hidden] { display: none }
@keyframes pgLightbox { from { opacity: 0 } to { opacity: 1 } }
.pg-lb-fig { margin: 0; width: 100%; min-width: 0; display: grid; justify-items: center; gap: 10px }
.pg-lb-img { display: block; width: min(100%, calc((100vh - 116px) * var(--pg-ar, 16/10)), calc(var(--pg-w, 1600) * 1.5px)); height: auto; aspect-ratio: var(--pg-ar, 16/10); object-fit: contain; border-radius: var(--_r); background: #ffffff1f; box-shadow: 0 24px 70px #000000b0 }
.pg-lb-cap { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; justify-content: center; max-width: 900px; color: #e8eef6; font-size: 14px; line-height: 1.5; text-align: center; cursor: default }
.pg-lb-count { opacity: .75; font-size: 12px; white-space: nowrap }
.pg-lb-close { position: absolute; top: 8px; inset-inline-end: 12px; width: 38px; height: 38px; padding: 0 0 3px; border: 0; border-radius: var(--pg-nav-radius, 50%); background: #ffffff24; color: #fff; font: 26px/1 system-ui, sans-serif; cursor: pointer }
.pg-lb-close:hover { background: #ffffff40 }
.pg-lightbox .pg-nav { width: 44px; height: 44px; margin-top: -22px; font-size: 28px }
.pg-lightbox .pg-prev { inset-inline-start: 12px }
.pg-lightbox .pg-next { inset-inline-end: 12px }

/* Persan : de droite à gauche (ordre des miniatures, côtés et sens des flèches) */
.lang-rtl .pg, .lang-rtl .pg-lightbox { direction: rtl }
.lang-rtl .pg-nav span { display: inline-block; transform: scaleX(-1) }

/* Petit écran : image pleine largeur, flèches de l'image agrandie en bas */
@media (max-width: 700px) {
  .pg-lightbox { padding: 52px 10px 64px }
  .pg-lb-img { width: min(100%, calc((100vh - 170px) * var(--pg-ar, 16/10)), calc(var(--pg-w, 1600) * 1.5px)) }
  .pg-lightbox .pg-nav { top: auto; bottom: 10px; margin: 0 }
}

/* Animations réduites et appareil modeste : même galerie, sans fondu, sans glissement ni flou */
@media (prefers-reduced-motion: reduce) { .pg-in, .pg-lightbox { animation: none } .pg-nav, .pg-thumb, .pg-thumb img { transition: none } .pg-thumb:hover img { transform: none } }
.perf-lite .pg-in, .perf-lite .pg-lightbox { animation: none }
.perf-lite .pg-lightbox { -webkit-backdrop-filter: none; backdrop-filter: none; background: #060d18f2 }

/* Projet sans image : dégradé et icône, aucun texte (les 3 projets concernés restent donc propres pour les visiteurs).
   Chargé après les feuilles des bureaux : ces règles remplacent l'ancien cadre pointillé « Ajouter une photo ». */
.project-image:not(.has-image), .project-photo:not(.has-image) { border: 0; background: linear-gradient(135deg, var(--pg-g1, #8ab6dd), var(--pg-g2, #3a78b8)); }
.project-photo::before { content: none; }
.project-photo:not(.has-image)::after { border-color: #ffffff40; }
.project-image-empty, .project-modal-media .project-image-empty { margin: 0; padding: 0; border: 0; background: none; color: #fff; }
.project-image-empty i { font-style: normal; font-size: 40px; line-height: 1; color: #ffffffd9; filter: drop-shadow(0 4px 10px #0004); }
.project-modal-media .project-image-empty i { font-size: 72px; }
/* Téléphone (écran tactile, moins de 900 px) : flèches de la galerie et bouton « fermer » de l'agrandissement à 44 px au moins, pour le doigt */
@media (max-width: 899px) and (pointer: coarse) { .pg-nav { width: 44px; height: 44px; margin-top: -22px } .pg-lb-close { width: 44px; height: 44px } }