.heros-photo.heros-julien { left: 0; right: 0; bottom: 0; width: 100%; height: 100%; transform: none; }
.heros:has(.heros-julien)::after {
background: linear-gradient(90deg, rgba(20, 22, 24, .86) 0%, rgba(20, 22, 24, .6) 46%, rgba(20, 22, 24, .12) 78%),
linear-gradient(0deg, var(--anthracite) 0, rgba(37, 37, 37, .7) 110px, rgba(37, 37, 37, 0) 55%);
}
@media (max-width: 899px) {
.heros-photo.heros-julien { bottom: auto; height: min(100%, 480px); }
.heros-photo.heros-julien img { -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); }
.heros:has(.heros-julien)::after { background: linear-gradient(180deg, rgba(20, 22, 24, .45) 0%, rgba(20, 22, 24, .78) 30%, rgba(20, 22, 24, .92) 60%, var(--anthracite) 100%); }
}
.tete-revetement + .metiers::before {
content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 72px; pointer-events: none;
background: linear-gradient(180deg, var(--anthracite), rgba(37, 37, 37, 0));
}
body .l2s-heros { grid-template-columns: minmax(0, 1fr); padding-bottom: 168px; }
body .l2s-heros .l2s-texte { align-self: end; }
body .l2s-heros::after {
content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 130px; pointer-events: none;
background: linear-gradient(180deg, rgba(247, 244, 239, 0) 0%, rgba(247, 244, 239, .3) 40%, rgba(247, 244, 239, .85) 75%, var(--fond) 100%);
}
.svh-sommaire-bande { background: var(--fond, #F7F4EF); padding: 8px 0 clamp(28px, 4vh, 48px); }
.svh-sommaire-bande .svh-sommaire { justify-self: auto; width: min(1240px, 100% - 2 * var(--marge)); max-width: none; margin: 0 auto clamp(12px, 2vh, 24px); padding: 0; }
.svh-sommaire-bande .svh-sommaire h2 { display: block; margin: 0 0 12px; padding: 0; background: none; color: var(--texte, #2E2E2E); font-size: clamp(20px, 1.6vw, 24px); }
.svh-sommaire-bande .svh-sommaire ol { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.svh-sommaire-bande .svh-sommaire a { background: #FFFFFF; border: 1px solid var(--trait, #E1DDD6); color: var(--texte, #2E2E2E); }
.svh-sommaire-bande .svh-sommaire a:hover, .svh-sommaire-bande .svh-sommaire a:focus-visible { background: #FFFFFF; box-shadow: inset 4px 0 0 var(--cyan); }
@media (max-width: 1023px) { .svh-sommaire-bande .svh-sommaire ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) {
body .l2s-heros { padding-bottom: 96px; }
body .l2s-heros::after { height: 80px; }
}
@media (max-width: 599px) { .svh-sommaire-bande .svh-sommaire ol { grid-template-columns: minmax(0, 1fr); } }
.l2s-tete:not(.sans-photo) .l2s-bande::before {
content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 96px; pointer-events: none;
background: linear-gradient(180deg, rgba(247, 244, 239, 0) 0%, rgba(247, 244, 239, .6) 50%, var(--fond) 100%);
}
.l2s-tete:not(.sans-photo) .l2s-cap { padding-bottom: 116px; }
@media (max-width: 899px) {
.l2s-tete:not(.sans-photo) .l2s-bande::before { height: 64px; }
.l2s-tete:not(.sans-photo) .l2s-cap { padding-bottom: 80px; }
}
.renos-heros .aa::after {
content: ""; position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 96px; pointer-events: none;
background: linear-gradient(180deg, rgba(247, 244, 239, 0) 0%, rgba(247, 244, 239, .6) 50%, var(--fond) 100%);
}
.renos-heros .renos-texte { bottom: 112px; }
@media (min-width: 1400px) { .heros-photo.heros-julien img { object-position: 40% 14% !important; } }
.svh-blocs.de-cote .svh-bloc { align-content: start; padding-top: calc(var(--haut-fixe) + var(--entete) + clamp(24px, 5vh, 56px)); }
.svh-sommaire-bande { position: relative; z-index: 2; }
.svh-sommaire-bande:has(+ .svh-blocs.de-cote), .svh-sommaire-bande:has(+ .pin-spacer > .svh-blocs.de-cote) {
margin-bottom: calc(-1 * (var(--haut-fixe) + var(--entete) + clamp(24px, 5vh, 56px)) + 24px); }
.page-realisations .tete-page.tete-drone {
position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
min-height: min(92vh, 980px); min-height: min(92svh, 980px);
padding: calc(var(--haut-fixe) + var(--entete) + clamp(120px, 24vh, 260px)) 0 clamp(40px, 9vh, 96px);
background: #121314; color: #FFFFFF; border-bottom: 0;
}
.tete-drone .td-fond { position: absolute; inset: 0; z-index: 0; width: auto; height: auto; max-height: none; margin: 0; aspect-ratio: auto; background: #121314; }
.tete-drone::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
radial-gradient(ellipse 78% 72% at 0% 92%, rgba(18, 19, 20, .62) 0%, rgba(18, 19, 20, .5) 38%, rgba(18, 19, 20, .22) 70%, rgba(18, 19, 20, 0) 100%),
linear-gradient(180deg, rgba(18, 19, 20, 0) 0%, rgba(18, 19, 20, .06) 26%, rgba(18, 19, 20, .34) 50%, rgba(18, 19, 20, .7) 72%, rgba(18, 19, 20, .92) 88%, #121314 100%);
}
.tete-drone .td-texte { position: relative; z-index: 2; }
.tete-drone .td-bloc { position: relative; width: fit-content; max-width: 100%; }
.tete-drone .td-bloc::before {
content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -42% -18% -26% -18%;
background: radial-gradient(closest-side, rgba(18, 19, 20, .82) 0%, rgba(18, 19, 20, .78) 64%, rgba(18, 19, 20, .46) 86%, rgba(18, 19, 20, 0) 100%);
}
.tete-drone h1 { max-width: 9ch; margin: 0; color: #FFFFFF; font-size: clamp(46px, 7.4vw, 124px); }
.tete-drone .lead { max-width: 40ch; margin: 20px 0 0; color: rgba(255, 255, 255, .9); font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; }
.tete-drone .pastille { z-index: 3; }
@media (max-width: 699px) {
.tete-drone .td-fond > img, .tete-drone .td-fond > .pv-video { object-position: 46% 50%; }
.tete-drone .td-fond { bottom: auto; height: min(100%, 110vw);
-webkit-mask-image: linear-gradient(180deg, #000 0, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 58%, transparent 100%); }
.tete-drone .td-fond > picture > img { object-position: 50% 50%; }
.page-realisations .tete-page.tete-drone { min-height: 88vh; min-height: 88svh; padding-top: calc(var(--haut-fixe) + var(--entete) + 140px); }
}
@media (max-height: 500px) {
.page-realisations .tete-page.tete-drone { min-height: 100vh; min-height: 100svh; padding: calc(var(--haut-fixe) + var(--entete) + 16px) 0 calc(18px + var(--barre-bas, 0px)); }
.tete-drone h1 { max-width: none; font-size: clamp(32px, 9vh, 44px); }
.tete-drone .lead { max-width: 60ch; margin-top: 10px; font-size: 16px; line-height: 1.45; }
}
.page-realisations .tete-drone + .rb-bande::before {
content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 160px; pointer-events: none;
background: linear-gradient(180deg, #121314 0%, rgba(18, 19, 20, .6) 45%, rgba(18, 19, 20, 0) 100%);
}
@media (min-width: 900px) and (max-height: 760px) {
.page-revetement-commercial .l2s-tete.sans-photo .l2s-cap { padding-top: 24px; padding-bottom: 20px; }
}
@media (min-width: 900px) {
.l2s-raisons { padding-right: max(0px, 210px - (100vw - min(var(--large), 100vw - 2 * var(--marge))) / 2); }
}
@media (min-width: 900px) and (max-height: 760px) {
.l2s-raisons { padding-top: 4px; }
.l2s-dem { gap: 6px; padding-top: 12px; padding-bottom: 12px; }
.l2s-dem b { font-size: 18px; }
.page-gouttieres .l2s-raisons { padding-top: 18px; }
}
@media (min-width: 900px) and (max-height: 760px) and (prefers-reduced-motion: no-preference) {
.page-revetement-residentiel .l2s-raisons { padding-top: 18px; }
}
@media (min-width: 900px) {
.page-carrieres .postes-ecran { padding-bottom: 24px; }
.page-carrieres .candidature-zone { padding-top: 16px; }
}
@media (min-width: 900px) and (max-height: 760px) {
.page-soumission .tete-page { padding-top: calc(var(--haut-fixe) + var(--entete) + 20px); }
}
@media (max-height: 500px) {
.page-nous-joindre .carte-grand-texte { gap: 6px; padding-top: 4px; padding-right: 200px; }
.page-nous-joindre .carte-grand-texte h1 { margin-top: 0; font-size: 24px; }
.page-nous-joindre .carte-grand-texte > p { max-width: none; font-size: 14px; line-height: 1.4; }
.page-nous-joindre .coordonnees a, .page-nous-joindre .coordonnees div { flex-direction: row; align-items: baseline; gap: 10px; padding: 6px 0; }
.page-nous-joindre .coordonnees .v { font-size: 16px; }
}
@media (max-height: 500px) and (max-width: 699px) { .page-nous-joindre .coordonnees li + li { margin-top: 8px; } }
@media (min-width: 900px) and (min-height: 1000px) { .page-faq .tete-page { padding-bottom: 34px; } }
@media (max-width: 699px) {
.page-simulateur [data-sim-echantillons] { margin-top: 10px; }
}
@media (max-width: 699px) and (max-height: 700px) {
.page-materiaux .nuancier-tete .texte .actions { padding-top: 10px; }
}
.svh-sommaire-bande .svh-sommaire a { gap: 10px; padding: 6px 14px 6px 6px; background: linear-gradient(180deg, #F4F5F3 0%, #E6E8E7 100%); }
.svh-sommaire-bande .svh-sommaire a:hover, .svh-sommaire-bande .svh-sommaire a:focus-visible { background: linear-gradient(180deg, #F4F5F3 0%, #E6E8E7 100%); }
.svh-mini { flex: none; width: 64px; height: 64px; object-fit: contain;
-webkit-mask-image: radial-gradient(closest-side, #000 86%, transparent 100%); mask-image: radial-gradient(closest-side, #000 86%, transparent 100%); }
@media (max-width: 599px) {
.svh-sommaire-bande .svh-sommaire ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.svh-sommaire-bande .svh-sommaire a { flex-direction: column; align-items: flex-start; gap: 2px; min-height: 0; padding: 4px 12px 12px; font-size: 15px; }
.svh-sommaire-bande .svh-sommaire .svh-mini { align-self: center; width: min(100%, 116px); height: auto; aspect-ratio: 1; }
}