/* Photos : héros avec visuels et bandeaux photo (pages installateurs et pages de prix) */
.hero-grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero-visuel { position: relative; aspect-ratio: 1 / 1.02; max-height: 560px; }
.hero-visuel .photo { position: absolute; overflow: hidden; border-radius: 30px; box-shadow: 0 30px 70px -30px rgba(18, 40, 29, .55); background: var(--surface-2); }
.hero-visuel .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-visuel .principale { inset: 0 0 18% 12%; border-radius: 160px 30px 30px 30px; }
.hero-visuel .secondaire { left: 0; bottom: 0; width: 46%; aspect-ratio: 4 / 3; border: 6px solid var(--bg); border-radius: 26px; }
.puce-flottante { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 99px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px -12px rgba(18, 40, 29, .35); font: 600 13.5px/1.25 var(--body); color: var(--fg); animation: flotte 6s ease-in-out infinite; }
.puce-flottante i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--warm); color: #fff; font-style: normal; font-size: 14px; flex: none; }
.puce-flottante small { display: block; color: var(--muted); font-weight: 500; font-size: 12px; }
.puce-flottante.a { top: 9%; left: 2%; } .puce-flottante.b { right: -2%; bottom: 9%; animation-delay: -3s; }
.puce-flottante.b i { background: var(--ice); color: #2A2100; }
@keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 900px) {
  .hero-grille { grid-template-columns: 1fr; }
  .hero-visuel { max-height: 400px; aspect-ratio: 16 / 11; } .hero-visuel .principale { inset: 0 0 14% 8%; border-radius: 90px 24px 24px 24px; } .hero-visuel .secondaire { width: 40%; }
  .puce-flottante.b { right: 2%; }
}
@media (prefers-reduced-motion: reduce) { .puce-flottante { animation: none; } }

/* Bandeau photo (pages de prix) */
.hero-photo { position: relative; overflow: hidden; border-radius: 30px; color: #fff; padding: clamp(28px, 6vw, 60px) clamp(22px, 5vw, 56px); margin-top: 14px; isolation: isolate; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; }
.hero-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(18, 40, 29, .88) 0%, rgba(18, 40, 29, .55) 55%, rgba(18, 40, 29, .15) 100%); }
.hero-photo .label { color: var(--ice); }
.hero-photo h1 { color: #fff; }
.hero-photo .chaud { color: var(--ice); -webkit-text-fill-color: var(--ice); background: none; }
.hero-photo .intro { color: rgba(255, 255, 255, .9); max-width: 60ch; }
.hero-photo .btn.secondaire { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .45); }
.hero-photo .btn.secondaire:hover { background: rgba(255, 255, 255, .24); }