/* ===== PAGE HERO ===== */
.page-hero{
  position:relative;background:var(--dark-2);color:#fff;overflow:hidden;
  padding:calc(70px + env(safe-area-inset-top)) 0 64px;
}
.page-hero-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.62;transform:scale(1.05);
}
.page-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(18,16,14,.86) 0%,rgba(18,16,14,.66) 48%,rgba(18,16,14,.32) 100%);
}
.page-hero-inner{position:relative;z-index:2}
.crumb{display:flex;align-items:center;gap:9px;font-size:13px;color:#b9b5ad;margin-bottom:22px}
.crumb a{color:#b9b5ad}.crumb a:hover{color:var(--orange)}
.crumb strong{color:#fff;font-weight:600}
.page-hero .hero-eyebrow{margin-bottom:16px}
.page-hero h1{
  font-family:'Poppins',sans-serif;font-weight:800;letter-spacing:-1.5px;
  font-size:clamp(40px,5.5vw,76px);line-height:1;margin-bottom:18px;
}
.page-hero p{max-width:620px;font-size:clamp(16px,1.4vw,19px);color:#d6d3ce;line-height:1.6}
.page-hero-stats{display:flex;gap:46px;flex-wrap:wrap;margin-top:38px}
.page-hero-stats div{display:flex;flex-direction:column}
.page-hero-stats strong{font-family:'Poppins',sans-serif;font-weight:800;font-size:40px;line-height:1;color:#fff}
.page-hero-stats strong::after{content:attr(data-suffix);color:var(--orange)}
.page-hero-stats span{margin-top:6px;font-size:13px;letter-spacing:.6px;text-transform:uppercase;color:#b9b5ad}

/* ===== GALLERY (masonry) — crème chaleureuse ===== */
.gallery-section{
  padding:70px 0 96px;
  background:linear-gradient(180deg,#f6f2ec 0%,#efe9df 100%);
  position:relative;
}
.gallery-section::before{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:60px;height:4px;border-radius:0 0 3px 3px;background:var(--orange);
}
.gallery{
  column-count:4;column-gap:18px;
}
.gallery-item{
  break-inside:avoid;margin:0 0 18px;position:relative;border-radius:14px;overflow:hidden;
  cursor:zoom-in;background:#e7e1d6;display:block;
  border:1px solid rgba(20,18,15,.06);
  box-shadow:0 10px 26px rgba(20,18,15,.10);
  transition:opacity .6s ease,transform .6s ease,box-shadow .35s,border-color .35s;
}
/* L'apparition au defilement n'est appliquee QUE si le JavaScript tourne (.js-anim
   est pose par realisations.js). Sans lui, la galerie doit rester entierement
   visible : c'est desormais du vrai contenu HTML, pas une grille fabriquee au vol. */
.js-anim .gallery-item{opacity:0;transform:translateY(18px)}
.gallery-item.in{opacity:1;transform:none}
.gallery-item img{width:100%;height:auto;display:block;transition:transform .5s ease}
.gallery-item::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,18,15,0) 60%,rgba(20,18,15,.4));
  opacity:0;transition:opacity .35s;
}
.gallery-item .gi-zoom{
  position:absolute;right:12px;bottom:12px;z-index:2;width:40px;height:40px;border-radius:50%;
  background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.7) translateY(6px);transition:opacity .35s,transform .35s;
}
.gallery-item .gi-zoom svg{width:20px;height:20px}
.gallery-item:hover{box-shadow:0 22px 46px rgba(20,18,15,.20);border-color:rgba(234,110,30,.5)}
.gallery-item:hover img{transform:scale(1.06)}
.gallery-item:hover::after{opacity:1}
.gallery-item:hover .gi-zoom{opacity:1;transform:scale(1) translateY(0)}

.gallery-cta{
  margin-top:54px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;
}
.gallery-cta p{font-size:18px;color:#444;font-weight:500}

/* ===== RESPONSIVE ===== */
@media(max-width:1100px){ .gallery{column-count:3} }
@media(max-width:760px){
  .gallery{column-count:2;column-gap:12px}
  .gallery-item{margin-bottom:12px}
  .page-hero-stats{gap:30px}
  .page-hero-stats strong{font-size:32px}
}
@media(max-width:440px){
  .gallery{column-count:1}
}

@media (prefers-reduced-motion: reduce){
  .js-anim .gallery-item{opacity:1;transform:none}
  .page-hero-bg{transform:none}
}

/* ===== Galerie ecrite en dur : intro, filtres, legendes =====================
   La grille etait auparavant fabriquee en JavaScript. Elle est maintenant dans
   le HTML servi ; ces regles habillent les elements ajoutes (intro, barre de
   filtres, legende sous chaque photo). */
.gal-intro{max-width:820px;margin:0 auto 34px;text-align:center}
.gal-intro h2{
  font-family:'Poppins',sans-serif;font-weight:800;letter-spacing:-.6px;
  font-size:clamp(24px,2.8vw,36px);line-height:1.2;color:var(--ink);margin-bottom:16px;
}
.gal-intro p{color:#514c45;font-size:16.5px;line-height:1.75;margin-bottom:12px}
.gal-intro a{color:var(--orange);font-weight:600}

.gal-filtres{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:0 auto 30px}
.gal-filtres button{
  font-family:'Poppins',sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;
  border:1px solid rgba(20,18,15,.14);background:#fff;color:#4a453e;
  border-radius:999px;padding:9px 17px;transition:background .25s,color .25s,border-color .25s;
}
.gal-filtres button span{opacity:.5;margin-left:5px;font-weight:500}
.gal-filtres button:hover{border-color:var(--orange);color:var(--ink)}
.gal-filtres button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.gal-filtres button.on span{opacity:.6}

/* la figure porte la marge ; l'arrondi et le survol restent sur la photo */
.gallery-item{overflow:visible;background:none;border:0;box-shadow:none;cursor:default}
.gallery-item:hover{box-shadow:none;border-color:transparent}
.gallery-item[hidden]{display:none}
.gi-ph{
  display:block;position:relative;border-radius:14px;overflow:hidden;cursor:zoom-in;
  background:#e7e1d6;border:1px solid rgba(20,18,15,.06);
  box-shadow:0 10px 26px rgba(20,18,15,.10);
  transition:box-shadow .35s,border-color .35s;
}
.gi-ph:hover{box-shadow:0 22px 46px rgba(20,18,15,.20);border-color:rgba(234,110,30,.5)}
.gi-ph:hover img{transform:scale(1.06)}
.gi-ph::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,18,15,0) 60%,rgba(20,18,15,.4));
  opacity:0;transition:opacity .35s;
}
.gi-ph:hover::after{opacity:1}
.gi-ph:hover .gi-zoom{opacity:1;transform:scale(1) translateY(0)}
.gi-cap{
  display:block;padding:9px 3px 0;font-size:13px;line-height:1.5;color:#5d574f;
}
.gi-ville{
  display:inline-block;margin-left:4px;font-weight:600;color:var(--orange);white-space:nowrap;
}
.gi-ville::before{content:"· "}

.gal-zone{
  max-width:900px;margin:56px auto 0;padding-top:34px;text-align:center;
  border-top:1px solid rgba(20,18,15,.10);
}
.gal-zone h2{
  font-family:'Poppins',sans-serif;font-weight:700;font-size:20px;color:var(--ink);margin-bottom:12px;
}
.gal-zone p{color:#6a645c;font-size:14.5px;line-height:1.8}
.gal-zone a{color:var(--orange);font-weight:600}

@media(max-width:760px){
  .gi-cap{font-size:12px;padding-top:7px}
  .gal-filtres button{font-size:12.5px;padding:8px 13px}
}