.page-revetement .tete-revetement {
--bord: 48px; --creux: calc(var(--p, 0) * var(--bord));
z-index: 1; margin-bottom: calc(-1 * var(--bord)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--bord)), 95% calc(100% - var(--bord) + var(--creux) * 0.19), 90% calc(100% - var(--bord) + var(--creux) * 0.36), 85% calc(100% - var(--bord) + var(--creux) * 0.51), 80% calc(100% - var(--bord) + var(--creux) * 0.64), 75% calc(100% - var(--bord) + var(--creux) * 0.75), 70% calc(100% - var(--bord) + var(--creux) * 0.84), 65% calc(100% - var(--bord) + var(--creux) * 0.91), 60% calc(100% - var(--bord) + var(--creux) * 0.96), 55% calc(100% - var(--bord) + var(--creux) * 0.99), 50% calc(100% - var(--bord) + var(--creux) * 1.0), 45% calc(100% - var(--bord) + var(--creux) * 0.99), 40% calc(100% - var(--bord) + var(--creux) * 0.96), 35% calc(100% - var(--bord) + var(--creux) * 0.91), 30% calc(100% - var(--bord) + var(--creux) * 0.84), 25% calc(100% - var(--bord) + var(--creux) * 0.75), 20% calc(100% - var(--bord) + var(--creux) * 0.64), 15% calc(100% - var(--bord) + var(--creux) * 0.51), 10% calc(100% - var(--bord) + var(--creux) * 0.36), 5% calc(100% - var(--bord) + var(--creux) * 0.19), 0% calc(100% - var(--bord)));
}
.page-revetement .tete-revetement .cadre { padding-bottom: calc(var(--bord) + 72px + 16px); }
.page-revetement .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, rgba(20, 22, 24, .5) 0%, rgba(20, 22, 24, 0) 45%);
}
.page-revetement .tete-revetement + .metiers::before { content: none; }
.page-revetement .tete-revetement .heros-texte { position: relative; width: fit-content; max-width: 100%; }
.page-revetement .tete-revetement .heros-texte::before {
content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -38% -18% -30% -22%;
background: radial-gradient(closest-side, rgba(18, 20, 22, .84) 0%, rgba(18, 20, 22, .8) 62%, rgba(18, 20, 22, .46) 85%, rgba(18, 20, 22, 0) 100%);
}
.page-revetement .tete-revetement + .metiers .metier-panneau { z-index: 2; transform: none; box-shadow: 0 30px 60px -30px rgba(18, 19, 20, .5); }
@media (max-width: 899px) {
.page-revetement .tete-revetement { --bord: 32px; }
.page-revetement .tete-revetement .cadre { padding-bottom: calc(var(--bord) + 48px + 16px); }
.page-revetement .tete-revetement + .metiers .metier-panneau:first-child { margin-left: 18%; transform: translateY(calc(var(--p-tete, 0) * -48px)); }
}
@media (max-width: 899px) and (max-height: 760px) {
.page-revetement .tete-revetement .cadre { padding-top: calc(var(--haut-fixe) + var(--entete) + 16vh); padding-bottom: calc(var(--bord) + 48px + 16px); }
.page-revetement .tete-revetement .actions { margin-top: 20px; }
}
@media (max-width: 899px) and (max-height: 500px) {
.page-revetement .tete-revetement .cadre { padding-top: calc(var(--haut-fixe) + var(--entete) + 14px); }
.page-revetement .tete-revetement h1 { margin-top: 0; font-size: clamp(28px, 4.4vw, 38px); max-width: 22em; }
.page-revetement .tete-revetement .lead { max-width: 62ch; margin-top: 10px; font-size: 15px; line-height: 1.4; }
.page-revetement .tete-revetement .actions { margin-top: 12px; }
}
@media (max-width: 899px) and (max-height: 400px) {
.page-revetement .tete-revetement .cadre { padding-top: calc(var(--haut-fixe) + var(--entete) + 6px); }
.page-revetement .tete-revetement h1 { font-size: 26px; }
.page-revetement .tete-revetement .lead { margin-top: 6px; font-size: 14px; line-height: 1.35; }
.page-revetement .tete-revetement .actions { margin-top: 8px; }
}
.page-revetement-residentiel .l2s-tete:not(.sans-photo) .l2s-bande::before { content: none; }
.page-revetement-residentiel .l2s-tete:not(.sans-photo) .l2s-cap { padding: 34px calc(var(--marge) + 20px) 34px; }
.page-revetement-residentiel .l2s-tete:not(.sans-photo) .l2s-bande { z-index: 1;
clip-path: inset(calc(var(--p, 0) * 3%) calc(var(--p, 0) * var(--marge)) calc(var(--p, 0) * 30%) calc(var(--p, 0) * var(--marge))); }
.page-revetement-residentiel .l2s-tete:not(.sans-photo) .l2s-cap { transform: translateY(calc(var(--p, 0) * -.3 * var(--h, 0px))); }
@media (min-width: 900px) { .page-revetement-residentiel .l2s-tete:not(.sans-photo) .l2s-bande { min-height: clamp(340px, 42vh, 500px); } }
.page-revetement-residentiel .l2s-tete .l2s-piste + .l2s-raisons { position: relative; z-index: 2; margin-top: calc(-.3 * var(--h-tete, 0px)); }
@media (prefers-reduced-motion: no-preference) {
.page-revetement-residentiel .l2s-tete .l2s-piste::after { content: ""; display: block; height: calc(.3 * var(--h-tete, 0px)); }
.page-revetement-residentiel .l2s-tete .l2s-piste > .l2s-bande { position: sticky; top: calc(var(--haut-fixe) + var(--entete)); }
}
@media (max-width: 899px) {
.page-revetement-residentiel .l2s-tete:not(.sans-photo) .l2s-cap { padding: 22px calc(var(--marge) + 14px) 28px; }
.page-revetement-residentiel .l2s-tete:not(.sans-photo) .l2s-bande > img { transform: translateY(calc(var(--p, 0) * -.3 * var(--h, 0px))); }
}
@media (max-width: 899px) and (max-height: 500px) {
.page-revetement-residentiel .l2s-tete:not(.sans-photo) .l2s-bande > img,
.page-gouttieres .l2s-tete:not(.sans-photo) .l2s-bande > img { aspect-ratio: 21 / 9; }
}
.page-balcons-rampes .l2s-tete:not(.sans-photo) .l2s-bande::before { content: none; }
.page-balcons-rampes .l2s-tete:not(.sans-photo) .l2s-bande { z-index: 1; align-items: flex-start; clip-path: inset(0 0 calc(var(--p, 0) * 50%) 0); }
.page-balcons-rampes .l2s-tete:not(.sans-photo) .l2s-bande::after { background: linear-gradient(180deg, rgba(18, 20, 22, .8) 0%, rgba(18, 20, 22, .55) 30%, rgba(18, 20, 22, 0) 52%),
linear-gradient(90deg, rgba(18, 20, 22, .5) 0%, rgba(18, 20, 22, 0) 60%); }
.page-balcons-rampes .l2s-tete:not(.sans-photo) .l2s-cap { padding: 30px var(--marge) 24px; }
.page-balcons-rampes .l2s-tete:not(.sans-photo) .l2s-cap > * { position: relative; }
.page-balcons-rampes .l2s-tete:not(.sans-photo) .l2s-cap::before {
content: ""; position: absolute; z-index: -1; pointer-events: none; left: -8%; top: -30%; width: min(115%, 1200px); height: 175%;
background: radial-gradient(closest-side, rgba(18, 20, 22, .84) 0%, rgba(18, 20, 22, .8) 60%, rgba(18, 20, 22, .45) 84%, rgba(18, 20, 22, 0) 100%);
}
.page-balcons-rampes .l2s-tete .l2s-piste + .l2s-raisons { position: relative; z-index: 2; margin-top: calc(-.5 * var(--h-tete, 0px)); }
@media (prefers-reduced-motion: no-preference) {
.page-balcons-rampes .l2s-tete .l2s-piste::after { content: ""; display: block; height: calc(.5 * var(--h-tete, 0px)); }
.page-balcons-rampes .l2s-tete .l2s-piste > .l2s-bande { position: sticky; top: calc(var(--haut-fixe) + var(--entete)); }
}
.page-balcons-rampes .l2s-tete:not(.sans-photo) .l2s-bande { min-height: clamp(360px, 42vh, 520px); }
@media (min-width: 900px) { .page-balcons-rampes .l2s-tete:not(.sans-photo) .l2s-cap > * { max-width: min(1000px, 72%); } }
@media (max-width: 899px) {
.page-balcons-rampes .l2s-tete:not(.sans-photo) .l2s-bande { min-height: 0; }
.page-balcons-rampes .l2s-tete:not(.sans-photo) .l2s-bande > img { aspect-ratio: 1 / 1; object-position: 50% 45%; }
.page-balcons-rampes .l2s-tete:not(.sans-photo) .l2s-bande::after { content: ""; }
.page-balcons-rampes .l2s-tete:not(.sans-photo) .l2s-cap { position: absolute; left: 0; right: 0; top: 0; padding: 18px var(--marge) 0; }
}
@media (max-width: 899px) and (max-height: 500px) { .page-balcons-rampes .l2s-tete:not(.sans-photo) .l2s-bande > img { aspect-ratio: 21 / 9; } }
.page-gouttieres .l2s-tete:not(.sans-photo) .l2s-bande::before { content: none; }
.page-gouttieres .l2s-tete:not(.sans-photo) .l2s-bande { --pente: clamp(44px, 9vw, 130px);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - (1 - var(--p, 0)) * var(--pente)), 0 100%); }
.page-gouttieres .l2s-tete:not(.sans-photo) .l2s-cap { padding-bottom: calc(var(--pente) + 24px); }
@media (min-width: 900px) { .page-gouttieres .l2s-tete:not(.sans-photo) .l2s-bande { min-height: clamp(340px, 42vh, 500px); } }
@media (max-width: 899px) { .page-gouttieres .l2s-tete:not(.sans-photo) .l2s-cap { padding-bottom: calc(var(--pente) + 18px); } }
.page-portes-fenetres .l2s-tete:not(.sans-photo) .l2s-bande {
display: flex; flex-direction: column; align-items: stretch; min-height: 0; overflow: visible;
width: min(var(--large), 100% - 2 * var(--marge)); margin: 0 auto; background: none; color: var(--texte);
}
.page-portes-fenetres .l2s-tete:not(.sans-photo) .l2s-bande::before, .page-portes-fenetres .l2s-tete:not(.sans-photo) .l2s-bande::after { content: none; }
.page-portes-fenetres .l2s-tete:not(.sans-photo) .l2s-bande > img { position: relative; inset: auto; order: 2; width: 100%; height: auto; aspect-ratio: 16 / 7; border-radius: 4px; }
.page-portes-fenetres .l2s-tete:not(.sans-photo) .l2s-cap { order: 1; padding: clamp(28px, 5vh, 56px) 0 clamp(20px, 3vh, 30px); }
.page-portes-fenetres .l2s-tete:not(.sans-photo) .l2s-cap > * { max-width: 760px; }
.page-portes-fenetres .l2s-tete:not(.sans-photo) h1 { color: var(--texte); }
.page-portes-fenetres .l2s-tete:not(.sans-photo) .l2s-cap .lead { color: var(--doux); }
@media (max-width: 899px) { .page-portes-fenetres .l2s-tete:not(.sans-photo) .l2s-bande > img { aspect-ratio: 4 / 3; } }
.page-renovations .renos-heros { grid-template-columns: minmax(0, 1fr); justify-items: start; align-items: start; }
.page-renovations .renos-heros .renos-texte { order: 1; }
.page-renovations .renos-heros .aa.aa-cadre { order: 2; justify-self: start; }
.page-renovations .renos-heros .aa::after { content: none; }
.page-renovations .renos-heros .aa.aa-cadre { width: min(100%, 588px); }
@media (max-width: 899px) and (max-height: 500px) {
.page-revetement-residentiel .l2s-tete:not(.sans-photo) .l2s-bande,
.page-gouttieres .l2s-tete:not(.sans-photo) .l2s-bande {
display: flex; align-items: flex-end; min-height: 0;
height: calc(100vh - var(--haut-fixe) - var(--entete) - var(--barre-bas, 0px));
height: calc(100svh - var(--haut-fixe) - var(--entete) - var(--barre-bas, 0px));
}
.page-revetement-residentiel .l2s-tete:not(.sans-photo) .l2s-bande > img,
.page-gouttieres .l2s-tete:not(.sans-photo) .l2s-bande > img {
position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: none;
}
.page-revetement-residentiel .l2s-tete:not(.sans-photo) .l2s-bande::after,
.page-gouttieres .l2s-tete:not(.sans-photo) .l2s-bande::after {
content: ""; background: linear-gradient(90deg, rgba(18, 20, 22, .93) 0%, rgba(18, 20, 22, .9) 50%, rgba(18, 20, 22, .55) 63%, rgba(18, 20, 22, 0) 78%);
}
.page-revetement-residentiel .l2s-tete:not(.sans-photo) .l2s-cap > *,
.page-gouttieres .l2s-tete:not(.sans-photo) .l2s-cap > * { max-width: 50%; }
.page-revetement-residentiel .l2s-tete:not(.sans-photo) .l2s-cap { padding: 18px calc(var(--marge) + 14px) 20px; }
.page-gouttieres .l2s-tete:not(.sans-photo) .l2s-cap { padding: 18px var(--marge) calc(var(--pente) * .6 + 14px); }
.page-gouttieres .l2s-tete:not(.sans-photo) .l2s-bande { --pente: 40px; }
.page-revetement-residentiel .l2s-tete h1, .page-gouttieres .l2s-tete h1 { font-size: clamp(28px, 4.6vw, 40px); }
.page-revetement-residentiel .l2s-cap .lead, .page-gouttieres .l2s-cap .lead { font-size: 16px; margin-top: 8px; }
.page-revetement-residentiel .l2s-tete:not(.sans-photo) .l2s-bande { clip-path: inset(0 calc(var(--p, 0) * var(--marge)) calc(var(--p, 0) * 30%) calc(var(--p, 0) * var(--marge))); }
}
@media (max-width: 899px) and (max-height: 400px) {
.page-revetement-residentiel .l2s-tete h1, .page-gouttieres .l2s-tete h1 { font-size: 26px; }
.page-revetement-residentiel .l2s-cap .lead, .page-gouttieres .l2s-cap .lead { font-size: 15px; line-height: 1.35; }
.page-revetement-residentiel .l2s-tete:not(.sans-photo) .l2s-cap { padding-top: 10px; padding-bottom: 10px; }
}