/* ========================================================================== SIMPLE Gallery — galerie de vignettes et Lightbox La galerie est dans l'enveloppe .sphf de SIMPLE Core (taille de texte, couleurs --sphf-*). La Lightbox (.sphf-gal-lightbox) est posée directement dans pour échapper aux conteneurs du thème ; elle reçoit les mêmes variables et neutralise elle-même les styles du thème. Tout est en em. Deux dispositions : - lignes justifiées (--rows) : toutes les vignettes d'une ligne ont la même hauteur et la ligne va de bord à bord ; - colonnes (--columns) : colonnes de même largeur (Masonry). Sans JavaScript, une disposition approchée en CSS pur reste lisible. ========================================================================== */ /* ------------------------------------------------------------ Galerie */ .sphf-gallery { container-type: inline-size; } .sphf-gallery .sphf-gal-grid { --sphf-gal-cols: var(--sphf-gal-cols-l, 4); --sphf-gal-row: var(--sphf-gal-row-l, 240px); margin: 0 !important; padding: 0 !important; } @container (max-width: 999px) { .sphf-gallery .sphf-gal-grid { --sphf-gal-cols: var(--sphf-gal-cols-m, 3); --sphf-gal-row: var(--sphf-gal-row-m, 200px); } } @container (max-width: 559px) { .sphf-gallery .sphf-gal-grid { --sphf-gal-cols: var(--sphf-gal-cols-s, 2); --sphf-gal-row: var(--sphf-gal-row-s, 160px); } } .sphf-gallery .sphf-gal-item { display: block; margin: 0 !important; padding: 0 !important; } .sphf-gallery .sphf-gal-item::before, .sphf-gallery .sphf-gal-item::after { content: none !important; display: none !important; } /* Colonnes, sans JavaScript : colonnes CSS (lecture de haut en bas). */ .sphf-gallery .sphf-gal-grid--columns { column-count: var(--sphf-gal-cols); column-gap: var(--sphf-gal-gap, 2px); } .sphf-gallery .sphf-gal-grid--columns .sphf-gal-item { margin: 0 0 var(--sphf-gal-gap, 2px) !important; break-inside: avoid; -webkit-column-break-inside: avoid; } /* Lignes, sans JavaScript : chaque vignette s'élargit en proportion de son format, ce qui donne des lignes de même hauteur ; seule la dernière ligne n'est pas complète. Le script calcule ensuite des lignes toutes complètes. */ .sphf-gallery .sphf-gal-grid--rows { display: flex; flex-wrap: wrap; gap: var(--sphf-gal-gap, 2px); } .sphf-gallery .sphf-gal-grid--rows .sphf-gal-item { flex: var(--sphf-gal-ratio, 1.5) 1 calc(var(--sphf-gal-ratio, 1.5) * var(--sphf-gal-row)); min-width: 0; } .sphf-gallery .sphf-gal-grid--rows::after { content: ""; flex-grow: 1000000; } /* Avec JavaScript : chaque vignette est placée par le script (les deux dispositions). */ .sphf-gallery.sphf-gal--js .sphf-gal-grid { position: relative; display: block; column-count: auto; } .sphf-gallery.sphf-gal--js .sphf-gal-grid::after { content: none; } .sphf-gallery.sphf-gal--js .sphf-gal-item { position: absolute; top: 0; left: 0; margin: 0 !important; } .sphf-gallery.sphf-gal--js .sphf-gal-grid:not(.is-ready) .sphf-gal-item { visibility: hidden; } .sphf-gallery .sphf-gal-open { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--sphf-zone); color: #fff; text-decoration: none !important; box-shadow: none !important; line-height: 0; cursor: zoom-in; } .sphf-gallery .sphf-gal--round .sphf-gal-open { border-radius: var(--sphf-radius-s); } .sphf-gallery .sphf-gal-open:focus-visible { outline: 3px solid var(--sphf-accent-ring); outline-offset: 2px; } .sphf-gallery .sphf-gal-img { display: block; width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: var(--sphf-gal-ratio, 1.5); margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; object-fit: cover; transition: transform .5s ease, filter .3s ease; } .sphf-gallery .sphf-gal-open:hover .sphf-gal-img { transform: scale(1.035); } .sphf-gallery .sphf-gal-shield { position: absolute; inset: 0; } /* Informations sur la vignette : toujours visibles, ou au survol. */ .sphf-gallery .sphf-gal-cap { position: absolute; left: 0; right: 0; bottom: 0; display: block; padding: 2.4em .9em .8em; background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, .35) 55%, rgba(0, 0, 0, 0)); color: #fff; font-size: .86em; line-height: 1.35; pointer-events: none; } .sphf-gallery .sphf-gal--hover .sphf-gal-cap { opacity: 0; transform: translateY(.4em); transition: opacity .25s ease, transform .25s ease; } .sphf-gallery .sphf-gal--hover .sphf-gal-open:hover .sphf-gal-cap, .sphf-gallery .sphf-gal--hover .sphf-gal-open:focus-visible .sphf-gal-cap { opacity: 1; transform: none; } /* Informations sous l'image. */ .sphf-gallery .sphf-gal-below, .sphf-gallery .sphf-gal-below span, .sphf-gallery .sphf-gal-cap span { text-align: left !important; } .sphf-gallery .sphf-gal-below { padding: .55em .1em .2em; color: var(--sphf-text); font-size: .86em; line-height: 1.4; } .sphf-gallery .sphf-gal-info, .sphf-gal-lightbox .sphf-gal-info { display: flex; flex-direction: column; gap: .15em; text-align: left; } .sphf-gallery .sphf-gal-info > span, .sphf-gal-lightbox .sphf-gal-info > span { display: block; } .sphf-gallery .sphf-gal-info__title, .sphf-gal-lightbox .sphf-gal-info__title { font-weight: 700; } .sphf-gallery .sphf-gal-info__meta, .sphf-gallery .sphf-gal-info__kw { opacity: .85; } .sphf-gallery .sphf-gal-below .sphf-gal-info__meta, .sphf-gallery .sphf-gal-below .sphf-gal-info__kw { color: var(--sphf-muted); opacity: 1; } .sphf-gallery .sphf-gal-empty p { margin: 0; } .sphf-gallery .sphf-gal-empty .sphf-gal-admin-note { margin-top: .75em; font-size: .86em; } /* Protection : ni sélection, ni glisser, ni menu « Enregistrer l'image ». */ .sphf-gal--protect .sphf-gal-img, .sphf-gal-lightbox.is-protect .sphf-gal-lightbox__img { pointer-events: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .sphf-gal--protect .sphf-gal-open { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; } /* ------------------------------------------------------------ Lightbox */ html.sphf-gal-lock, html.sphf-gal-lock body { overflow: hidden !important; } .sphf-gal-lightbox { position: fixed; inset: 0; z-index: 2147483000; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; margin: 0; padding: 0; background: var(--sphf-gal-bg, rgba(0, 0, 0, .94)); color: var(--sphf-gal-fg, #fff); font-family: var(--sphf-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif); font-weight: 400; line-height: 1.45; text-align: left; text-transform: none; letter-spacing: normal; -webkit-font-smoothing: antialiased; opacity: 0; transition: opacity .22s ease; } .sphf-gal-lightbox[hidden] { display: none; } .sphf-gal-lightbox.is-open { opacity: 1; } .sphf-gal-lightbox *, .sphf-gal-lightbox *::before, .sphf-gal-lightbox *::after { box-sizing: border-box; text-transform: none !important; letter-spacing: normal !important; } .sphf-gal-lightbox .sphf-gal-lightbox__bar { display: flex; align-items: center; gap: .5em; padding: .75em .9em; } .sphf-gal-lightbox .sphf-gal-lightbox__count { flex: 1 1 auto; margin: 0 !important; text-align: left !important; font-size: .9em; font-variant-numeric: tabular-nums; opacity: .8; } .sphf-gal-lightbox .sphf-gal-btn { all: unset; box-sizing: border-box !important; display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.75em !important; height: 2.75em !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: color-mix(in srgb, currentColor 12%, transparent) !important; box-shadow: none !important; color: inherit !important; font: inherit !important; cursor: pointer; transition: background .15s ease, transform .15s ease; } .sphf-gal-lightbox .sphf-gal-btn:hover { background: color-mix(in srgb, currentColor 22%, transparent) !important; } .sphf-gal-lightbox .sphf-gal-btn:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; } .sphf-gal-lightbox .sphf-gal-btn[hidden] { display: none !important; } .sphf-gal-lightbox .sphf-gal-btn svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sphf-gal-lightbox .sphf-gal-lightbox__stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 4.25em; touch-action: pan-y pinch-zoom; } .sphf-gal-lightbox .sphf-gal-lightbox__frame { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .sphf-gal-lightbox .sphf-gal-lightbox__img { display: block !important; max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; object-fit: contain; transition: opacity .2s ease; } .sphf-gal-lightbox.is-loading .sphf-gal-lightbox__img { opacity: .15; } .sphf-gal-lightbox .sphf-gal-lightbox__shield { position: absolute; inset: 0; } .sphf-gal-lightbox .sphf-gal-nav { position: absolute; top: 50%; transform: translateY(-50%); } .sphf-gal-lightbox .sphf-gal-nav:hover { transform: translateY(-50%) scale(1.06); } .sphf-gal-lightbox .sphf-gal-nav--prev { left: .75em; } .sphf-gal-lightbox .sphf-gal-nav--next { right: .75em; } .sphf-gal-lightbox .sphf-gal-lightbox__info { min-height: 1em; max-width: 48em; margin: 0 auto; padding: .75em 1.25em 1.1em; font-size: .9em; text-align: center; } .sphf-gal-lightbox .sphf-gal-lightbox__info .sphf-gal-info, .sphf-gal-lightbox .sphf-gal-lightbox__info .sphf-gal-info span { align-items: center; text-align: center !important; } .sphf-gal-lightbox .sphf-gal-lightbox__info .sphf-gal-info__meta, .sphf-gal-lightbox .sphf-gal-lightbox__info .sphf-gal-info__kw { opacity: .75; } .sphf-gal-lightbox .sphf-gal-lightbox__info:empty { padding: 0 0 .75em; } .sphf-gal-lightbox:fullscreen { background: var(--sphf-gal-bg-solid, #000); } @media (max-width: 760px) { .sphf-gal-lightbox .sphf-gal-lightbox__stage { padding: 0; } .sphf-gal-lightbox .sphf-gal-nav { width: 2.4em !important; height: 2.4em !important; background: color-mix(in srgb, currentColor 18%, transparent) !important; } .sphf-gal-lightbox .sphf-gal-nav--prev { left: .4em; } .sphf-gal-lightbox .sphf-gal-nav--next { right: .4em; } .sphf-gal-lightbox .sphf-gal-lightbox__info { font-size: .82em; } } @media (prefers-reduced-motion: reduce) { .sphf-gallery .sphf-gal-img, .sphf-gallery .sphf-gal-cap, .sphf-gal-lightbox, .sphf-gal-lightbox * { transition: none !important; } }