/* Le fond reste dimensionné sur l'écran, quelle que soit la longueur de la galerie. */
.gallery-service-photo{display:block;width:100%;height:min(78vh,740px);object-fit:contain;margin:0 auto;border-radius:8px}
.gallery-service .gallery-project-caption{padding-top:12px}
.gallery-videos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:1110px;margin:28px auto 0}
.gallery-video-card{min-width:0;padding:10px;border:1px solid rgba(235,34,43,.46);border-radius:14px;background:linear-gradient(145deg,#151517,#070708);box-shadow:0 14px 35px #0006;overflow:hidden}
.gallery-video-card video{display:block;width:100%;height:380px;object-fit:contain;background:#050505;border-radius:8px}
.gallery-video-card p{margin:12px 4px 4px;font-weight:700;font-size:.82rem;color:#eee}
@media(max-width:760px){.gallery-videos{grid-template-columns:1fr;max-width:520px}.gallery-video-card video{height:auto;max-height:75vh;min-height:220px}}

/* Conserver les photos textiles entières, sur ordinateur et sur mobile. */
#canape-angle-gris .comparison,#tapis-clair .comparison{height:auto;aspect-ratio:4032 / 2270}
#canape-angle-gris .comparison-image,#canape-angle-gris .comparison-before img,
#tapis-clair .comparison-image,#tapis-clair .comparison-before img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:center top}

body.gallery-page {
  --gallery-header-height: 112px;
  margin: 0;
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  background: #050505;
}

.gallery-page .gallery-backdrop {
  position: fixed;
  z-index: -1;
  inset: var(--gallery-header-height) 0 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}

/* Une seule image nette, bord à bord, avec le cadrage conservé à gauche. */
.gallery-page .gallery-backdrop > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: left center;
}

/* Titres et réalisations partagent le centre de la page à toutes les largeurs. */
.gallery-page .gallery {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 30px 32px 42px;
  background: transparent;
}

.gallery-page .gallery .section-heading {
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}

.gallery-page .gallery .section-heading > * {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.gallery-page .gallery .gallery-project {
  width: 100%;
  max-width: 1110px;
  margin-left: auto;
  margin-right: auto;
}

.gallery-page .gallery .comparison-help {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1050px), (orientation: portrait) {
  .gallery-page .gallery {
    padding: 0 20px 32px;
  }

  /* Un premier écran dégagé permet de voir la raclette avant les comparateurs. */
  .gallery-page .gallery .section-heading {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 620px;
    min-height: calc(100vh - var(--gallery-header-height));
    min-height: calc(100svh - var(--gallery-header-height));
    margin: 0 auto 24px;
    padding: 24px 0;
  }

  .gallery-page .gallery .section-heading h1 {
    font-size: clamp(2rem, 6.5vw, 3.05rem);
    line-height: 1.06;
  }

  .gallery-page .gallery .section-heading > .eyebrow {
    font-size: clamp(.85rem, 2.6vw, 1.2rem);
    letter-spacing: .12em;
  }

  .gallery-page .gallery .section-heading > p:last-child {
    width: 100%;
    max-width: 54ch;
    margin-top: 18px;
    font-size: clamp(.95rem, 2.5vw, 1.2rem);
    line-height: 1.5;
  }

  .gallery-page .gallery .comparison-help {
    width: auto;
    max-width: 100%;
    margin: 0 auto 24px;
  }
}

@media (max-width: 760px) {
  body.gallery-page {
    --gallery-header-height: 68px;
  }
}

.photos-page .gallery .section-heading{min-height:0;margin-bottom:28px}
.photos-page .gallery .gallery-project{max-width:720px}

/* Galerie de prestations : catégories et cartes harmonisées. */
.photos-page .gallery{max-width:1240px;margin-inline:auto;padding-top:34px}
.photos-page .gallery .section-heading{max-width:850px;margin-bottom:24px}
.gallery-categories{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:0 auto 34px}
.gallery-categories a{display:inline-flex;align-items:center;gap:12px;padding:11px 17px;border:1px solid #98414a;border-radius:30px;background:#101015e8;font-size:.8rem;font-weight:800;color:#fff}
.gallery-categories a:hover,.gallery-categories a:focus-visible{background:#a51320;border-color:#ff4450}
.gallery-categories span{display:grid;place-items:center;min-width:22px;height:22px;border-radius:50%;background:#ffffff16;color:#f5bcc0;font-size:.7rem}
.gallery-category{padding:28px 24px 30px;margin:0 auto 26px;border:1px solid #ffffff29;border-radius:20px;background:transparent;scroll-margin-top:20px;box-shadow:none}
.gallery-category-heading{text-align:center;margin-bottom:24px}
.gallery-category-heading h2{font:900 clamp(1.6rem,3vw,2.3rem)/1.15 'Roboto Condensed',Arial,sans-serif;text-transform:uppercase;margin:0 0 10px}
.gallery-category-heading h2 em{color:#ef3038;font-style:normal}
.gallery-category-heading p{font-size:.85rem;line-height:1.7;color:#c8cdd4;margin:0}
.gallery-media-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,320px));justify-content:center;gap:20px}
.media-card{overflow:hidden;min-width:0;border:1px solid #ffffff25;border-radius:12px;background:transparent;box-shadow:none}
.media-frame{position:relative;aspect-ratio:9 / 16;background:transparent;overflow:hidden}
.media-frame>img,.media-frame>video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.media-frame .media-expand{opacity:1;top:10px;right:10px;width:36px;height:36px;font-size:1.2rem}
.media-expand:focus-visible{outline:3px solid #ef3038;outline-offset:3px}
.media-kind{position:absolute;bottom:12px;left:12px;padding:4px 10px;border:1px solid #ffffff35;border-radius:5px;background:#080808b8;color:#fff;font-size:.65rem;font-weight:800;text-transform:uppercase;pointer-events:none}
.media-card h3{margin:0;padding:16px;font:800 1.03rem/1.4 'Roboto Condensed',Arial,sans-serif;color:#eee}
@media(max-width:760px){.photos-page .gallery{padding:22px 16px 32px}.gallery-category{padding:24px 14px}.gallery-media-grid{grid-template-columns:minmax(0,360px);gap:18px}.gallery-categories{gap:8px;margin-bottom:26px}.gallery-categories a{padding:9px 12px;font-size:.72rem}.gallery-category-heading p{font-size:.8rem}}