/* ==========================================================================
   GALERIES — remplace FooGallery (fonctions/galerie.php, ressources/js/galerie.js)
   ==========================================================================
   Valeurs relevées dans la feuille de FooGallery 3.3.3 (production, 18/09/2026) :
   thème fg-light, fg-border-medium (bordure blanche de 10 px), fg-shadow-outline
   (liseré #ddd), masonry fg-col3 : 3 colonnes, 2 à 480 px et moins, 1 à 320 px
   et moins (gouttière nulle).
   Bordure et gouttière : décision de François (18/09/2026), les mêmes sur les
   fiches, les points de vue et les hubs — 14 px chacune à partir de 768 px, 10
   et 10 px en dessous. La production avait une bordure de 10 px partout, une
   gouttière de 10 px (fiches) ou 20 px (hubs), jugées trop justes ou trop larges.
   Survol : « oscar » sur les fiches et points de vue (fg-preset fg-oscar
   fg-preset-small), zoom léger et voile sur les hubs (fg-hover-semi-zoomed,
   fg-caption-hover, fg-hover-zoom4).

   Sans JavaScript : grille simple. Avec : galerie.js ajoute .galerie--prete
   et place chaque photo dans la colonne la plus courte (mosaïque).
   ========================================================================== */

.galerie {
    --galerie-colonnes: 3;
    --galerie-bordure: 10px;
    --galerie-gouttiere: 10px;
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--galerie-colonnes), minmax(0, 1fr));
    gap: var(--galerie-gouttiere);
    align-items: start;
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media screen and (min-width: 768px) {
    .galerie { --galerie-bordure: 14px; --galerie-gouttiere: 14px; }
}

@media screen and (max-width: 480px) {
    .galerie { --galerie-colonnes: 2; }
}

@media screen and (max-width: 320px) {
    .galerie { --galerie-colonnes: 1; --galerie-gouttiere: 0px; }
}

.galerie--prete {
    display: block;
}

/* Hubs : la galerie est dans un bloc « texte seul » du constructeur, conteneur
   flex au-delà de 1 023 px (page-generique.css) où le contenu se réduit à sa
   largeur propre. En production, la galerie « mobile » n'y était jamais
   affichée sur ordinateur ; elle l'est désormais (décision « hubs ») et prend
   toute la largeur. */
.texte-content:has(> .galerie) {
    flex: 1 1 100%;
}

.galerie--prete .galerie__element {
    position: absolute;
}

.galerie__element {
    position: relative;
    box-sizing: border-box;
    margin: 0;
    overflow: hidden;
    background-color: #fff;
    border: var(--galerie-bordure) solid #fff;
    box-shadow: 0 0 0 1px #ddd;
    line-height: 0;
}

.galerie__element[hidden] {
    display: none;
}

.galerie__lien {
    display: block;
    position: relative;
    overflow: hidden;
}

.galerie__image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0;
}

/* Légende : visible au survol seulement (fg-caption-hover) ; les clics
   traversent vers le lien. */
.galerie__legende {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: visibility .3s ease, opacity .3s ease, background-color .3s ease;
}

.galerie__element:hover .galerie__legende,
.galerie__element:focus-within .galerie__legende {
    visibility: visible;
    opacity: 1;
}

/* — Fiches et points de vue : « oscar » — */
.galerie--oscar .galerie__lien {
    background: linear-gradient(45deg, #22682a 0, #9b4a1b 40%, #3a342a 100%);
}

.galerie--oscar .galerie__image {
    transition: opacity .35s;
}

.galerie--oscar .galerie__element:hover .galerie__image,
.galerie--oscar .galerie__element:focus-within .galerie__image {
    opacity: .4;
}

.galerie--oscar .galerie__legende {
    padding: 30px 25px 25px;
}

.galerie--oscar .galerie__legende::before {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px solid #fff;
    opacity: 0;
    transform: scale(0);
    transition: opacity .35s, transform .35s;
}

.galerie--oscar .galerie__element:hover .galerie__legende::before,
.galerie--oscar .galerie__element:focus-within .galerie__legende::before {
    opacity: 1;
    transform: scale(1);
}

/* — Hubs : zoom léger, voile sombre et loupe — */
.galerie--zoom .galerie__image {
    transition: transform .3s ease;
}

.galerie--zoom .galerie__element:hover .galerie__image,
.galerie--zoom .galerie__element:focus-within .galerie__image {
    transform: scale(1.05);
}

.galerie--zoom .galerie__legende {
    flex-direction: column;
    gap: 10px;
    background-color: rgba(0, 0, 0, .5);
    font-size: 13px;
}

.galerie--zoom .galerie__legende span {
    font-size: 16px;
}

.galerie--zoom .galerie__legende::before {
    content: '';
    width: 32px;
    height: 32px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='14' cy='14' r='9'/%3E%3Cpath d='M21 21l7 7M14 10v8M10 14h8'/%3E%3C/svg%3E") center / 32px 32px no-repeat;
}

/* — Pagination des hubs (fg-paging-container, fg-light) — */
.galerie-pages {
    display: block;
    padding: 15px;
    margin: 0 auto;
    text-align: center;
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    user-select: none;
}

.galerie-pages__lien {
    display: inline-block;
    min-width: 40px;
    padding: 6px 12px;
    margin: 1px;
    font: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    color: #333;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: color .3s ease-out, border-color .3s ease-out, background-color .3s ease-out;
}

.galerie-pages__lien:hover,
.galerie-pages__lien:focus-visible {
    background-color: #e6e6e6;
    border-color: #adadad;
    outline: 0;
}

.galerie-pages__lien[aria-current="page"] {
    background-color: #fff;
    border-color: #ccc;
    cursor: default;
}

.galerie-pages__lien:disabled {
    opacity: .5;
    cursor: not-allowed;
    background-color: transparent;
    border-color: transparent;
}

/* — Visionneuse PhotoSwipe : légende en bas — */
.pswp__legende {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 20px;
    color: #fff;
    background-color: rgba(0, 0, 0, .5);
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
}

.pswp__legende[hidden] {
    display: none;
}