/* Galerie photos — styles propres à la page (refonte 2026-09-24) */

.ga-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 24px;margin-bottom:10px}
.ga-head .sk-title{margin-bottom:.3em}
.ga-hint{font-size:.92rem;margin:0 0 1.2em}
@media (hover:hover) and (pointer:fine){.ga-hint{display:none}}

/* Barre de filtres : collée sous l'en-tête pendant le défilement */
.ga-filters{position:sticky;top:var(--hdr);z-index:40;background:var(--paper);margin:0 calc(var(--gut) * -1) 14px;padding:10px var(--gut);transition:top .35s var(--ease)}
body.hdr-hidden .ga-filters,.sk-header.is-hidden~main .ga-filters{top:0}
.ga-filters button{min-height:44px;font-size:.92rem;transition:background .2s,color .2s,border-color .2s}
@media (hover:hover){.ga-filters button[aria-pressed="false"]:hover{border-color:var(--ink)}}
@media (min-width:761px){.ga-filters{justify-content:center}}

/* Grille : photos paysage (448×344), 2 / 3 / 4 colonnes */
.ga-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ga-grid>a{aspect-ratio:4/3;box-shadow:var(--shadow-s);cursor:zoom-in}
.ga-grid>[hidden]{display:none!important}
@media (max-width:1023px){.ga-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.ga-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ga-grid>a{border-radius:8px}}

/* Encart « Envoyez-nous la vôtre » */
.ga-send-wrap{padding-top:0}
.ga-send h2{color:#fff;margin:0 0 .25em;font-size:clamp(1.6rem,3.4vw,2.2rem)}
.ga-send .sk-eyebrow{color:var(--gold-l);margin-bottom:.6em}
.ga-send .sk-eyebrow::before{display:none}
.ga-send .sk-eyebrow svg{width:18px;height:18px}
.ga-send p{max-width:46ch}
@media (max-width:640px){.ga-send{padding:26px 20px}.ga-send .sk-btns{width:100%;flex-direction:column}.ga-send .sk-btn{width:100%}}
@media (max-width:640px){.ga-send-wrap .sk-callout::after{width:96px;height:96px;right:-44px;top:-44px}}

/* Relecture responsive 25/09 : titres équilibrés */
.page-portfolio_classic_3_cols h1,.page-portfolio_classic_3_cols h2{text-wrap:balance}
/* Visionneuse : le compteur (pleine largeur, au-dessus des flèches en mobile) interceptait les appuis sur précédent/suivant */
.sk-lb__count{pointer-events:none}
/* héros : fil d’Ariane et surtitre lisibles sur la photo claire */
.page-portfolio_classic_3_cols .sk-hero .sk-crumbs,.page-portfolio_classic_3_cols .sk-hero__kicker{text-shadow:0 1px 10px rgba(0,0,0,.75),0 0 2px rgba(0,0,0,.5)}
.page-portfolio_classic_3_cols .sk-hero .sk-crumbs{color:rgba(255,255,255,.95);font-weight:600}

/* =====================================================================
   Passe design 3 (25/09) — moment signature : mosaïque éditoriale rythmée.
   Une grande photo d'ouverture, puis un motif qui alterne (grande à gauche,
   grande à droite, bandeau large). Le motif est calculé sur les photos
   VISIBLES (:nth-child(… of :not([hidden]))) : il se recompose après un
   filtre et après l'injection des photos de galerie/galerie.json.
   Navigateurs anciens : simple grille régulière (repli ci-dessus).
   ===================================================================== */
.ga-head{display:block;margin:0 auto 18px;padding-top:8px}
.ga-head .sk-title{margin-bottom:.35em}
.ga-head .ga-hint{margin:0}
.ga-mosaic{grid-auto-flow:row dense}
.ga-mosaic>a{position:relative}
.ga-mosaic>a img{position:absolute;inset:0}
.ga-mosaic>a::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);pointer-events:none}
/* mobile (2 colonnes) : une photo large toutes les 5 */
@media (max-width:640px){
  .ga-mosaic>a:nth-child(5n+1 of :not([hidden])){grid-column:span 2;aspect-ratio:16/10}
  /* dernière photo seule sur sa ligne : elle prend toute la largeur */
  .ga-mosaic>a:nth-child(5n+2 of :not([hidden])):nth-last-child(1 of :not([hidden])),.ga-mosaic>a:nth-child(5n+4 of :not([hidden])):nth-last-child(1 of :not([hidden])){grid-column:span 2;aspect-ratio:16/10}
}
/* tablette (3 colonnes) : motif de 6, grande photo alternée gauche / droite */
@media (min-width:641px) and (max-width:1023px){
  .ga-mosaic>a:nth-child(6n+1 of :not([hidden])){grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
  .ga-mosaic>a:nth-child(12n+7 of :not([hidden])){grid-column:2/span 2}
  .ga-mosaic>a:nth-child(6n+4 of :not([hidden])):nth-last-child(1 of :not([hidden])){grid-column:1/-1;aspect-ratio:21/9}
}
/* grand écran (4 colonnes) : motif de 8 — grande 2×2, puis bandeau large */
@media (min-width:1024px){
  .ga-grid.ga-mosaic{gap:14px}
  .ga-mosaic>a:nth-child(8n+1 of :not([hidden])){grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
  .ga-mosaic>a:nth-child(16n+9 of :not([hidden])){grid-column:3/span 2}
  .ga-mosaic>a:nth-child(8n+7 of :not([hidden])){grid-column:span 2;aspect-ratio:auto}
  /* photo seule en fin de motif (après un bloc 2×2 complet) : bandeau pleine largeur */
  .ga-mosaic>a:nth-child(8n+6 of :not([hidden])):nth-last-child(1 of :not([hidden])){grid-column:1/-1;aspect-ratio:3/1}
}
/* fins de série (filtre actif, nombre de photos variable) : aucune case vide en bout de grille */
@media (min-width:641px) and (max-width:1023px){
  .ga-mosaic>a:nth-child(6n+1 of :not([hidden])):nth-last-child(2 of :not([hidden])){grid-column:auto/span 2;grid-row:auto;aspect-ratio:auto}
  .ga-mosaic>a:nth-child(6n+1 of :not([hidden])):nth-last-child(1 of :not([hidden])){grid-column:1/-1;grid-row:auto;aspect-ratio:21/9}
  .ga-mosaic>a:nth-child(6n+5 of :not([hidden])):nth-last-child(1 of :not([hidden])){grid-column:auto/span 2;aspect-ratio:auto}
}
@media (min-width:1024px){
  .ga-mosaic>a:nth-child(8n+1 of :not([hidden])):nth-last-child(1 of :not([hidden])){grid-column:1/-1;grid-row:auto;aspect-ratio:3/1}
  .ga-mosaic>a:nth-child(8n+1 of :not([hidden])):nth-last-child(2 of :not([hidden])),
  .ga-mosaic>a:nth-child(8n+2 of :not([hidden])):nth-last-child(1 of :not([hidden])),
  .ga-mosaic>a:nth-child(8n+1 of :not([hidden])):nth-last-child(3 of :not([hidden])){grid-column:auto/span 2;grid-row:auto;aspect-ratio:auto}
  .ga-mosaic>a:nth-child(8n+1 of :not([hidden])):nth-last-child(3 of :not([hidden]))~a:not([hidden]){aspect-ratio:4/3}
  .ga-mosaic>a:nth-child(8n+1 of :not([hidden])):nth-last-child(4 of :not([hidden])){grid-column:auto;grid-row:auto;aspect-ratio:4/3}
  .ga-mosaic>a:nth-child(8n+7 of :not([hidden])):nth-last-child(1 of :not([hidden])){grid-column:auto/span 3}
}