:root {
  --nuit: #121D2F;
  --nova-clair: #8FBBE0;
}
.fond-photo { position: relative; isolation: isolate; background-color: var(--nuit); color: var(--blanc); overflow: hidden; }
.fond-photo > *:not(.fond):not(.voile) { position: relative; z-index: 2; }
.fond-photo .fond { position: absolute; inset: 0; z-index: 0; display: block; }
.fond-photo .fond img { width: 100%; height: 100%; object-fit: cover; }
.fond-photo .voile { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(18,29,47,.90) 0%, rgba(18,29,47,.78) 48%, rgba(18,29,47,.94) 100%); }
.fond-photo h1, .fond-photo h2, .fond-photo h3 { color: var(--blanc); }
.fond-photo .lead, .fond-photo .sous, .fond-photo p { color: var(--blanc-80); }
.fond-photo .eyebrow { color: var(--nova-clair); }
.fond-photo .btn-clair { background: transparent; border-color: var(--blanc-20); color: var(--blanc); }
.fond-photo .btn-clair:hover { border-color: var(--blanc); }
.fond-photo a:not(.btn) { color: var(--blanc); }
.hero-int.fond-photo { background-image: none; }
@media (max-width: 640px) {
  .fond-photo .voile { background: linear-gradient(180deg, rgba(18,29,47,.93) 0%, rgba(18,29,47,.86) 50%, rgba(18,29,47,.96) 100%); }
}
@media (prefers-reduced-data: reduce) {
  .fond-photo .fond { display: none; }
}